SharePoint 2010 : The Client Object Model (part 2) - Writing the Silverlight WebPart

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
7/13/2013 7:58:39 PM

4. Writing the Silverlight WebPart

As usual, start Visual Studio 2010. Create a new project, but this time create a Silverlight application project and call it SLScheduler. As soon as you create the SLScheduler project, Visual Studio will ask you how you intend to debug your Silverlight application. In certain situations, I have found it useful to have a separate ASP.NET web application project. So usually I go ahead and generate the SLScheduler.Web web application project.

In the same solution, go ahead and add an empty SharePoint project and call it Scheduler. I would love to be able to say that this should be a sandbox solution, but unfortunately it cannot be because the WebParts you will write intend to communicate with each other. This communication is done through WebPart connections, and WebPart connections internally use reflection, so they are not allowed in sandbox solutions. So choose this to be a farm solution.

The Silverlight XAP file will be generated out of the SLScheduler project. The Scheduler SharePoint project will deploy the XAP file into SharePoint as a module. Add a SilverlightXAP module into your Scheduler SharePoint project. In order to automatically copy the XAP file from the SLScheduler project into the SharePoint Scheduler project, right-click Properties on the SLScheduler project, and under Build Events in the Post-Build Event command line, add the following command:

copy $(TargetDir)\SLScheduler.XAP $(SolutionDir)\Scheduler\SilverlightXAP

The above command will ensure that the XAP file is copied into your Scheduler SharePoint project. It is still not however included in the final packaged solution. For it to be included in the final package solution, build the SLScheduler project once, so the XAP file is copied over to the SilverlightXAP folder. Then click the Show All Files button in the Visual Studio Solution Explorer toolbar, so you can see the SLScheduler.XAP file (see Figure 1).

Figure 1. The Show All Files button

With the SLScheduler.xap file visible, right-click the SLscheduler.xap file and choose to include it in your project. While you're at it, go ahead and delete the sample.txt file as well. Finally, ensure that the elements.xml file looks like Listing 5. Note that you don't have to make this change; Visual Studio should have edited the elements.xml for you soon as you included the SLSCheduler.XAP file in your project.

Example 5. The Elements.XML File to Deploy the Module
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="">
 <Module Name="SilverlightXAP">
  <File Path="SilverlightXAP\SLScheduler.xap" Url="SilverlightXAP/SLScheduler.xap" />


Now in the same SharePoint project, add a feature called Scheduler. Using the feature designer, include the module shown previously as a part of the feature. Make sure that the feature is scoped to site collection or higher because you are next going to add a WebPart into the same project, and WebParts cannot be added to features whose scope is lower than a site collection. The responsibility of this WebPart would be to download and run the SLScheduler.XAP file within SharePoint. There is an out-of-the-box Silverlight WebPart as well. While you could use that for simplistic cases, in this particular scenario, I intend to add postbacks free WebPart communication, which is why I am choosing to create my own WebPart.

So go ahead and add a new WebPart called ScheduleOverview. Also include the ScheduleOverview WebPart to be deployed by the Scheduler feature.

Your project structure is now set up.

In short, you created a solution with a Silverlight project and a SharePoint project. The SharePoint project includes a Scheduler feature. The Scheduler feature includes a ScheduleOverview WebPart and a SilverlightXAP module. The Silverlight project copies the XAP file into the proper module location in the SharePoint project.

Your project structure should now look like Figure 2.

Figure 2. The Scheduler Project Structure

With the basic structure of your project set up, it is time to write some code. There are two places where you will need to write code. The first is the WebPart itself. The WebPart is rather simple and simply downloads and displays the XAP file from a well known URL. The code can be seen in Listing 6.

Example 6. Code for the ScheduleOverView WebPart
public class ScheduleOverView : WebPart
  protected override void RenderContents(HtmlTextWriter writer)
    StringBuilder sb = new StringBuilder();
    sb.AppendLine("<object style=\"display:block\" data=\"data:application/x-Silverlight-2,\"
type=\"application/x-Silverlight-2\" width=\"600px\" height=\"500px\">");
    sb.AppendLine("<param name=\"source\" value=\"/SilverlightXAP/SLScheduler.xap\" />");
    sb.AppendLine("<param name=\"onError\" value=\"onSilverlightError\" />");


sb.AppendLine("<param name=\"initParams\" value=\"MS.SP.url=" + SPContext.Current.Site.Url + "\" />");


As you can see, this code is rather simple; it just renders out an object tag into the HTML. Silverlight in a browser is just an object tag that loads the necessary ActiveX control to run the Silverlight application. Most parameters are quite straightforward, but of special mention is the initParams parameter for the Silverlight object. Specifically, we are using a special variable name called MS.SP.url to pass in the URL for the current running site. This is necessary for the client object model to get a handle to ClientContext.current. This is something that you didn't have to do in the previous .NET examples of the client object model because all those .NET examples were running as a separate exe outside of SharePoint. In this case, however, your Silverlight application is running within the context of SharePoint, so you shouldn't create a client context if you don't need to. Instead, you should try and hook into the ClientContext.Current.

Next, let's start writing the Silverlight application itself. The Silverlight application is going to read appointments out of an appointments list based on the calendar template. It will read this data using the client object model. It will then present the data in a visually appealing manner. I'm using the telerik RADScheduler component, but you can choose to render the content in any manner you wish. The final result is still a XAP file, which is easy to deploy and run.

In order to use the client object model from the Silverlight application, add references to the following two DLLs in your Silverlight project:

  • Microsoft.SharePoint.Client.Silverlight.dll

  • Microsoft.SharePoint.Client.Silverlight.Runtime.dll

These DLLs can be found in the 14\TEMPLATE\LAYOUTS\ClientBin folder.

In order to use Telerik's controls, you will need to download and install the Silverlight suite from its website at You would then need to add references to the Telerik.Windows.Controls and Telerik.Windows.Controls.Scheduler dlls.

With the references in place, let's start writing the code for the Silverlight application. The XAML code can be seen in Listing 7. As you can see, I've declared an instance of RadScheduler, which I am using in a read-only form.

Example 7. MainPage.XAML Code
  d:DesignHeight="600" d:DesignWidth="500">

  <Grid x:Name="LayoutRoot" Background="White">
    <my:RadScheduler Name="schedule" ViewMode="Day" IsReadOnly="True">


DayStartTime="07:00:00" DayEndTime="19:00:00"

Now before we can start writing the code for code-behind, let's create some sample data first. The sample data is simply going to be a SharePoint list based on the calendar template. I'm going to call this list Appointments and add a few sample appointments in there. My list looks like Figure 3.

Figure 3. My busy calendar list

Next let's start writing the code for the code-behind. The code for the code behind can be seen in Listing 8.

Example 8. MainPage.XAML.cs Code
public partial class MainPage : UserControl
  private IEnumerable<ListItem> appointments = null;

  public MainPage()
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);

  void MainPage_Loaded(object sender, RoutedEventArgs e)
    ClientContext context = ClientContext.Current;
    CamlQuery camlQuery = new CamlQuery()
      ViewXml = "<Query><OrderBy><FieldRef Name='EventDate'/></OrderBy></Query>"
    var query = from item in context.Web.Lists.GetByTitle("Appointments").GetItems(camlQuery)
          select item;
    appointments = context.LoadQuery(query);
    context.ExecuteQueryAsync(succeededCallBack, failedCallback);

  void succeededCallBack(object sender, ClientRequestSucceededEventArgs e)
    this.Dispatcher.BeginInvoke(() =>
          foreach (var appointment in appointments)
            schedule.Appointments.Add(new Appointment()
                Subject = appointment.FieldValues["Title"].ToString(),
                Start =
                End = Convert.ToDateTime(appointment.FieldValues["EndDate"]).ToLocalTime(),
                Body = appointment.FieldValues["Description"].ToString()

  void failedCallback(object sender, ClientRequestFailedEventArgs e)
    MessageBox.Show(e.ErrorDetails.ToString(), "Error", MessageBoxButton.OK);


As you can see from Listing 8, in the MainPage_Loaded method, I'm getting a handle to ClientContext.Current. Then using the ClientContext and the LoadQuery method, I'm executing a query asynchronously to fetch the items out of the appointments list sorted by EventDate. In Silverlight and JavaScript, I have to call ExecuteQuery methods asynchronously. Then in the succeededCallBack, I'm creating an instance of the object that I can add to the RadScheduler instance declared earlier in my XAML in Listing 8. In the failedCallback, I'm simply showing a message box with the error message.

Now go ahead and build and deploy your project, and drop an instance of the SchedulerWebPart on the home page of your site. You should see the WebPart running in action as shown in Figure 4.

Figure 4. My busy calendar as shown in a Silverlight WebPart

Thus by using Silverlight and the Client object model, I'm able to read the various list items and display them in a visually appealing manner.

Next, I'm going to demonstrate the loading of a single appointment or a single list item, given the ID of that list item. I will do so using JavaScript consuming the client object model.

And then eventually I will connect these two WebParts in a postback-free manner, so a selected appointment from the Silverlight WebPart can show its details in the JavaScript WebPart.

Other -----------------
- SharePoint 2010 : Making Enterprise Content Management Work - Records Management (part 2) - Configuring Enterprise Document and Records Management
- SharePoint 2010 : Making Enterprise Content Management Work - Records Management (part 1) - Record Declaration, Information Management Policies
- SharePoint 2010 : Making Enterprise Content Management Work - Document Management (part 3) - Document IDs, Managed Metadata
- SharePoint 2010 : Making Enterprise Content Management Work - Document Management (part 2) - Document Sets
- SharePoint 2010 : Making Enterprise Content Management Work - Document Management (part 1) - Item-level Security, Versioning Settings
- SharePoint 2010 : Setting Lockdown Mode for publishing sites, Configuring Site Collection audit settings, Accessing security policy reports
- SharePoint 2010 : Checking effective permission user interface
- SharePoint 2010 : Adding a user via PowerShell, Delegating PowerShell permissions
- SharePoint Server 2010 Business Intelligence Platform (part 6) - Reporting Services
- SharePoint Server 2010 Business Intelligence Platform (part 5) - PowerPivot
- SharePoint Server 2010 Business Intelligence Platform (part 4) - PerformancePoint Services - Time Intelligence, Decomposition Tree
- SharePoint Server 2010 Business Intelligence Platform (part 3) - PerformancePoint Services - Create a Dashboard
- SharePoint Server 2010 Business Intelligence Platform (part 2) - PerformancePoint Services - Using PerformancePoint Within a Site, Dashboard Designer, PerformancePoint Data Connections
- SharePoint Server 2010 Business Intelligence Platform (part 1) - Business Intelligence Web Parts
- SharePoint 2010 : Writing Workflows with Visual Studio
- SharePoint 2010 : Writing Workflows with SharePoint Designer
- SharePoint 2010 : Customizing Out of the Box Workflows
- SharePoint 2010 : Out of the Box Workflows
- SharePoint 2010 : Office 2010 Client Applications (part 4)
- SharePoint 2010 : Office 2010 Client Applications (part 3) - Backstage
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.