Skip to main content

Go Search
SharePoint for End Users
  

 Other Blogs

  EndUserSharePoint.com by Mark Miller
  Microsoft SharePoint Team Blog
  Michael Gannotti on SharePoint+
  SharePoint Design by Heather Solomon
  Asif's Blog by Asif Rehmani
  Ian’s SharePoint Blog by Ian Morrish
  SharePoint Demystified
  Siolon - Chris Poteet
  SharePoint Guru - Rod Stagg
SharePoint for End Users > Posts > SharePoint and Silverlight-Accessing SharePoint list data for Silverlight without web services
SharePoint and Silverlight-Accessing SharePoint list data for Silverlight without web services

 

Overview

 

Recently I had a client request an animated carousel or filmstrip like player for displaying both images and embedded .wmv videos 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 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.

 

Example

 

Technical Analysis:

 

When evaluating a technical solution, it 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 or none at allJ.  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]

 

The details of using this syntax as part of your Silverlight application have been included in the code sample later in this post. 

 

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

 

Example

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.

Code Example:

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.

 

Summary:

 

The URL protocol is just one more option for accessing the data in your user's SharePoint lists and web client class in Silverlight provides a mechanism to use the list data inside your Silverlight applications hosted in SharePoint.

 

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

Comments

Excellent post

This will be very helpful for some ideas I've been wanting to try with Silverlight. I too have used OWSSVR.DLL for several years with JavaScript to make client side workarounds, especially with SPS 2003. Thank you very much.
at 5/6/2009 6:04 PM

Re: SharePoint and Silverlight-Accessing SharePoint list data for Silverlight without web services

Would you be able to use this type of thing for a slide library?
at 5/7/2009 11:54 AM

Re: SharePoint and Silverlight-Accessing SharePoint list data for Silverlight without web services

That's very cool Rod. I love hearing about these little tidbits that are buried within the SharePoint SDK. Using the SharePoint URL Protocol, can the pull other types of data besides lists?
at 5/7/2009 12:44 PM

Yes, the URL protocol can pull other types of data as well

Here is a list of available RPC methods that can be used in conjunction with the URL protocol
 
I am using the Display method in the example above-another interesting one if the GetUsageBlob that returns the information regarding the SharePoint usage data of the site. 
 
Also, if you are comfortable with CAML there are a variety of methods that allow you to also do posts.  http://msdn.microsoft.com/en-us/library/ms478653.aspx 
 
I would suggest Darren Johnstone's javascript API for the SharePoint web services though for posts since it is great at eliminating the need to do the CAML by hand.
 
Rod
at 5/9/2009 12:34 AM

What is result

Seems like and XDocument onbject. If yes then I am trying to get it by
XDocument doc = XDocument.Parse(e.Results.ToString());
 
and getting error. Please explain
at 6/11/2009 12:29 PM

Awesome Sample--Would love to use it...

Hello Rod: 
 
Can you share your code (.XAP and sample html) for those of us that don't have Visual Studio to compile your sample C# code?
 
I'm looking to just drop the XAP file and sample html within one of my aspx pages and then let 'er rip.  Is that doable? 
 
Thanks for sharing your work with everyone.  Good stuff!
at 6/19/2009 10:13 AM

.xap, html test page, list template now available for download

Sure, here is the folder on SkyDrive were you can download the .xap, HTML test page, and the list template you can upload to your list template gallery to generate the list that populates the filmstrip items.  SkyDrive folder

Instructions:
The HTML test page has initParams where you can specify the site url and listid of the filmstrip list created on your site.  Update the siteurl and listid accordingly, drop the XAP file in a document library-suggest creating a ClientBin folder, dropping the xap file in there, and the test page at the same level as ClientBin so the test page can easily locate the .xap file.  You can reference the HTML test page in an iframe from inside a content editor web-part and add to a SharePoint site page (needs to run inside a SharePoint site page to access the list data)
 
Let me know how it goes:) 
 
Rod
 
 
rstagg at 6/19/2009 12:37 PM

Thanks for the sample code...interesting results

Hi Rod:  Thanks again for the sample code.  Initially I ran into an issue with the .XAP file.  For some reason, when downloading from your SkyDrive, it saved the file with a zip extension.  So I thought I had to unzip it, but then didn't see a XAP file within it.  But then I figured out that it simply saved with the wrong extension.  Anyway, I loaded up the files and implemented the sample HTML code with a CEWP as instructed, and viola!  It worked!
 
But then I obviously wanted to display my pics, so I updated the list your provided with a few of my photos and a video.  What I experienced was that the images took varying amounts of time to actually show up in the web part.  I couldn't figure out if it was purely timing, or if it was pictures versus video, or what.  In some cases, I simply threw my hands up and came back to the computer later to find that they finally showed up.  It lead me to believe that maybe there was some kind of caching issue at play here.  Any ideas here?
 
I also had trouble getting the sizing of the control correct, as no matter what I did it either had scroll bars or had too much white space and wasn't centered.
 
Also, one minor thing--I was hoping to be able to use that nice rounded grey border that you had on your site, and a black background instead of white.  I tried changing the HTML but no luck.  If you have time, can you give me some pointers here too?
 
Thanks again for sharing--very cool stuff.
 
BTW, here's a link to my test page--not the permanent home:  http://planetparker.com/blog/Site_Pages/Surveys.aspx
at 6/25/2009 9:40 AM

RE: Thanks

The XML from the SharePoint list does get cached but I have a version on my website and runs fast.  For the border I can add that back in np-it's in the XAML-I can turn it back on and send you another xap file.  For sizing I went with <iframe src="mySilverlightTestPage.html" scrolling="no" frameborder="0" style="width:350px; height:400px"></iframe> in a content editor web-part.  That should do it...if not let me know:)
 
Thanks for the comment-you can contact me directly at rjs456@hotmail.com and rstagg@allyis.com and I will return with the new XAP file with the border...
 
-Rod
at 6/25/2009 11:30 AM

Fade Pictures??

Hi Rod, Great film strip. Thanks for sharing it with us. I have gone as far as to setup a workflow on the picture library to automatically add to the filmstrip when new photos are uploaded. There is one thing I think would make this even better is if the main photo faded through the images rather than just showing the same image until the user clicks on another one. How difficult would this be to setup? Thanks again. Brian
at 7/16/2009 5:22 AM

RE Fade Pictures

Hi Brian, thanks for the comment!  Yes, it would be straight-forward to add an animation in the existing code that would do what you describe and agree it would be a nice improvement. 
 
Off the top of my head it would be fairly straight-forward to modify the existing code to switch the source of the main image by looping through the LINQ to XML that queries the list data and setting the source of the image displayed in a timed interval.    When setting the source of the image run the fade-out on the existing image, set the new source image, and run the fade-in. 
For a fade-in effect add an animation to the image to dynamically set the opacity from .00 to 1.0 and set the desired time interval for the animation.  You can simply reverse this animation for a fade-out effect. 
 
There are examples of creating animations dynamically in code and applying to objects on the Microsoft Silverlight Developer site and on MSDN as well.  I have good luck with these methods:)
 
 
at 7/27/2009 9:58 PM

What is Result?  Answered?

Was this question answered? "Seems like and XDocument onbject. If yes then I am trying to get it by
XDocument doc = XDocument.Parse(e.Results.ToString());
 
and getting error. Please explain"
 
I'm getting an XML error when I use that code.  Any idea why?
at 8/12/2009 1:32 PM

RE: What is Result Answered

Hi,
 
Are you hosting the xap and HTML test page in SharePoint and running from there i.e.  the test.html page and .xap file stored in a SharePoint library and the test.html file loaded from an iframe in a content editor web-part. 
 
I ask since you will likely get a security exception running the Silverlight application from Visual Studio given owssrv.dll is not able to authenticate request unless the Silverlight app is running inside SharePoint.  For testing purposes I typically just copy the clientbin folder and test page over to the root of the SharePoint via SharePoint Designer and open the test page in the browser from there. 
 
-Rod
at 9/2/2009 2:21 PM

man

wow, this is cool and just what I'm looking for as a demo for what can be done with silverlight. Unfortunatly, I'm pretty green at silverlight and sharpoint so all this is... well over my head.
 
Any suggestions on tutorials or places to start to get some background so I can implement this cool silverlight app?
 
A step by step tutorial of how you created this would be awesome! I'll keep searching.
at 10/28/2009 6:30 AM

RE man

If you want to simply host this identical version on your webpage or from a SharePoint content editor web-part you can do so in an iframe.
<!--
<iframe src="http://silverlight.services.live.com/invoke/37066/FilmStripNoRSS/iframe.html" scrolling="no" frameborder="0" style="width:350px; height:400px"></iframe>  -->

If you want to customize your own version I can send you the source code for this app (It's a Visual Studio 2008 solution so you will need Visual Studio or maybe Expression Blend to open it) 
 
From there all you need is a place to host it.  If hosting in SharePoint you have a couple options-host the test page and xap file in SharePoint or use a SharePoint web-part as a wrapper. 
 
Checkout my free wrapper at http://rodstagg.spaces.live.com/blog/cns!11725DEB07615960!860.entry?sa=140707358 and instructions for configuring SharePoint for Silverlight. 
 
If you want to host on the internet you can make some configuration changes to the app to use an XML file for the source data and post up to Silverlight Streaming Service (the version you see in the post is hosted there) 
 
For general Silverlight info you have probably already seen:
The place to start is http://www.silverlight.net/ Everything you need to get set-up with the basic tools to get started building Silverlight applications is there.  Plenty of demo apps you can start from and build upon.  Cool thing is you can get free trial versions of Expression Blend and Visual Web Developer etc.  If you are into video I suggest Expression Encoder as well.  
have fun!
Rod
rstagg at 10/30/2009 2:40 PM

Silverlight 3

Have you built a new wrapper web part for Silverlight 3?
 
 
at 11/10/2009 1:34 PM

Re Silverlight 3

Not yet.  It should be fairly easy to modify the SL version 2 version of the wrapper itself to target SL 3.  The issue that concerns me more than the wrapper itself is configuring SharePoint to host Silverlight 3 based web-parts etc.  There are quite a few web.config changes etc.  Check out http://codeplex I am sure someone has done this already.  When I have something I will put together an updated post for SL3.
 
Thanks,
 
Rod.
at 11/13/2009 4:28 PM

Anonymous owssvr.dll

Hi, Im trying this solution but im having troubles when displaying this in a internet faceted site, it ask for authentication. It seems that owssvr.dll requires auth even on a Anonymous site collection. Did you had to configure anything to pass the credentials to teh webservice?
Thanks!
at 12/10/2009 1:32 AM

Not working

The above example i am copied and i am using in my project it is asking what is result?
at 12/21/2009 9:55 PM

RE Anonymous owssrv.dll

There is a known bug (or feature) of owssrv.dll that makes anonymous access an issue.  For internet facing sites I hosted the SL app on the SL Streaming Service (currently being phased out) and stored the data on my public facing Office Live SharePoint and consumed the data via the available RSS feed. You can use Yahoo Pipes to get around the cross domain access issues with SL 2/3.   Intranet SharePoints typically incorporate windows auth so no issues there. 
rstagg at 1/12/2010 12:20 AM

RE Not working

 
If so hosting in the iframe shouldn't be an issue.  Note, SL Streaming Service where this is currently is being phased out in the near future-I am looking into hosting on Azure and will post my findings shortly. 
 
rstagg at 1/12/2010 12:23 AM

Re: SharePoint and Silverlight-Accessing SharePoint list data for Silverlight without web services

Hi thanks for this.  Can you post the solution code so I can open it in visual studio and customize?
 
at 1/14/2010 7:36 AM

Re: SharePoint and Silverlight-Accessing SharePoint list data for Silverlight without web services

With URL Protocol and SharePoint Web services, you could not use it with Anonymous Role Access.
at 1/18/2010 1:41 AM

Add Comment

Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Title


Name (required) *


Body *

URL

Type the Web address: (Click here to test)  

Type the description: 

Contact

The control is not available because you do not have the correct permissions.
Attachments