Steve Fox's OBA Ramblings : Silverlight Blueprint for 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 RTM and SharePoint Blueprints Ship on Codeplex

Steve Fox — Fri, 09 Jan 2009 05:38:00 GMT

Today, additional SharePoint and Silverlight Blueprints on CodePlex were uploaded to include two more Silverlight RTM samples: custom navigation in SharePoint and the colleague viewer. These blueprints provide samples for you to build and explore using Silverlight as an alternate way to develop and integrate powerful user experiences within SharePoint and add rich Internet application functionality to your SharePoint sites. Included in the overall set of samples are a Hello World sample, a Slider sample, and the recently added Custom Navigation and Colleague Viewer samples added today. You can download the samples along with documentation and screencasts at http://www.codeplex.com/SL4SP.

Over the next few weeks, I'll publish a couple of other blog posts on Silverlight and SharePoint. I think there is tremendous opportunity here for building rich Internet applications that can also be thought of as OBAs. For example, think about skinning an integration with SAP with Silverlight and then dropping it into a SharePoint site. This not brings the LOB system world into SharePoint, but does it in a way that improves the look and feel of the UI as well as providing additional controls that you can build around the UI to, for example, filter on SAP, Dynamics or other LOB system data.

For more resources on how to integrate Silverlight and SharePoint, be sure to visit http://mssharepointdeveloper.com. Keep an eye out on this site over the next few weeks, as we're going publish a new round of content for WCM and MOSS. Some cool SharePoint and Silverlight stuff will be shipping.

Happy coding!

Steve

Use Silverlight to Enhance your SharePoint-Based OBAs with the Silverlight Blueprints for SharePoint

Steve Fox — Tue, 19 Aug 2008 18:00:00 GMT

Silverlight Blueprints for SharePoint Released to CodePlex!

Today we released the source code for the Silverlight Blueprints for SharePoint—based on the Silverlight Beta 2 release. The Silverlight Blueprints for SharePoint provide a way for developers to better understand how to integrate Silverlight applications with SharePoint. Silverlight is an incredibly popular technology and with the increase in SharePoint adoption we’re finding an increased call for integrating technologies like Silverlight with SharePoint.

In this release, you’ll find five blueprint samples:

1. Hello World

2. Media Player

3. Slider Control

4. Custom Navigation

5. Colleague Viewer

Included in the release are documentation for each of the samples and the source code (go to the Releases tab of the CodePlex site). Also posted to the site is an FAQ document. In the coming days and week, we’ll publish additional screen-casts and any other supporting documentation we create or that is provided to us through the developer community.

The links to get to the Silverlight Blueprints for SharePoint are:

1. http://www.ssblueprints.net/sharepoint/ --or direct at the CodePlex site

2. http://www.codeplex.com/SL4SP

Enjoy!

Steve