Consulting Services
Consulting Services

SharePoint 2010 and Silverlight 4.0

The introduction of SharePoint 2010 has many very useful enhancements that make real world creation of SharePoint sites much easier than in previous versions. For a more complete list of some of these enhancements, you can read the February newsletter, located here. In this newsletter, I would like to explore one of the ways in which Silverlight developers can embed their Silverlight 4.0 applications into SharePoint pages. This technique will give you all of the UI flexibility of Silverlight, bundled in a package to easily utilize SharePoint 2010 lists. Introducing, the SharePoint 2010 Client Object Model.

It’s all about the data!

Silverlight 4.0 has received much attention from the development community for its extremely customizable user interface and the power of XAML (transitions, browser independence, etc). Do you want a checkbox inside of a TreeView? How about having that TreeView inside of a ListBox? Silverlight will let you do that (Google System.Windows.Data.IValueConverter). Unfortunately, Silverlight has for much of its life cycle been underutilized in LOB applications. The addition of RIA services bridged this gap somewhat, and now with the addition of the SharePoint 2010 Client Object Model there is another way to easily get the data you need into the UI that you want.

So, what is the plan?

Getting access to SharePoint 2010 data from your Silverlight 4.0 application is as simple as the following 4 steps:

  1. Create a list in SharePoint 2010 on or under the site that you wish to access it from.
  2. Create 2 new projects inside of Visual Studio 2010.
    1. The first project will be an Empty SharePoint Project. Inside of the project you will create a new web-part, a new feature, and a new module to describe and assist with deployment of the feature being created.

      Silverlight

      Within the WebPart code file, you will need to add code to dynamically create the object tag. You can find the code for this object tag in the optional website created in the next step.

      This HTML is from the .Web application
      Silverlight


      Becomes this code in the WebPart code file…
      Silverlight

      You will need to add a line to the object tag for the Initial Parameters. The value of this element will be the URL for the SharePoint site that contains the list created in the first step. Creating the post build task on the Silverlight project below will cause the XAP file to be inserted under the new Module. Show all files under this module, and include the XAP file in your project. This will cause the Elements.XML file to be automatically modified to include the path information for the XAP file.

    2. Create a new Silverlight 4.0 project. During the creation of this project, you will be prompted to add an additional Web application to host the Silverlight application. You don’t really need this project, but it does provide valuable benefits should you decide to create it.
      1. It provides the object tag that you will need to construct for the WebPart created above.
      2. It provides another way to debug you Silverlight application without using SharePoint for debugging.

      Once you have created the new Silverlight project, reference the SharePoint 2010 client object model library. The libraries referenced are located in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin
      1. Microsoft.SharePoint.Client.Silverlight.dll
      2. Microsoft.SharePoint.Client.Silverlight.Runtime.dll

      Create a post-build event to copy the XAP file created in this project into the same directory as the Module created in the SharePoint project in the previous step.

      Silverlight

      Include this XAP file in the SharePoint project and delete the sample.txt file that was created for you when you created the new module.

      Silverlight

  3. Pull the data from the client object model library into one of your own objects within your Silverlight application. This can be accomplished with some pretty simple code utilizing the camlQuery object from the Client Object Model.

    The ClientContext.ExecuteQueryAsync method will return a list of IEnumerable<ListItem> obejcts which you will need to translate into your own list of objects.

    Silverlight

    You will need to create two method signatures for handling the results of the camlQuery; one for success and one for failure.
    Below is a screenshot of each of these methods. In the success method I have included the code for enumerating each item and adding the FullName field from the SharePoint collection to my list of items.

    Silverlight

    Once you have the data within your Silverlight application, you are free to utilize it in any way you see fit within your application. Generally, the data will be extracted from the IEnumerable that is returned from the camlQuery, and inserted into a custom collection for the Silverlight application. It is then generally bound to a control for display. You could also choose to modify the data within your Silverlight application and submit those changes back to the SharePoint list.

  4. After testing the functionality of your Silverlight application, you simply need to deploy the SharePoint project by choosing Build | Deploy. The WSP file should contain all of the necessary libraries to successfully deploy and run the Silverlight web-part in the sandbox environment.
There are a few moving parts, but as far as plans go; this one is pretty straight forward. There are more options available for updating SharePoint data from your Silverlight application, and responding to changes in SharePoint data within your Silverlight application, but those conversations are part of a different day, and require a slightly different plan.


Contact Deliveron to learn more about how you can invest in a Silverlight implementation that not only leverages your existing investment in Microsoft products but produces real business value.