Home > SharePoint 2010, Visual Studio 2010 > Walkthrough 6: Extending the SharePoint 2010 UI with Silverlight

Walkthrough 6: Extending the SharePoint 2010 UI with Silverlight

 

Exercise Duration: 20 minutes

Exercise Overview

This example shows how to create a Silverlight Application that uses the SharePoint Client Object model to render SharePoint list data. It also shows how to host that Silverlight Application in the Silverlight web part on SharePoint.

Feature Overview

The Silverlight Web Part allows developers and users to easily add Silverlight applications (*.XAP) to SharePoint sites. Client Object Model can be used in Silverlight to access SharePoint programmatically.

Task 1: Create a Silverlight Application for the SharePoint Client Object Model.

1. Open Visual Studio 2010 from the Start | Programs | Visual Studio 2010 menu.

2. Create a new project by using File | New Project.

3. Pick the Visual C# | Silverlight templates.

4. From the Visual C# | Silverlight templates select the Silverlight Application template.

5. Use SPSilverlightExample as the name.

6. Set the location to be C:\SPHOLs.

7. Press OK to create the project.

image

 

8. When the New Silverlight Application dialog appears, accept all the defaults by pressing OK.

image

 

 

9. Right-click on the SPSilverlightExample project in the Solution Explorer and select Add Reference.

10. Go to the Browse tab in the Add Reference dialog,  and add a reference to the two assemblies from the specified location: 

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin\

The file names are: Microsoft.SharePoint.Client.Silverlight.dll and  Microsoft.SharePoint.Client.Silverlight.Runtime.dll.

image

 

Task 2: Write code to access and render SharePoint List Data

1. Open the Toolbox and expand Silverlight Controls. 

2. Drag a DataGrid control onto the Silverlight Designer.

image

 

3. In the Solution Explorer right-click on Page.xaml and select View Code.

4. Inside the Page.xaml.cs add the following using statement at the top of the file:

 

using Microsoft.SharePoint.Client;

5. Add the following class before the Page class:

 

public class Project

{

    public String Title { get; set; }

    public DateTime DueDate { get; set; }

    public String Description { get; set; } 

}

6. Add the following member to the Page class itself:

 

ListItemCollection _projectItems;

7. Add the following code to the Page Constructor

 

var context = new ClientContext(ApplicationContext.Current.Url);

context.Load(context.Web);

var projects = context.Web.Lists.GetByTitle("Projects");

context.Load(Projects);

 

var query = new Microsoft.SharePoint.Client.CamlQuery();

var strQuery = "<View><Query><Where><Gt>" +

    "<FieldRef Name=’Due_x0020_Date’ />" +

    "<Value Type=’DateTime’>2008-01-1T00:00:00Z</Value>" +

    "</Gt></Where></Query><ViewFields>" +

    "<FieldRef Name=\"Title\" /><FieldRef Name=\"Description\" />" + 

   "<FieldRef Name=\"Due_x0020_Date\" />" +

    "</ViewFields></View>";

 

query.ViewXml = strQuery;

_projectItems = projects.GetItems(query);

context.Load(_projectItems);

context.ExecuteQueryAsync(OnRequestSucceeded, null);

 

 

8. Add the following code inside of the Page class after the constructor:

 

private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)

{

    // this is not called on the UI thread

    Dispatcher.BeginInvoke(BindData);

}

private void BindData()

{

            var list = new List<Project>();

            foreach (var li in _projectItems)

            {

                list.Add(new Project

                {

                    Title = li["Title"].ToString(),

                    DueDate =          Convert.ToDateTime(li["Due_x0020_Date"].ToString()),

                    Description = li["Description"].ToString()

                });

            }

            dataGrid1.DataContext = list;}

 

This code initializes the SharePoint Silverlight client object model context (ClientContext). It then gets a reference to the Projects list. Runs a simple CAML query against the list to pull all projects with a duedate greater than 1/1/2008. The results are converted into a list of Projects and bound to the Silverlight DataGrid control.

Task 3: Deploy and Test using the SharePoint Silverlight web part.

To deploy the solution to SharePoint the resulting .xap file needs to be in the C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin folder. 

1. Right click on your project and select properties and select the Build tab. 

2. Change the output path to the following: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin.

 

image

3. Build the solution and fix any typos that may have occurred.

4. Add the SharePoint Silverlight web part to a web part page:

Click the Edit button to put the page in edit mode. 

Click Insert

Click Web Part

Click Authoring

Click Silverlight Web Part

Click Add 

 

 

5. When prompted type in: /_layouts/ClientBin/SPSilverlightExample.xap

image

 

The rendered web part looks like this:

 

image

Exercise Summary

In this walkthrough you built a Silverlight application that accesses SharePoint lists using the Client Object Model.

Advertisements
  1. srinivas
    March 2, 2010 at 1:36 am

    when i am uploading .xap file it is giving the error saying that “could not download the silverlight or the silverlight plugin did not load. to reconfigure webpart orto provide a different application(.xap) file,open the tool pane and click on configure”.

    please provide the solution asap.

    Thanks in advance

  2. March 2, 2010 at 9:59 pm

    Hello srinivas,

    Please met me know which step the walkthrough failed for you.
    Also, please let me know if you are using a lab VHD or an environment built from scratch.

    I am happy to help you through it.

  3. March 18, 2010 at 2:40 pm
  4. April 19, 2013 at 5:58 am

    Oh my goodness! Incredible article dude! Thank you, However I am
    experiencing troubles with your RSS. I don’t understand why I cannot join it. Is there anybody getting identical RSS problems? Anybody who knows the solution can you kindly respond? Thanks!!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: