Practical Silverlight and SharePoint Integration: Part One

The user experience with SharePoint can be expanded in a number of ways.  The usual road is to write web parts that run on the server.  The drawback to this approach is that in a large corporate environment many companies are very reluctant to support more that just the out-of-the-box web parts.  There are many reasons for this, security concerns, stability of custom web parts, and the need to support them across multiple front end web servers.  With Microsoft’s introduction of Silverlight we can now enhance the user experience by writing browser safe code that can be deployed in a SharePoint environment with just a few files.  Silverlight code running on the browser can also access SharePoint list data via web services to give us additional tools for presenting data to the user.  In this series of blog postings will explore the steps to need to make this happen, and the pitfalls to lookout for along the way.

Part One: Create a basic Silverlight Application

In this blog posting we will go through the steps it takes to create a basic silver light application with a web service reference to SharePoint.

Step 1: Create a Silverlight Application Project

 The first step is to use Microsoft Visual Studio 2008 to create a new Silverlight Application project.

Open a new project by clicking on File -> New —> Project…

 

 

Select the C# Silverlight Application project type as show below (A) and entry your project name (B).

 

 

Then press OK on the Add Silverlight Application Dialog box (also shown below), to create an ASP.NET web project to host the Silverlight application for testing.

 

 

 

You should now have a new project created and your Visual Studio window should a mew solution called “SharePointListExample” that contains two projects, one called “SharePointListExample”, which is our new Silverlight application and the other called “” which in the ASP.NET project that was generated to help us test.  The window should look similar to this:

 

 

Step 2: Add the Ability to Read SharePoint List Data

Now that you’ve successfully created a Silverlight application project we will need to add a reference to the SharePoint List web service so we will have the ability to read and write to SharePoint lists from our Silverlight application.

As in the image below right click on the “References” section of the SharePointListExample project, and select Add Service Reference.

 

 

In the Add Service Reference Dialog that appears type in the name of the service you are adding a reference to in the box labled “A” below.  In our case we wish to access the SharePoint List service which is just the name of your SharePoint site followed by “/_vti_bin/lists.asmx”.  For a complete list of web service available from SharePoint take a look here: http://msdn.microsoft.com/en-us/library/ms479390.aspx or here: http://www.developer.com/tech/article.php/3104621

Before you press Go, enter the name of the namespace that Visual Studio will use to generate the service reference proxy code under (“B” in the image below).  Then press “Go”.

 

 

When you press Go Visual Studio will attempt to access the details about the web service on your SharePoint server.  Once completed select the “ListsSoap” service, and press “OK”.

 

You should now see the service reference added to your project similar to the image below:

 

 

Step 3: Create a Simple Page Layout

Now that we have our basic Silverlight project created we will need a add a simple page layout to begin testing our code.  Click the the “Page.xaml” object in the project and add the following code to the XAML definition for the page:

	

		 XML-Code: Page.xaml
	
	
<UserControl x:Class="SharePointListExample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition MaxHeight="20"/>
        </Grid.RowDefinitions>
        <ScrollViewer Grid.Row="0">
            <TextBox x:Name="txtOutput" IsReadOnly="True"></TextBox>
        </ScrollViewer>
        <StackPanel Grid.Row="1">
            <Button x:Name="btnGo" Content="Go" Click="btnGo_Click"/>
        </StackPanel>
    </Grid>
</UserControl>

The above code should result in a Silverlight page looking similar to the image below:

 

 

Step 4: Add the Code to Access SharePoint Data

Access the code behind file by clicking on View Code (Labeled A below) or double click on the “Page.xaml.cs” file (Labeled B below) under the Page.xaml object:

 

The initial code page should look similar to this:

	

		 C#-Code: Page.xaml.cs
	
	
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;
 namespace SharePointListExample{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }
        private void btnGo_Click(object sender, RoutedEventArgs e)
        {
        }
    }
} 

Now lets add code to the btnGo_Click event so that our Silverlight application will retrieve data from SharePoint when the “Go” button is clicked:

	

		 C#-Code: 
	
	
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; 
namespace SharePointListExample{    
public partial class Page : UserControl    
{
        public Page()
        {
            InitializeComponent();
        }
        private void btnGo_Click(object sender, RoutedEventArgs e)
        {
             try
             {
                 ListsSoapClient listSoapClient = new ListsSoapClient();
                 listSoapClient.GetListCollectionCompleted += new EventHandler (listSoapClient_GetListCollectionCompleted);
                 listSoapClient.GetListCollectionAsync();
             }
             catch (Exception exception)
             {
                   MessageBox.Show(exception.Message, "Failed to get list collection", MessageBoxButton.OK);
             }
        }
         void listSoapClient_GetListCollectionCompleted(object sender, GetListCollectionCompletedEventArgs e)
        {
             try
             {
                 txtOutput.Text = e.Result.ToString();
             }
             catch (Exception exception)
             {
                   MessageBox.Show(exception.Message, "Failed to get list collection", MessageBoxButton.OK);
             }
        }
    }
}
 

---

 Build the Silverlight application by clicking on Build —> Build Solution in the menu bar.

 

 If you are like me you might need to build a few times to get rid of any syntax mistakes or typos.  Once you’ve built the application successfully you are ready to run your Silverlight application in debug mode.

Click on Debug —> Run in the menu bar.

 

If this is the first time you have debugged this application, you may need to enable debugging on the test ASP.NET application.  The following dialog box may appear… Just click OK.

 

Visual Studio will start up a developer web server and open the test application page with your browser.  You should see something similar to the image below.

 

If everything goes according to plan, and it rarely does, you should see the results of our query to SharePoint appear as raw xml similar to the image below:

 

 

You may run into a secure issue if your SharePoint site does not have a cross domain policy file located in it’s root directory.  The cross domain policy file is a relatively simple xml file that tells SilverLight that it is OK to access web services across domains.  The file is named “crossdomain.xml” and the simplest form of the file is shown below:  NOTE:  The cross domain policy file shown below should be used for debugging and development only! On your test and production servers a more restrictive form of the policy file should be used.  More information on cross domain policy files can be found here:  http://msdn.microsoft.com/en-us/library/cc645032(VS.95).aspx

	

		 XML-Code: crossdomain.xml
	
	
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">

<cross-domain-policy>
	<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>

You should use Microsoft Office SharePoint Designer to place the crossdomain.xml policy file in the root directory of your site. Placing the crossdomain.xml file in physical sharepoint root directory for your application (C:\inetpub\wwwroot\wss\VirtualDirectories\80), does not appear to work.

 Complete source for Part 1 of Practical Silverlight and SharePoint Integration can be found here: PracticalSilverLightAndSharePointIntegration.Part1.zip (1045 KB)

In the next part we will enhance our Silverlight application and expand on how the Silverlight application connects to the SharePoint server.

Part One | Part Two | Part Three | Part Four (To be done)

(c) Copyright 2009 – Aaron G. Daisley-Harrison – All Rights Reserved.