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.

    d:DesignHeight="200" d:DesignWidth="120">

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


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()
            context = new ClientContext(ApplicationContext.Current.Url);
            nav = context.Web.Navigation.QuickLaunch;

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

        private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
            // This is not called on the UI thread.

        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)
             treeView.ItemsSource = siteColl;

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


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



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



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=””&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++) {


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





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:


Sharepoint 2013 Create a Visual Web Part

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


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

Add a Visual Web Part item to your project:


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


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:


Sharepoint 2013 – Create an AppPart Sharepoint Hosted

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


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


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


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


Change the SampleWebPart.aspx to include a label:


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 () {



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:


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