Steve Fox's OBA Ramblings : Silverlight and SharePoint

Using Media Streaming Services to Integrate Silverlight with SharePoint

Steve Fox — Sat, 28 Mar 2009 20:02:00 GMT

One of the cool things about the Media Streaming Services is that you can circumvent some of the server set-up for SharePoint and still integrate a Silverlight (SL) app into your SharePoint (SP) site. By using the Media Streaming Services, which are free by the way, you can integrate a cool little SL app into your SP site and then simply use the <iframe> code that is auto-generated to integrate the SL app into a Content Editor Web Part.

To complete this integration requires four main steps:

Create the SL app;
Add the SL app to your Media Streaming Services site;
Configure the app and grab the <iframe> code; and
Use the Content Editor Web Part to integrate the SL app with SP.

Let’s do a quick walk through to help get you started.

The Silverlight App

We’ll first assume that you’ve got the SL app created. I created a simple app that uses the Community toolkit to render a simple chart. You can get more information on this here: http://www.codeplex.com/Silverlight. I ensured the correct DLLs were registered in my GAC and then added the appropriate references in my SL app to create a somewhat interesting looking chart. The project contains an object called SharePointData.cs (an oddly named class that represents the items that will be displayed in my chart, which in this app is a set of courses in my bucket of course inventory). Note in the figure below the DataVisualization and Theming DLLs that have been added as references in the project. (I tweaked Tim’s example from his blog-post here.)

The custom class code is as follows:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.Collections.Generic;
using System.ComponentModel;

namespace BarChart
{
public class SharePointData
{

public class CourseData
{

public string TrnCourse { get; set; }
public int NumCourseSales { get; set; }

}

        public static List<CourseData> loadChartData()
        {
            List<CourseData> courseList = new List<CourseData>();

            courseList.Add(new CourseData() { NumCourseSales = 17, TrnCourse = "VSTS-399" });
            courseList.Add(new CourseData() { NumCourseSales = 39, TrnCourse = "OFC2-214" });
            courseList.Add(new CourseData() { NumCourseSales = 67, TrnCourse = "SQL1-151" });
            courseList.Add(new CourseData() { NumCourseSales = 13, TrnCourse = "ARCH-402" });
            courseList.Add(new CourseData() { NumCourseSales = 53, TrnCourse = "DEV1-164" });
            courseList.Add(new CourseData() { NumCourseSales = 42, TrnCourse = "VSP1-010" });
            courseList.Add(new CourseData() { NumCourseSales = 15, TrnCourse = "SPDEV-302" });
            courseList.Add(new CourseData() { NumCourseSales = 31, TrnCourse = "SPARC-201" });
            courseList.Add(new CourseData() { NumCourseSales = 29, TrnCourse = "SPD1-159" });
            courseList.Add(new CourseData() { NumCourseSales = 44, TrnCourse = "SPD2-203" });
            courseList.Add(new CourseData() { NumCourseSales = 44, TrnCourse = "AZUR-227" });
            courseList.Add(new CourseData() { NumCourseSales = 42, TrnCourse = "OFC3-365" });
            courseList.Add(new CourseData() { NumCourseSales = 32, TrnCourse = "VBA1-102" });
            courseList.Add(new CourseData() { NumCourseSales = 13, TrnCourse = "WEBD-838" });

return courseList;

}

}
}

The XAML code that renders the chart is as follows:

And the code-behind for the SL app is as follows:

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.Ink;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Windows.Controls.DataVisualization.Charting;
using Microsoft.Windows.Controls.DataVisualization;
using Microsoft.Windows.Controls.Theming;
using System.Collections.ObjectModel;

namespace BarChart
{
public partial class Page : UserControl
{

        List<SharePointData.CourseData> cr = new List<SharePointData.CourseData>();
        public Page()
        {
            InitializeComponent();

            cr = SharePointData.loadChartData();
            ColumnSeries column = MyBarChart.Series[0] as ColumnSeries;
            column.ItemsSource = cr;
        }
    }
}

Note that you could likely remove a number of the Using statements to optimize your code.

With these three elements working together, you can run the application and you will get the following results:

The thing you want to do now is to get this to the Media Streaming Services.

Uploading the XAP File into the Media Streaming Services

After you build your SL app, you’ll want to upload the XAP file into the Media Streaming Services.

To do this, go to http://silverlight.live.com/ and sign in with your Live account. Then click on Manage Applications and click Upload Application. Provide a name for the file you’re going to upload, click Create and then browse to your XAP file (i.e. your SL app) and then upload it to the Streaming Media Services.

Configuring the SL App

You’ll then need to click the Create link to create a manifest for the SL app. For my example, I only filled out a couple of the fields (see below), but you could complete others and even configure things like background images if you wanted.

Click Update when you’re done. You’ll then be presented with a number of different options for embedding the SL app into your web page. I typically use the first one, but you can use any one of these that would match your needs. So, copy the code and we’ll move onto the final step in the process.

Use the Content Editor Web Part to integrate the SL app with SP

Go to your SP site and click Site Actions and Edit Page. Click Add a web part and then select Content Editor Web Part from the gallery.

Once the web part’s been added, click the Open in tool pane link to configure the web part. Click the Source Editor and then paste the <iframe> code into the editor, which should look something like the following (depending on how you’ve configured the SL app).

Click Save, and voila your new whizbang SL app should render via the Streaming Media Services site. You can use the source editor to adjust the height and width if need be, and you can set the Chrome Type to none if you want. I personally like the cleaner look with the standard Content Editor Web Part title on the web part chrome. The end result should be the following:

Pretty cool! I will also mention that this not only works for your SharePoint site on premises (i.e. the SP instance your company hosts), but this also works for SP Online as well—so it’s a very easy way to code custom apps for SP Online. Further, this alleviates the need to do a lot of the web.config changes (so you don’t need direct admin access to the SP server), which is always helpful when you’re trying to develop and deploy cool and funky little apps for your shazammy SP site.

Happy coding all, and I hope this post was useful.

Steve

Amending the web.config File to Support Silverlight Development on SharePoint

Steve Fox — Wed, 11 Mar 2009 08:31:00 GMT

Many developers are looking at enhancing SharePoint by integrating Silverlight into their SharePoint servers. One of the key blockers, though, is getting your server set up so you can actually build and more importantly deploy Silverlight applications to your SharePoint server. After you set up your development environment by installing the appropriate software [See www.silverlight.net and click the Getting Started tab for the Silverlight pre-reqs (that you’ll install on your Win 2008 or Win 2003 server) and then install VSeWSS 1.2, MOSS SP1 (or WSS SP1)], one of the key things you’ll need to do when setting up your server is to amend your web.config file in a number of places. If you don’t amend your web.config file, you can build and deploy Silverlight apps to your SharePoint server but they won’t render properly. For example, you’ll get a really annoying white space where your Silverlight app should be.

In this blog, I’ve added a web.config from one of my demo environments. You’ll note that I’ve highlighted 8 specific areas that need to be added to your web.config in order to support Silverlight development. The additional areas that I’ve added to my web.config are marked in red. Add these sections to your web.config, and you should be good to go!

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

</sectionGroup>

<!—- 1. Added these for Silverlight support for different services. -->

</sectionGroup>

</sectionGroup>

</configSections>

</PageParserPaths>

</SafeMode>

<!—- 2. Added my new SL safe controls here. (These are a few of my SL apps on my SharePoint server, so you don’t need to add all of these…just make sure yours are added as safecontrols. -->

</SafeControls>

</PeoplePickerWildcards>

</MergedActions>

</SharePoint>

<system.web>

</securityPolicy>

<!—- 3. Added these for Silverlight support. -->

</httpHandlers>

</authorization>

<!—- 4. Added this httpModule for additional Silverlight support here. -->

</httpModules>

<!—- 5. Added core assembly support for Silverlight here. -->

</assemblies>

</expressionBuilders>

</compilation>

</namespaces>

</tagMapping>

<!—- 6. Added additional Silverlight support here. -->

</controls>

</pages>

</providers>

</siteMap>

</transformers>

</webParts>

</system.web>

</dependentAssembly>

</dependentAssembly>

</dependentAssembly>

</dependentAssembly>

</dependentAssembly>

</dependentAssembly>

</dependentAssembly>

</dependentAssembly>

</dependentAssembly>

</dependentAssembly>

<!—- 7. Adding additional binding redirect support for Silverlight. -->

</dependentAssembly>

</dependentAssembly>

</assemblyBinding>

</runtime>

<system.web>

</authorization>

</system.web>

</location>

<system.web>

</authorization>

</system.web>

</location>

<System.Workflow.ComponentModel.WorkflowCompiler>

</authorizedTypes>

</System.Workflow.ComponentModel.WorkflowCompiler>

</appSettings>

<system.net>

</defaultProxy>

</system.net>

<!—- 8. Adding script-handler support for Silverlight. -->

<system.webServer>

</modules>

</handlers>

</authorization>

</security>

</system.webServer>

</configuration>

Silverlight, SharePoint, Services…Oh Yeah!!!

Steve Fox — Sun, 15 Feb 2009 05:05:34 GMT

The last blog post I wrote was on interacting with SharePoint using services. One of the things that I’ve been quite involved in over the past year or so has been Silverlight and SharePoint integration. You will definitely see more of this type of development, so building off of my last post I decided to write a blog on consuming a web service with SharePoint.

That said, this blog post will walk you through how to create a Web service that integrates with the SharePoint object model and then uses that service in a Silverlight application (which we’ll embed within SharePoint). It is an excerpt from a wider Silverlight and SharePoint 1-day training that I’ve been building at work (with the help of Advaiya). It also complements a book Paul Stubbs and I just wrote called “Professional SharePoint 2007 Development using Silverlight 2.” You can check this book out here: http://www.amazon.com/Professional-Microsoft-SharePoint-Development-Silverlight/dp/0470434007/ref=sr_1_1?ie=UTF8&s=books&qid=1234663767&sr=8-1.

Note: I will cover WCF, Siverlight and SharePoint in a future blog post.

Your Environment

Before you begin, make sure you’ve got the following environment set up:

1. Your web.config supports Silverlight. Check out the SIlverlight and SharePoint Blueprint (http://www.codeplex.com/SL4SP) for more information as well as the recent MSDN article on this subject (http://msdn.microsoft.com/en-us/magazine/dd148643.aspx).

2. Windows Server 2003, 2008, Silverlight runtime, Silverlight Tools for VS 2008 SP 1, VS 2008 SP1, and VSeWSS 1.2.

Building the Service

The first thing you need to do is build the Web service. The Web service will be an ASMX-based web service (i.e. ASP.NET). (We will cover WCF-based services and Silverlight later on in the workshop.) To create the service, open Visual Studio 2008. Select File, New Web Site and then select ASP.NET Web Service. Choose the File System as the location and then select the language (e.g. Visual C#) and provide a path for the project. Click OK. Figure 1 provides a screenshot of the New Web Site dialog.

Figure 1: New Web Site Dialog

In Solution Explorer, change the names of the .asmx and .cs service files from the default Service.asmx and Service.cs (in the App_Code folder) to MyFirstSPService.asmx and MyFirstSPService.cs.

Figure 2: Renaming the Service Files

You’ll also need to update the class references and statements in the newly named files. For example, in MyFirstSPService.asmx ensure you have the following code:

<%@ WebService Language="C#" CodeBehind="~/App_Code/MyFirstSPService.cs" Class="MyFirstSPService" %>

And in the MyFirstSPService.cs file, ensure you have the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

// [System.Web.Script.Services.ScriptService]

public class MyFirstSPService : System.Web.Services.WebService

{

public MyFirstSPService () {

//Uncomment the following line if using designed components

//InitializeComponent();

}

[WebMethod]

public string HelloWorld() {

return "Hello World";

}

}

To make sure that your solution compiles, hit F5 or select Debug, Start Debugging on the Visual Studio 2008 menu. You may be prompted with the dialog in Figure 3. If you are, click OK.

Figure 3: Debugging Not Enabled

If your solution successfully compiles and debugs, you will be presented with the following debug screen.

Figure 4: Debug Screen

In the debug screen, you will see a link at the top representing the one web method (HelloWorld) that is available within the service. Click the HelloWorld link and then to test the service click the Invoke button—which returns a string with the value: “Hello World.” See Figure 5.

Figure 5: Invoking the Hello World Web Method

Now that you’ve tested the default service that is created for you when you create a Web service, go back to the Visual Studio project and replace the HelloWorld web method code with the following web method:

[WebMethod]

public void useNormalMOSSApi(string SalesSPSite, string productName, string productNumber, string FY08Sales)

{

string strDashListRoot = SalesSPSite;

using (SPSite site = new SPSite(strDashListRoot))

{

using (SPWeb web = site.OpenWeb())

{

web.AllowUnsafeUpdates = true;

SPList list = web.Lists["FY 09 Sales"];

SPListItem Item = list.Items.Add();

Item["Title"] = productName;

Item["ProductNum"] = productNumber;

Item["Sales"] = FY08Sales;

Item.Update();

}

}

}

This code essentially enables you to set the context for a SharePoint web site and then add data to three different columns (Title, ProductNum and Sales) in a list called FY 09 Sales.

When you add this code, you’ll get errors. This is because you need to add a reference to the Microsoft.SharePoint.dll. To do this, right-click the project name, select Add Reference and then select Windows SharePoint Services (as is shown in Figure 6) and click OK.

Figure 6: Add Reference Dialog

Note: In order for this service to work, you’d need to have created a custom list in SharePoint called “FY 09 Sales” with three columns of type Text called “Title,” “ProductNum,” and “Sales.” To do this, go to your SharePoint site and click View All Site Content at the root level site and then click Create. In the Custom Lists category, click Custom List. Make the Name “FY 09 Sales” and add a description to the Description field. When the list is created it will open by default. Click Settings and then select Create Column. Add each of the three aforementioned columns setting the type of information in the column to Single lines of text—see Figure 7.

Figure 7: Setting the Column Type

Getting back to the service, now that you’ve added the reference to the SharePoint DLL, add a using statement at the top of the class as follows:

using Microsoft.SharePoint;

The code errors should go away. The full MyFirstSPService.cs file should look like the following:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

using Microsoft.SharePoint;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

// [System.Web.Script.Services.ScriptService]

public class MyFirstSPService : System.Web.Services.WebService

{

public MyFirstSPService () {

//Uncomment the following line if using designed components

//InitializeComponent();

}

[WebMethod]

public void useNormalMOSSApi(string SalesSPSite, string productName, string productNumber, string FY08Sales)

{

string strDashListRoot = SalesSPSite;

using (SPSite site = new SPSite(strDashListRoot))

{

using (SPWeb web = site.OpenWeb())

{

web.AllowUnsafeUpdates = true;

SPList list = web.Lists["FY 09 Sales"];

SPListItem Item = list.Items.Add();

Item["Title"] = productName;

Item["ProductNum"] = productNumber;

Item["Sales"] = FY08Sales;

Item.Update();

}

}

}

}

To test this, build the web site solution. Hit F5 and then test out the web method.

Note: You must create the SharePoint list before you can successfully test out the service.

Figure 8: Testing the Service Call

If your service is successful, you should have a result similar to the following in your SharePoint list:

Figure 9: Service Result in SharePoint

Deploying the Service

Now that you’ve built the service, you need to deploy it. We’ll deploy it to IIS 7.0. If you’re using another version of IIS, the general process you’ll need to follow is to 1) Create a web site, 2) map the virtual path to the root web site path of the service, and 3) set permissions for the service.

Open IIS and then expand the Connections until you see the web sites. Right-click Web Sites and select Add Web Site. Give the site a name, for example MyFirstSPServiceIISSite and then map the physical path of the service you just created to the IIS web site. See Figure 10. Assign an unused port.

Note: To test the service out on the local environment, click Test Settings. This will tell you if the service is reachable. If you do not get to successful tests, you’ll need to adjust the Connect as… settings. One way is to explicitly set the calling service with your (that is the local Windows credentials) to make sure the call will succeed. You then also need to go to the Authentication option in the Features view and set Windows Authentication to Enabled. In a production environment, you’ll need to use different settings—potentially having a user (e.g. IIS_User) for your service and enabling ASP.NET Authentication.

Figure 10: Creating the IIS Site

When you‘ve done this, click View, Refresh and then select MyFirstSPServiceIISSite in the Web Sites list and select Content View. You should see something similar to Figure 11. To make sure you’ll be able to

Figure 11: Content View of Web Site in IIS

At this point, you’ll be able to right-click the MyFirstSPService.asmx file and select Browse. Test out the web method again to make sure you have another successful call in the service to the SharePoint site—see Figure 12.

Figure 12: Second Successful Call

While all the service testing at each step in the development process may seem monotonous, it is recommended as a good defensive programming practice. This way, if the service fails you have a better idea of where in the process it failed.

Building the Silverlight and SharePoint Application

Now that you’ve created the service, you can now create the client side application, which is the Silverlight application that will eventually be deployed to SharePoint. Let’s first create the Silverlight application.

Open Visual Studio 2008 and create a new solution, using the Blank Solution template. To do this, click File, New Project, and then select the Visual Studio Solutions and Blank Solution template. Provide a name for your solution and then click OK.

Figure 13: Creating a Blank Solution

Right-click the solution and then select Add ,New Project, and then in the Project Types category select Silverlight. In the Templates category select Silverlight Application and provide a name for your application, for example SPSilverlightClient.

Figure 14: New Silverlight Application

When prompted, just select Automatically generate a test page… as the test environment for the Silverlight application. You do not need the full web site for this solution. Navigate to the Page.xaml file and add the following XAML code to create your Silverlight UI.

<UserControl x:Class="SPSilverlightClient.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="750" Height="380">

<Canvas x:Name="LayoutRoot">

<Canvas Width="550" Height="300">

<Path Width="550" Height="300" Canvas.Left="38" Canvas.Top="9" Stretch="Fill"

Data="F1 M 42.336,8.86813L 257.336,8.86813C 259.545,8.86813 261.336,10.659 261.336,12.8681L 261.336,77.8681C 261.336,80.0773 259.545,81.8681 257.336,81.8681L 42.336,81.8681C 40.1269,81.8681 38.336,80.0773 38.336,77.8681L 38.336,12.8681C 38.336,10.659 40.1269,8.86813 42.336,8.86813 Z ">

<Path.Fill>

<LinearGradientBrush StartPoint="0.75,0.7" EndPoint="0.75,-0.01">

<LinearGradientBrush.GradientStops>

<GradientStop Color="Azure" Offset="0"/>

<GradientStop Color="#FFDCDCDC" Offset="0.8"/>

<GradientStop Color="#FFC3C3C3" Offset="1"/>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Path.Fill>

</Path>

</Canvas>

<TextBlock

Canvas.Left="50"

Canvas.Top="15"

FontFamily="Trebuchet MS"

FontWeight="Bold" FontSize="18"

Text="Sales Information for FY 09"

Foreground="#FFF3F3F3" />

<TextBlock

Canvas.Left="51"

Canvas.Top="16"

FontFamily="Trebuchet MS"

FontWeight="Bold" FontSize="18"

Text="Sales Information for FY 09"

Foreground="#FF666666" />



<TextBlock x:Name="txtBlckSites"

Canvas.Left="50"

Canvas.Top="50"

FontFamily="Trebuchet MS"

FontWeight="Bold" FontSize="12"

Text="Available SharePoint Sites: "

Foreground="#FF666666"/>

<ComboBox x:Name="cmboBoxOfferings"

Canvas.Left="210"

Canvas.Top="50"

Height="20"

Width="290"

DropDownClosed="cmboBoxOfferings_DropDownClosed">

<ComboBoxItem x:Name="optionOne">

<TextBlock x:Name="txtSPDev">

http://stefoxdemo

</TextBlock>

</ComboBoxItem>

<ComboBoxItem x:Name="optionTwo">

<TextBlock x:Name="txtVSDev">

http://sharepoint/sites/spotw

</TextBlock>

</ComboBoxItem>

<ComboBoxItem x:Name="OptionThree">

<TextBlock x:Name="txtSQLSRVDev">

http://sharepoint/sites/sp14

</TextBlock>

</ComboBoxItem>

<ComboBoxItem x:Name="OptionFour">

<TextBlock x:Name="txtAdvSPDev">

http://my/sites/stefox

</TextBlock>

</ComboBoxItem>

<ComboBoxItem x:Name="OptionFive">

<TextBlock x:Name="txtClientDev">

http://sharepoint/sites/signup

</TextBlock>

</ComboBoxItem>

</ComboBox>

<TextBlock

Canvas.Left="50"

Canvas.Top="90"

FontFamily="Trebuchet MS"

FontWeight="Bold" FontSize="12"

Text="Site Description: "

Foreground="#FF666666" />

<TextBlock x:Name="txtSiteDescr"

Canvas.Left="210"

Canvas.Top="90"

FontFamily="Trebuchet MS"

FontWeight="Bold" FontSize="12"

Text="Description Here."

Foreground="Black"

Width="290"

TextWrapping="Wrap"/>

<TextBlock

Canvas.Left="50"

Canvas.Top="130"

FontFamily="Trebuchet MS"

FontWeight="Bold" FontSize="12"

Text="Product Name: "

Foreground="#FF666666"/>

<TextBox x:Name="txtProductName"

Height="25"

Width="200"

Canvas.Left="210"

Canvas.Top="125"/>

<TextBlock

Canvas.Left="50"

Canvas.Top="170"

FontFamily="Trebuchet MS"

FontWeight="Bold" FontSize="12"

Text="Product Number: "

Foreground="#FF666666"/>

<TextBox x:Name="txtProductNum"

Height="25"

Width="200"

Canvas.Left="210"

Canvas.Top="165"/>

<TextBlock

Canvas.Left="50"

Canvas.Top="215"

FontFamily="Trebuchet MS"

FontWeight="Bold" FontSize="12"

Text="FY 09 Sales: "

Foreground="#FF666666"/>

<TextBox x:Name="txtFY08Sales"

Height="25"

Width="200"

Canvas.Left="210"

Canvas.Top="210"/>

<Button x:Name="btnWebServiceCall"

Height="25"

Width="60"

Content="Insert"

Canvas.Left="125"

Canvas.Top="260"

Click="btnWebServiceCall_Click"/>

<Button x:Name="btnFieldsClear"

Height="25"

Width="60"

Content="Clear"

Canvas.Left="215"

Canvas.Top="260"

Click="btnFieldsClear_Click"/>

</Canvas>

</UserControl>

When complete, your Silverlight client UI should similar to Figure 15.

Figure 15: Silverlight Client

Notice that there are a number of key events that are associated with some of the controls in the XAML code. These correspond to code-behind events in the Page.xaml.cs file. Before we jump to the code-behind, add a reference to the service you created earlier. To do this, right click References and select Add Service Reference. To get the service URL, you can go into your IIS view, right-click the ASMX file and select Browse. Copy and paste the URL from the browser to the Address field in the Add Service Reference dialog—see Figure 16.

Figure 16: Adding a Service Reference

With the service added to the Silverlight client application, you can now add the code-behind that maps to the Silverlight UI.

The first thing you’ll need is four class-level variables, which represent the data that we’re going to pass to the web method in our service.

string productName = "";

string productNumber = "";

string FY08Sales = "";

string SalesSPSite = "";

Then, you’ll need to add the other logic, which in the code to follow includes an event from the Insert button in the Silverlight UI and some logic that maps to the Clear button.

The web service call, which is triggered from the button, looks like the following:

private void btnWebServiceCall_Click(object sender, RoutedEventArgs e)

{

productName = txtProductName.Text;

productNumber = txtProductNum.Text;

FY08Sales = txtFY08Sales.Text;

SPSilverlightClient.ASMXUpdateSPList.MyFirstSPServiceSoapClient proxy = new SPSilverlightClient.ASMXUpdateSPList.MyFirstSPServiceSoapClient();

proxy.useNormalMOSSApiCompleted += new EventHandler<System.ComponentModel.AsyncCompletedEventArgs>(proxy_useNormalMOSSApiCompleted);

proxy.useNormalMOSSApiAsync(SalesSPSite, productName, productNumber, FY08Sales);

proxy.CloseAsync();

}

Note that Silverlight service calls are asynchronous, so you need to have a completed event, which in this application looks like the following:

void proxy_useNormalMOSSApiCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)

{

MessageBox.Show("Can you believe it? This stuff actually works!");

}

The code here obviously doesn’t do much other than issue a message to the user when the service call is complete. In production code, you would probably want to verify that there had been an update to the SharePoint list before issuing this type of message.

The btnFieldsClear_Click event, shown below, simply clears the user entries in the Silverlight UI.

private void btnFieldsClear_Click(object sender, RoutedEventArgs e)

{

txtFY08Sales.Text = "";

txtProductName.Text = "";

txtProductNum.Text = "";

}

You may also notice that there is an event that corresponds to the closing of the drop-down box. This is essentially place-holder code, but in reality should grab the text property of the selected item within the combo box and assign that value to SalesSPSite. However, since I only have one site to demo, I hard-coded the variable to always be that site.

private void cmboBoxOfferings_DropDownClosed(object sender, EventArgs e)

{

//Be warned...lazy hard-coded variable data to follow.

if (optionOne.IsSelected == true)

{

txtSiteDescr.Text = "FY 09 Sales Tracking Site";

SalesSPSite = "http://stefoxdemo";

}

else if (optionTwo.IsSelected == true)

{

txtSiteDescr.Text = "SharePoint on the Web Metrics";

SalesSPSite = "http://stefoxdemo";

}

else if (OptionThree.IsEnabled == true)

{

txtSiteDescr.Text = "Wave 14 Reports";

SalesSPSite = "http://stefoxdemo";

}

else if (OptionFour.IsEnabled == true)

{

txtSiteDescr.Text = "Personal Metrics";

SalesSPSite = "http://stefoxdemo";

}

else if (OptionFive.IsEnabled == true)

{

txtSiteDescr.Text = "Signage Reports";

SalesSPSite = "http://stefoxdemo";

};

}

If you were to look at the code-behind in its entirety, this is what it would look like:

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 SPSilverlightClient

{

public partial class Page : UserControl

{

string productName = "";

string productNumber = "";

string FY08Sales = "";

string SalesSPSite = "";

public Page()

{

InitializeComponent();

}

private void btnWebServiceCall_Click(object sender, RoutedEventArgs e)

{

productName = txtProductName.Text;

productNumber = txtProductNum.Text;

FY08Sales = txtFY08Sales.Text;

SPSilverlightClient.ASMXUpdateSPList.MyFirstSPServiceSoapClient proxy = new SPSilverlightClient.ASMXUpdateSPList.MyFirstSPServiceSoapClient();

proxy.useNormalMOSSApiCompleted += new EventHandler<System.ComponentModel.AsyncCompletedEventArgs>(proxy_useNormalMOSSApiCompleted);

proxy.useNormalMOSSApiAsync(SalesSPSite, productName, productNumber, FY08Sales);

proxy.CloseAsync();

}

void proxy_useNormalMOSSApiCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)

{

MessageBox.Show("Can you believe it? This stuff actually works!");

}

private void btnFieldsClear_Click(object sender, RoutedEventArgs e)

{

txtFY08Sales.Text = "";

txtProductName.Text = "";

txtProductNum.Text = "";

}

private void cmboBoxOfferings_DropDownClosed(object sender, EventArgs e)

{

//Be warned...lazy hard-coded variable data to follow.

if (optionOne.IsSelected == true)

{

txtSiteDescr.Text = "FY 09 Sales Tracking Site";

SalesSPSite = "http://stefoxdemo";

}

else if (optionTwo.IsSelected == true)

{

txtSiteDescr.Text = "SharePoint on the Web Metrics";

SalesSPSite = "http://stefoxdemo";

}

else if (OptionThree.IsEnabled == true)

{

txtSiteDescr.Text = "Wave 14 Reports";

SalesSPSite = "http://stefoxdemo";

}

else if (OptionFour.IsEnabled == true)

{

txtSiteDescr.Text = "Personal Metrics";

SalesSPSite = "http://stefoxdemo";

}

else if (OptionFive.IsEnabled == true)

{

txtSiteDescr.Text = "Signage Reports";

SalesSPSite = "http://stefoxdemo";

};

}

}

}

At this point, you are now done building the Silverlight UI. Let’s move on to the final part: building the SharePoint web part.

Building the SharePoint Web Part Host Container

The SharePoint web part will serve as the object within SharePoint that will simply put host your Silverlight application. There are a number of ways to do this, of which this is one.

Open the solution file (where you created your Silverlight application) and then right-click the solution and select Add, and New Project. Select the SharePoint project type and then select Web Part. Provide a name for your Web Part project.

Figure 17: Adding SharePoint Web Part

When your project is created, right click References and select Add Reference. Add the System.Web.Extensions DLL and System.Web.Silverlight DLL and click OK. See Figure 18

Figure 18: Adding Silverlight References

In the WebPart1.cs file (I removed and re-added a new Web Part item and called mine MyFirstSPServiceCall), you’ll need to have the following code. This checks for a ScriptManager object and also sets some properties for the Silverlight control we’ll add to the Controls collection.

protected override void OnLoad(EventArgs e)

{

base.OnLoad(e);

ScriptManager sm = ScriptManager.GetCurrent(this.Page);

if (sm == null)

{

sm = new ScriptManager();

Controls.AddAt(0, sm);

}

}

protected override void CreateChildControls()

{

base.CreateChildControls();

System.Web.UI.SilverlightControls.Silverlight ctrl = new System.Web.UI.SilverlightControls.Silverlight();

ctrl.ID = "InsertSPListItem";

ctrl.Source = "http://stefoxdemo/XAPS1/SPListClient.xap";

ctrl.Width = new Unit(650);

ctrl.Height = new Unit(400);

Controls.Add(ctrl);

}

You can edit the XML properties of your web part through the WSP View. For example, the following XML is from the .webpart XML file. You can see I’ve updated the name and description of the web part with something a little more intuitive.

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

<webParts>

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

<metaData>



<type name="967945ef-8baa-406e-bda3-fe4b836b2f66" />

<importErrorMessage>Cannot import MyFirstSPServiceCall Web Part.</importErrorMessage>

</metaData>

<data>

<properties>

<property name="Title" type="string">My First SharePoint Service Call Web Part</property>

<property name="Description" type="string">A web part that hosts a call into SharePoint to update a list.</property>

</properties>

</data>

</webPart>

</webParts>

Jumping back to the code for the actual web part, the complete code that you’ll need to have in the webpart.cs file (in my case MyFirstSPServiceCall.cs) is as follows:

using System;

using System.Runtime.InteropServices;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Serialization;

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebControls;

using Microsoft.SharePoint.WebPartPages;

namespace SPSilverlightSPWP

{

[Guid("967945ef-8baa-406e-bda3-fe4b836b2f66")]

public class MyFirstSPServiceCall : System.Web.UI.WebControls.WebParts.WebPart

{

public MyFirstSPServiceCall()

{

}

protected override void OnLoad(EventArgs e)

{

base.OnLoad(e);

ScriptManager sm = ScriptManager.GetCurrent(this.Page);

if (sm == null)

{

sm = new ScriptManager();

Controls.AddAt(0, sm);

}

}

protected override void CreateChildControls()

{

base.CreateChildControls();

System.Web.UI.SilverlightControls.Silverlight ctrl = new System.Web.UI.SilverlightControls.Silverlight();

ctrl.ID = "InsertSPListItem";

ctrl.Source = "http://stefoxdemo/XAPS1/SPListClient.xap";

ctrl.Width = new Unit(650);

ctrl.Height = new Unit(400);

Controls.Add(ctrl);

}

}

}

At this point, you need to ensure the Debug property in your SharePoint project properties is set to your http://localhost (or the correct server to which you’re deploying the web part), and you can deploy the web part.

If you notice in the source property code of the Silverlight application, it references an absolute URL on a test server. This presupposes two things: 1) you’ve created a document library called XAPS1 and 2) you’ve added the XAP file (the compiled Silverlight application) into that document library. If you have not, then you will simply get a blank, white web part. Also, note that this is not the only way to do this. In Professional SharePoint 2007 Development using Silverlight 2, there are a number of ways to deploy the web part that are discussed.

To deploy the web part, right-click the SharePoint project and select Deploy.

Testing the Web Part

Now that you’ve deployed the web part, you can now open your SharePoint server and add the new Silverlight web part to your SharePoint site. To do this, click Site Actions and Edit Page. Click Add a Web and then select your newly deployed web part from the Web gallery. Once you’ve added the web part, you can now interact with the Silverlight UI within SharePoint that further interacts with your SharePoint list (i.e. that SharePoint object model).

Figure 19: Silverlight Web Part in SharePoint

When you click Insert, a new record will be added to the SharePoint list and a message will be issued, as coded in our Silverlight UI, to the user.

Figure 20: Message Indicating Success

Of course the success message is only one indication. To verify that a new record was indeed added to the FY 09 Sales , navigate to the list and verify the new information on the list.

Figure 21: Successful Addition of Record

For more information on how to integrate Silverlight and SharePoint, check out Professional SharePoint 2007 Development using Silverlight 2 and http://mssharepointdeveloper.com.