Wrap-Up on using Silverlight, SharePoint Lists, and URL Protocol.

Overview

Recently I had a client request an animated carousel or filmstrip like player for displaying both images and video on their SharePoint intranet. The idea is to display many images and videos without taking up a ton of screen space in the process. Also, they wanted to be able to manage what images and videos that get displayed via a standard SharePoint list i.e. they could add links and descriptions in the SharePoint list and those would display appropriately in the filmstrip.

When evaluating a technical solution seemed like Silverlight would be the way to go for the filmstrip-Silverlight has built-in animation support, a media player for playing video, a rich set of controls, and good tool support with Expression Blend and Visual Studio 2008. For accessing the links etc. stored in the SharePoint list the SharePoint web service lists.asmx seemed a logical choice.

The catch:

The client’s IT department didn’t support custom ASPNET web applications or web services to be deployed without a huge review process and maybe neverJ The client’s SharePoint was pretty locked down to any custom development.

The resolution:
There is a nifty yet fairly unknown protocol built-in to SharePoint described on MSDN and the SharePoint SDK as the URL Protocol that allows you to query a list directly for all its list items. Plus, you can do this using a simple URL in the browser and also from javascript on the client. I have used this fairly often since back in 2003 when I had to come up with a way to populate a Flash map with SharePoint data so I was familiar with this protocol but not sure it would work in Silverlight.

I broke out my Swiss-Army knife for SharePoint (URL Protocol aka owssrv.dll) and good news-it actually worked! Silverlight can access data from a SharePoint list without the need to have a web service call. Essentially using the same built-in web client classes inside Silverlight designed to access external web pages or files.

So what is the SharePoint URL Protocol?


Excerpt from MSDN:

Embedding a request in a URL is a basic mechanism for issuing a method and its parameters to a server running Windows SharePoint Services.

The syntax for using this mechanism is as follows:

[http://Server_Name/[sites/][Site_Name/]_vti_bin/owssvr.dll?Cmd=Display&List=GUID&XMLDATA=TRUE]

Details for the code below but actually a simple implementation in your Silverlight project using the built-in web client classes commonly used to access external files from Silverlight-in our case we are essentially accessing the SharePoint list as an XML file of sorts.

The technical approach for the solution using Silverlight, a SharePoint list, and the URL protocol:

Using Microsoft Expression Blend for the initial layout and Visual Studio 2008 for the C# code I created an animated filmstrip (a variation of the all too familiar carousel in SilverlightJ) to display thumbnail images of the images and videos along with a main player area to display the larger view of the image/video when the user selected a thumbnail from the animated filmstrip.

Advantages of using Silverlight:

Rich support for animation, rich set of controls, good development tools i.e. Microsoft Expression Blend and Visual Studio 2008, and all the advantages of coding in C# with a simple deployment process. You can even copy the Silverlight XAP files (essentially a compressed zip file with all your code) into a SharePoint document library and run from there along with a simple HTML page.

Advantage of using a SharePoint list as the source data for the filmstrip player

The administrator of the SharePoint list can designate what gets displayed in the filmstrip player automatically via the SharePoint list:

· Designate the initial image/video that loads when the page loads.

· Turn individual items visibility on/off

· Select the appropriate thumbnail image and larger image

· Select the appropriate URL for a video to be played in the video player

Advantages of using the URL protocol to populate the Silverlight filmstrip items

It’s a lightweight HTTP protocol, can be accessed via a simple URL, and does not require web services to access the data in a SharePoint list.

Example of the solution:

Filmstrip player functionality:

· Animated filmstrip displaying thumbnail images based on links provided in the SharePoint list.

· Video player to play embedded .wmv video also based on links provided in the SharePoint list.

· Image viewer to display larger image based on user selection in the filmstrip.

· Main player section hot-linked to external URLs based on links provided in the SharePoint list.

· User controls for the filmstrip animation

· Pause/Play controls that turn on when video is loaded.

Image of application

clip_image001

Live Demo here…

Silverlight Filmstrip Player for SharePoint Demo

Other Potential uses?

  • Could be used on a Real Estate site to dynamically display images/video of the advertised home.
  • A video player for a blog using the blog to collect comments.
  • Basic slide show for a SharePoint document library or to display images from Flickr for instance in your SharePoint.

What’s interesting about this implementation?

Using the URL protocol provides a simple mechanism for accessing SharePoint list data from within Silverlight without the need to add a web service reference.

Using LINQ to XML to parse the returned data from the SharePoint in XML greatly simplifies working with the SharePoint list data in Silverlight once it’s retrieved.    

Using LINQ to XML also simplifies restructuring the data to a standard RSS feed format to use the data from the SharePoint list’s built-in RSS feature as another option.

What’s next on the feature front?

  • Adding the ability for users to leave comments and ratings.
  • Adding the ability for users to upload their own videos.

Example C# code for accessing the SharePoint list in Silverlight:

Silverlight 2 application attached to a ASPNET web project (I don’t host the ASPNET app in SharePoint but easy way to generate the test.html and .XAP file)

public partial class Page : UserControl
    {
        private XNamespace z = "#RowsetSchema";      
        public Page()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Page_Loaded);
        }
        public void Page_Loaded(object sender, RoutedEventArgs e)
        {
            string sUrl = "http://[server]/[site]/_vti_bin/owssvr.dll?Cmd=Display&List={[listguid]}&XMLDATA=TRUE";
            WebClient sp = new WebClient();
            sp.OpenReadCompleted += new OpenReadCompletedEventHandler(sp_OpenReadCompleted);
            sp.OpenReadAsync(new Uri(sUrl));
        }
void sp_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {
            if (e.Error == null)
            {
var items = from item in results.Descendants(z + "row")
                        where item.Attribute("ows_LinkTitle") != null
                        orderby (DateTime)item.Attribute("ows_Created") descending
                        select new FilmFrame
                        {
                            ItemTitle = (string)item.Attribute("ows_Title"),
                            ItemLinkTitle = (string)item.Attribute("ows_LinkTitle"),
                            ItemType = (string)item.Attribute("ows_ItemType"),
                            ItemSourceUrl = (string)item.Attribute("ows_SourceUrl"),
                            ItemThumbnailUrl = (string)item.Attribute("ows_Thumbnail"),
                            ItemDescription = (string)item.Attribute("ows_Description"),
                            ItemDisplayFilmStrip = (string)item.Attribute("ows_DisplayInFilmstrip"),
                            ItemCreated = (DateTime)item.Attribute("ows_Created"),
                        };
//You can bind to an itemtemplate for a listview directly for simplicity-the specfic example UI above builds the XAML dynamically to provide more

flexibility
//ListView.ItemsSource = items;
            }
        }

Separate namespace for filmstripitem:
namespace FilmStrip
{
    public class FilmStripItem
    {
        public string ItemTitle { get; set; }
        public string ItemLinkTitle{ get; set; }
        public string ItemSourceUrl { get; set; }
        public string ItemType { get; set; }
        public string ItemDescription { get; set; }
        public string ItemDisplayFilmStrip { get; set; }
        public DateTime ItemCreated { get; set; }
    }
}

Things you might want to consider when making use of this example:

The test.html and .xap file is being hosted inside SharePoint.  In this case I just dropped on the SP Site at the root site level via SharePoint Designer.

For a quick way to databind the XML returned from the SharePoint list to XAML I initially used listbox and a data item template.

Rod Stagg http://www.rstagg.com
SharePoint Solutions Architect
Allyis Inc. Kirkland Wa http://www.Allyis.com

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s