Silverlight and Sharepoint 2010: Getting Started

This article is compatible with the latest version of Silverlight.

In this introductory article we will see three methods to insert a Silverlight application into a Sharepoint site and debug it. In a next article we will show how to use the Client Object Model to access to the Sharepoint data and to add new data.

This article is intended for…

Set up the development environment

The first and necessary requirement to set up a development environment where to play with Sharepoint and Silverlight is to have a 64 bit operative system; that means that you need a computer with a x64 capable CPU. What is nice about this is that you don’t necessarily have to install a Window Server 2008; also Windows 7 x64 and Windows Vista Service Pack 2 x64 are usable for development purposes. Obviously you cannot use them for production deployments.
The Sharepoint edition I used is “Sharepoint Foundation 2010” which substitutes the older Microsoft Windows SharePoint Services and it is cost free. However, it is a basic edition which does not include several features available in Sharepoint Server. Yet this is the important thing, it is a good starting point to experiment Sharepoint and Silverlight together.

I got my environment working on Windows 7 Pro x64 following this guide: Setting Up the Development Environment for SharePoint 2010 on Windows Vista, Windows 7, and Windows Server 2008. It took me some time and I had to install Visual studio first and then the rest to get the running environment, but in the end it was worth it. Obviously to complete the setup of the development environment you need also the Silverlight 4 tools for Visual Studio 2010 and the Silverlight toolkit.

Lastly, one not mandatory but recommended thing: you should also install the SharePoint Designer 2010, a productive tool to quickly create and manage SharePoint solutions. 

Familiarize with Sharepoint 2010

Following the on-line guide I suggested in the previous paragraph you should come to a new Sharepoint site automatically created and reachable writing something like http://yourcomputerName in your browser. The page showed should not be too different from the one in the following image:

In this page you see the home page of a site based upon a template called “Team site”. It can be considered as a starter kit site for small organizations or teams inside larger organizations that want to publish and share information about projects, schedules and so on with other departments of the organization. In fact, Sharepoint Foundation offers a small list of templates to choose when creating a new site like for instance a “Group Work Site”, a “Blog” a “Document Workspace” etc., while Sharepoint Server offers a larger list with some templates particularly complete and advanced.

Before going any further, and to better understand what we will do in the next paragraphs, it is appropriate to highlight some basic concepts you need to know to develop Sharepoint applications. First of all, each Sharepoint site is made up of Site Columns, Lists, Libraries, Views and Web Parts.
A Site Column is the basic element where you can store data and information; a SharePoint site based on a template already contains many pre-configured columns to provide a suitable container for the most common type of information You can create new Site Columns and choose the type of information to store in it, even custom columns of type “Lookup” where you can extract information already on the site in other elements. A Site column is again usable, indeed you can assign a column to other more structured elements, such as lists and content types across the site.
A List is a generic component made up of one or more Site Columns where you can store and manage information in an efficient way. The “Team Site” template provides some pre-configured Lists, i.e. “Announcements”, “Calendar”, “Links” and “Tasks” to be used to store upcoming events, keep track of work and so on.
A Library is essentially a specialized List used to store files and manage their visualization, tracking and sharing.
The Views are used to show the items in a List or Library. You can choose one of the predefined views or build a complete custom View on your own by selecting the audience to which it is addressed, the Columns to include and their sorting and filtering, and tons of other options.
The Web Parts are modular building blocks which you can use to enrich the web pages of a site. Sharepoint includes by default a series of ready-to-use Web Parts for various purposes; for instance the most common are the “Content Editor Web Part” to insert formatted text, tables, images and other contents to a page; and the “Image Web Part” to add a picture and control its properties.
We, as Silverlight developers, should be clear in mind about what is a web part, because it is through this that we can put our Silverlight applications in a SharePoint Web page. Essentially a Sharepoint Web Part is more or less an ASP.NET Web Part with some exclusive features useful to interact with the Sharepoint environment.

Consuming a Silverlight component inside a Sharepoint page

There are at least three ways to add a Silverlight application to a Sharepoint web site. The first is indicated if you want to insert a third parties Silverlight application and you have just the .xap file and not the source code. The second method uses a developer-side approach and gives you the maximum control of what is happening and the third is useful if you want your Silverlight application to be deployed in a Sharepoint site automatically when you build or debug your application.

The first method: using a shared Document Library

Let me first show the more intuitive way but less appropriate in a production environment. Locate the Silverlight application you want to put in the Sharepoint site, something simple to start such as a banner rotator or a simple animation. Go to your new “Team Site” and sign in as administrator. Click on “Shared Documents” on the menu on the left of the web page.

Click on “Add new document” link at the bottom of the list to show the Upload Document dialog box:

Click on Browse… button and look for the “.xap” file in the folder of your Silverlight application. Click OK and you should see your .xap file included in the list of share documents. Now click on “Site Pages” on the left menu to go to the specialized List containing all the pages of your site. Create a new page by clicking on “Add new page”, insert a page name and the new page in editing mode with the content editor ribbon on the top will appear:

Now you are ready to insert your Silverlight application. Click on “Editing Tools/Insert”, select “Media and Content” in Categories list view and “Silverlight Web Part” in “Web Parts” list view:

A dialog box will ask you the URL for the .xap file you want to add to the page; here inexplicably Sharepoint does not offer you the possibility to navigate the Document libraries through the UI and you have to digit the path and name of your file directly in a text box. Fortunately the task is easy and you can insert a relative path, something like this:

 /Shared Documents/MySilverlightApp.xap

Now you should see your Silverlight application confined in a box entitled “Silverlight Web Part”. Don’t bother about the actual look & feel, you can resize the box and show/hide the title clicking on the arrow at the top right corner and select “Edit Web Part” on the small drop down menu:

A new configuration will appear on the right side allowing you to refine appearance, layout and other settings:

Click OK and save your page and your work is done.

Second method: using a web part

This method requires the creation of a new “Sharepoint Web Part” directly from Visual Studio 2010. Fortunately there is a template project ready to use; so let’s open Visual Studio 2010 and create a new project selecting the “Sharepoint 2010 Visual Web Part” template:

Visual Studio will ask you the server where you want to deploy your web part; select your Sharepoint solution and go ahead. On the Solution Explorer you will see the web part related files and a new user control:

Delete the user control since we won’t use it. Open the “.cs” file of your web part (VisualWebPart1.cs in my case) and change the name of the class (VisualWebPart1 in my case) with something like SLVisualizer; locate the CreateChildren() method and substitute the content with the following code:

 string SLPartToRender =  "<div id='silverlightControlHost'>" 

                 + "<object data='data:application/x-silverlight-2'type='application/x-silverlight-2' width='100%' height='100%'>"

                 + "<param name='source' value=/Shared Documents/NameOfYourSLApp.xap'/>"

                 + "</object></div>";

 LiteralControl SLToRender = new LiteralControl(SLPartToRender);

 this.Controls.Add(SLToRender);

The idea here is to use a LiteralControl to add a portion of HTML code to the rendering of the web part. As you can see, in the parameter “source” I included the relative path of the xap file we already added in the Shared Document Library as described in the first method. Before going on, change the name of the class of your Web Part to something easy to identify, then open the file with “.webpart” extension and change the type name and title of your Visual Web Part in the elements.xml file giving the same name used for the class as follows:

 <?xml version="1.0" encoding="utf-8"?>

 <webParts>

   <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">

     <metaData>

       <type name="SLHostWP.VisualWebPart1.NameOfYourWebPart, $SharePoint.Project.AssemblyFullName$" />

       <importErrorMessage>$Resources:core,ImportErrorMessage;</importErrorMessage>

     </metaData>

     <data>

       <properties>

         <property name="Title" type="string">NameOfYourWebPart</property>

         <property name="Description" type="string">My Visual WebPart</property>

       </properties>

     </data>

   </webPart>

 </webParts>

This will help you to identify the web part when you add it to a page of your site. Now you are ready for the deployment. Select Build/Deploy Solution from the top menu of Visual Studio and once the operation has been completed, open your site in the browser, log in as administrator, create a new page and from the “Editing Tools” ribbon on the top of the page select “Insert/Web Part” and, from “Categories” choose “Custom” and from the Web Part list, choose the Visual Web Part you just deployed:

Click “Add”, then save the page and enjoy your new Silverlight app inside the Sharepoint page.

Third method: using a Sharepoint module

This method is probably the most recommended if you have the source code of the Silverlight application and want to delegate to Visual studio the task to keep your Silverlight application updated in a site of Sharepoint. Open your Silverlight Solution in Visual Studio 2010 and add a new project selecting the “Sharepoint 2010/Empty SharepointProject” template:

Choose the “Deploy as a sandboxed Solution” option and click “Finish”. Then right mouse click on the new project in the Solution explorer Window to add a new item. Select “Sharepoint 2010/Module” from the installed templates:

Go back to the “Solution Explorer”, expand the tree under the new module and delete the file “Sample.txt. Then right mouse click on the Module to open the Properties:

Select the “Project Output References” property and click on the small button on the right to open the “Project Output References” Dialog Box; here click on the “Add” button to add an item to the list on the left; configure the properties on the right as shown in the following image:

In the “Project Name” property you have to choose the name of your Silverlight app project (in my case it is DataFilesViewer).

Click “OK” and you are almost done. The concept behind this is that this “Module” will act as a 'ferry' to the insertion of the Silverlight in SharePoint Site. You can now select the Sharepoint project just included in the Solution as the “Startup project”, add the Silverlight Project to its “Project Dependencies” and deploy your solution. Your “.xap” file will be added to the Sharepoint site under the path:

 /NameOfModule/NameOfYourSLApp.xap

Let’s go ahead and open the dialog box of the properties of your Sharepoint Module project; click on the “SharePoint” tab option and set the “Enable Silverlight debugging (instead of Script debugging) checkbox”.

Now, if you press “F5” you will be able to debug your Silverlight application inside the Sharepoint site. Obviously you have first to add the Silverlight app to a page to do so. With the page in edit mode, click on “Editing Tools/Insert”, select “Media and Content” in Categories list view and “Silverlight Web Part” in “Web Parts” list view; then put the path above listed when requested and save the page.

Summary

In this article we have taken the first steps in the use of Silverlight applications in SharePoint sites. We have set up a development environment with Sharepoint Foundation and Visual Studio and we have seen three different ways to add a Silverlight application to a web page of a Sharepoint site. In the next article we will see how to use the Client Object Model of Sharepoint to access data from Silverlight.