Archive | AppParts and WebParts RSS for this section

Sharepoint 2013 Silverlight Webpart

This post is about how to integrate a Silverlight Webpart in SharePoint 2013 and use the Sharepoint Client Object Model, to show SharePoint Data.

The goal is to create a Silverlight Webpart that queries data to QuickLaunch Navigation and shows the result in a two levels TreeView Control.

I started creating a SharePoint 2013 Silverlight Webpart Project in Visual Studio 2012 (named SilverlightSample).

It automatically created a SilverlightWebpart (SilverlightSampleWebPart).

Then I starded with MainPage.xaml, where I inserted a TreeView Control, and created the templates to render data.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:Client="clr-namespace:Microsoft.SharePoint.Client;assembly=Microsoft.SharePoint.Client.Silverlight"
    x:Class="SilverlightSampleWebPart.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="200" d:DesignWidth="120">
    <UserControl.Resources>

        <sdk:HierarchicalDataTemplate x:Key="ChildrenTemplate"
                                         ItemsSource="{Binding Path=Children}">
            <TextBlock Text="{Binding Path=Title}" />
        </sdk:HierarchicalDataTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White" Height="200" Width="120">
        <sdk:TreeView Grid.Row="2"  Name="treeView"
                      ItemTemplate="{StaticResource ChildrenTemplate}"
                      >
        </sdk:TreeView>
    </Grid>
</UserControl>

 

Next I edited MainPage.xaml.cs file, to put the logic to get Data.

I created a class SiteNodes, where the first node is set to Web Title, and the Children nodes are the first level navigation nodes.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.SharePoint.Client;

namespace SilverlightSampleWebPart
{
    public partial class MainPage : UserControl
    {
        private ClientContext context;
        private NavigationNodeCollection nav;
        SiteNodes site;

        public class SiteNodes
        {
            public string Title { get; set; }
            public List<SiteChildren> Children { get; set; }

        }

        public class SiteChildren
        {
            public string Title { get; set; }
        }

        public MainPage()
        {
            InitializeComponent();
            context = new ClientContext(ApplicationContext.Current.Url);
            context.Load(context.Web);
            nav = context.Web.Navigation.QuickLaunch;
            context.Load(nav);

            context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), null);
        }

        private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
        {
            // This is not called on the UI thread.
            Dispatcher.BeginInvoke(BindData);
        }

        private void BindData()
        {
             List<SiteNodes> siteColl = new List<SiteNodes>();
             site = new SiteNodes { Title = context.Web.Title };
             site.Children = new List<SiteChildren>();
             foreach (NavigationNode nn in nav)
             {
                 BindChilds(nn);
             }
             siteColl.Add(site);
             treeView.ItemsSource = siteColl;
        }

        private void BindChilds(NavigationNode nn)
        {
            SiteChildren sn = new SiteChildren{ Title = nn.Title };
            site.Children.Add(sn);

        }

        private void treeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
        {

        }

    }
}
 

After that I deployed my solution and add my new SilverlightWebpart to my page:

Silverlight

Sharepoint 2013 Properties in app part

To define properties in an app part, you need to edit the elements.xml file that defines the app part.

In this sample a created a property named “value1”, I changed the Src of the content element and defined the new property in the properties section:

<?xml version=”1.0″ encoding=”UTF-8″?>

<Elements xmlns=”http://schemas.microsoft.com/sharepoint/”&gt;<ClientWebPart DefaultHeight=”200″ DefaultWidth=”300″ Description=”ClientWebPart1 Description” Title=”ClientWebPart1 Title” Name=”ClientWebPart1″>

<!– Content element identifies the location of the page that will render inside the client web part         Properties are referenced on the query string using the pattern _propertyName_         Example: Src=”~appWebUrl/Pages/ClientWebPart1.aspx?Property1=_property1_” –>

<Content Src=”~appWebUrl/Pages/ClientWebPart1.aspx?{StandardTokens}&value1=_value1_” Type=”html“/>

<!– Define properties in the Properties element.         Remember to put Property Name on the Src attribute of the Content element above. –>

<Properties><Property Name=”value1″ Type=”string” WebCategory=”App Settings” RequiresDesignerPermission=”false” DefaultValue=”Test value” WebDescription=”Value 1″ WebDisplayName=”Value 1″ WebBrowsable=”true”/></Properties></ClientWebPart></Elements>

To read the propeties’s value, in the app part page, you need to parse the url, since properties are in the query string. I used the code:

$(document).ready(function () {

var paramsStr =””;

if (document.URL.indexOf(‘?’) != -1) {

var params = document.URL.split(‘?’)[1].split(‘&’);

for (var i = 0; i < params.length; i++) {

        if(params[i].split(‘=’)[0]==’value1′)

                        paramsStr = paramsStr +decodeURIComponent(params[i]).split(‘=’)[1];

}

$(‘#value1’).text(paramsStr);

}

});

To test my code, in my app page I created the element:

<p id=”value1″></p>

When I run my app part I see the Defaul Value of my property:

AppPartProp1

Sharepoint 2013 Create a Visual Web Part

In Visual Studio 2012, create a new SharePoint 2013 Empty Project:

app1

Choose your dev SharePoint Site and deploy as a farm solution:

Add a Visual Web Part item to your project:

app3

Edit your Visual Web Part, and insert a calendar and a label(choose from toolbox):

app4

Define the calendar’s selected date changed event, by double clicking any date in your calendar, and change the event code:

protectedvoid Calendar1_SelectionChanged(object sender, EventArgs e)

{

this.Label1.Text = Calendar1.SelectedDate.ToString();

}

Deploy your solution, and add the Visual Webpart to your Home page:

app5

Sharepoint 2013 – Create an AppPart Sharepoint Hosted

Create a Visual Studio 2012 “App for SharePoint 2013” Project:

app1

Enter your SharePoint url and select the “SharePoint hosted” option:

app2

Add a “Client Web Part Item” to your project:

app3

Select the option “Create a New Client Web Part Page”:

app4

Change the SampleWebPart.aspx to include a label:

app5

Create a SampleWebPart.js file, in the Scripts folder, and  include the script:

‘use strict’;
var context = SP.ClientContext.get_current();

var web = context.get_web();

$(document).ready(function () {

    getWebTitle();

});

function getWebTitle() {

    context.load(web, “Title”);

    context.executeQueryAsync(onGetWebSuccess, onGetWebFail)

}

function onGetWebSuccess() {

  
    $(‘#webTitle’).text(‘Welcome to ‘ + web.get_title());

}

function onGetWebFail(sender, args) {

    $(‘#webTitle’).text(‘Error ‘);

}

Change the SampleWebPart.aspx to include the new script file:

<script type=”text/javascript”src=”../Scripts/SampleWebPart.js”></script>

Edit the AppManifest.xml file to define app permissions:

app8

Deploy your project, and add the webpart to your homepage:

app7