Using Media Streaming Services to Integrate Silverlight with SharePoint

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:

  1. Create the SL app;
  2. Add the SL app to your Media Streaming Services site;
  3. Configure the app and grab the <iframe> code; and
  4. 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: https://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.)

image

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:

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="BarChart.Page"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:chart="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
Width="800" Height="450">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Vertical" Margin="15">
<chart:Chart Height="200"
LegendTitle="Item"
Title="Course Inventory"
x:Name="MyBarChart">
<chart:Chart.Series>
<chart:ColumnSeries x:Name="MySalesChartData"
Title="Courses"
ItemsSource="{Binding}"
IndependentValueBinding="{Binding TrnCourse}"
DependentValueBinding="{Binding NumCourseSales}"/>
</chart:Chart.Series>
</chart:Chart>
</StackPanel>
</Grid>
</UserControl>

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:

image

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 https://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.

image

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.

image

 

 

 

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.

image

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).

image

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:

image

 

 

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