Use SharePoint and Silverlight to display a summary of SharePoint blog posts on any site page

Overview:

We have been investigating ways on our intranet at Allyis to surface information via a more automatic and less manual process through various features and also to Implement multiple ways for discovering data/information across the site.  One area in particular we have been looking for improvement has been to increase the discoverability of our leadership blogs and encourage employees throughout our organization to blog as as way to increase collaboration and information sharing. 

As a way to address these efforts we recently developed and deployed a suite of web-parts (one of which we call the BlogRollUp web-part) which displays details on the most recent post made to any of our SharePoint blogs.  The web-part can be added to any site page, configured to point to a specific blog, and uploaded into the web-part gallery for others to use as well. 

 

Screenshot (Single Post Version): Screenshot (Multi-Post Version)
blogrollup

Features:

  • Displays blog title as a hyperlink to the original full post.
  • Displays the first 215 characters of the post body as an excerpt.
  • Displays an image for the blogger or blog.
  • Displays the post’s category as a hyperlink to view all similiar posts.
  • Displays the number of comments as a hyperlink to the comments page.
  • Displays an alert icon hyperlinked to the blog’s alert page.
  • Highlights background on mouseover.
  • Users can configure the web-part settings. 
blogrollupmulti

 

Technical Approach:

  • The user-interface was designed and developed entirely using Microsoft Expression Blend, Silverlight, and Visual Studio 2008. 
  • Custom SharePoint web-part to host the Silverlight application which allow users to configure which blog, blogger image, and alerts link from the web-part properties pane directly. 
  • The Silverlight application code uses the initParams provided from the webpart or HTML test page and the URL protocol to access the blog’s post list directly.
  • The web-part can be configured once and easily exported from and imported to the webpart gallery and added to any site page on any site collection.  
  • The Silverlight application was deployed into a SharePoint document library for ease of future updates. 

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.

Deployment Methods

Deployment using only a document library and a content editor web-part without the need to install server-side code and as such administrative access typically not required.

  1. Download the Visual Studio solution .zip and extract the files.
  2. Download

  3. Create a folder named ClientBin in a SharePoint document library to store the Silverlight application. 
  4. Locate the BlogRollUp_Web\ClientBin\BlogRollUp.xap file and copy into your new ClientBin folder
  5. Locate the BlogRollUpTestPage.html, update the initParams to use the settings for your particular blog including siteurl, imagepath, listid, and alerturl. 
  6. Copy the updated BlogRollUpTestPage.html file to the root of your new document library.
  7. On a site page add a content editor web-part and reference the BlogRollUpTestPage.html file inside an iframe. 
  8. Export the now pre-configured web-part to your desktop and upload back into the webpart gallery with an appropriate name identifying the BlogRollUp webpart so other users can add to their site pages without having to configure themselves. 

Deployment using the custom web-part where server-side code is installed via the .wsp solution file for the webpart and typically requiring administrative access

  1. Download the Visual Studio solution .zip and extract the files.
  2. Download

  3. Create a folder named ClientBin in a SharePoint document library to store the Silverlight application. 
  4. Locate the BlogRollUp_Web\ClientBin\BlogRollUp.xap file and copy into your new ClientBin folder.
  5. Download the .wsp solution file
  6. DownLoad

  7. Install the provided .wsp solution file via stsadm -addsolution
  8. Activate the solution from SharePoint Central Administration or stsadm -activatefeature
  9. Upload the provided webpart .dwp file into your web-part gallery via site setting, web parts. 
  10. Add the web-part to a site page, update the Silverlight web-part settings section with the appropriate .XAP fullpath, siteurl, imagepath, listid, and alerturl for your particular blog
  11. Export the now pre-configured web-part to your desktop and upload back into the webpart gallery with an appropriate name identifying the blogrollup webpart so other users can add to thier site pages without having to configure themselves. 

Summary:

This is just one way of displaying some pertinent details on recent posts from the blogs dispersed throughout the intranet while also making it easy for users to add to any site page.  Using Silverlight allows .NET developers to develop rich UI in Expression and Visual Studio and store the .xap files in SharePoint document libraries for future updates. 

 

-Rod

Using LINQ to parse XML data coming back from SharePoint web services

Quick example of using one of the many built-in SharePoint web services to populate a WPF control. 

In this particular instance I am connecting to the SharePoint lists web service Lists.asmx to retrieve data from the list and bind to a WPF listbox control. 
Should be easily ported over to a SharePoint web part or ASPNET web page etc.   No warranties:)

 

private ObservableCollection<Notification> notifications;
        public void getData()
        {

//hardcoding the list name as the ID for the web service call-feel free to do something more creative:)           

string listId = "Notifications";
            XNamespace s = "http://schemas.microsoft.com/sharepoint/soap/";
            XNamespace rs = "urn:schemas-microsoft-com:rowset";
            XNamespace z = "#RowsetSchema";

            string userDisplayName = System.Security.Principal.WindowsIdentity.GetCurrent().Name.Replace(‘\\’, ‘,’);
            string[] userFriendlyNameArr = userDisplayName.Split(‘,’);
            userDisplayName = userFriendlyNameArr[1].ToString();

            lists.Lists ws = new lists.Lists();
            ws.UseDefaultCredentials = true;

            ws.Url = "http://[server]/[site]/_vti_bin/Lists.asmx";
            XElement queryOptions = new XElement("QueryOptions",

               new XElement("IncludeMandatoryColumns", false)

            );

            XElement viewFields = new XElement("ViewFields",

            new XElement("FieldRef", new XAttribute("Name", "ActorName")),

            new XElement("FieldRef", new XAttribute("Name", "ItemTitle")),

            new XElement("FieldRef", new XAttribute("Name", "ItemURL")),

            new XElement("FieldRef", new XAttribute("Name", "ListTitle")),

            new XElement("FieldRef", new XAttribute("Name", "EventTime")),

            new XElement("FieldRef", new XAttribute("Name", "ListType")),

            new XElement("FieldRef", new XAttribute("Name", "ItemType")),

            new XElement("FieldRef", new XAttribute("Name", "ListUrl")),

            new XElement("FieldRef", new XAttribute("Name", "ActorID")),

            new XElement("FieldRef", new XAttribute("Name", "Action"))

            );

           XElement notifications = new XElement("Notifications",

                                   ws.GetListItems((string)listId, "" , null,

                                    viewFields.GetXmlNode(), "", queryOptions.GetXmlNode(), "")

                                     .GetXElement()

                                     .Descendants(z + "row")

                                     .Select(r =>

                                         new XElement("row",

                                             r.Attribute("ows_ActorName"),

                                             r.Attribute("ows_ActorID"),

                                             r.Attribute("ows_Action"),
                                             r.Attribute("ows_ItemTitle"),
                                             r.Attribute("ows_ItemType"),
                                             r.Attribute("ows_ItemURL"),

                                             r.Attribute("ows_ListTitle"),

                                             r.Attribute("ows_ListUrl"),

                                             r.Attribute("ows_EventTime"),

                                             r.Attribute("ows_ListType")

                                         )

                                    )

                            );

            ProcessResponse(notifications.ToStringAlignAttributes());

        }

        private void ProcessResponse(string response)
        {
           

//using my own custom list in SharePoint as the source-custom fields and all so make sure to use whatever fields are appropriate for your case

XDocument results = XDocument.Parse(response);

            var items = from item in results.Descendants("row")
                        where item.Attribute("ows_ItemTitle") != null
                        orderby (DateTime)item.Attribute("ows_EventTime") descending
                        select new Notification
                        {
                            ActorName = (string)item.Attribute("ows_ActorName"),
                            ActorId = (int)item.Attribute("ows_ActorID"),
                            Action = (string)item.Attribute("ows_Action"),
                            ItemTitle = (string)item.Attribute("ows_ItemTitle"),
                            ItemType = (string)item.Attribute("ows_ItemType"),
                            ItemUrl = (string)item.Attribute("ows_ItemURL"),
                            ListTitle = (string)item.Attribute("ows_ListTitle"),
                            ListUrl = (string)item.Attribute("ows_ListUrl"),
                            EventTime = (DateTime)item.Attribute("ows_EventTime"),
                            ListType = (string)item.Attribute("ows_ListType"),
                            ActivitiesText = (string)item.Attribute("ows_ActorName") + " " + (string)item.Attribute("ows_Action") + " " + (string)item.Attribute("ows_ItemTitle") + " " + "into" + " " + (string)item.Attribute("ows_ListType") + " " + "named " + (string)item.Attribute("ows_ListTitle"),

                        };

            ActivitiesListView.ItemsSource = items;
        }

 

//Extension methods credit to Eric White Technical Evangelist for Open XML for these.

public static class MyExtensions
    {

       

public static XElement GetXElement(this XmlNode node)
        {

            XDocument xDoc = new XDocument();

            using (XmlWriter xmlWriter = xDoc.CreateWriter())

                node.WriteTo(xmlWriter);

            return xDoc.Root;

        }

        public static XmlNode GetXmlNode(this XElement element)
        {

            using (XmlReader xmlReader = element.CreateReader())
            {

                XmlDocument xmlDoc = new XmlDocument();

                xmlDoc.Load(xmlReader);

                return xmlDoc;

            }

        }

        public static string ToStringAlignAttributes(this XElement element)
        {

            XmlWriterSettings settings = new XmlWriterSettings();

            settings.Indent = true;

            settings.OmitXmlDeclaration = true;

            settings.NewLineOnAttributes = true;

            StringBuilder stringBuilder = new StringBuilder();

            using (XmlWriter xmlWriter = XmlWriter.Create(stringBuilder, settings))

                element.WriteTo(xmlWriter);

            return stringBuilder.ToString();

        }

     

    }

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

Silverlight Filmstrip Demo

What does it do? 
Displays thumbnail and full size images and plays video. 

Where does it get the data for the images and videos to display/play inline?
The data to populate the intranet version is pulled from SharePoint using the URL protocol (no web services required provided you are hosting this inside SharePoint)  I will post the web service example soon.

For the demo on this site I uploaded as an application to the Silverlight Streaming Service.  The SharePoint list for managing what items are displayed in the filmstrip I created on my Office Live site but published a public list view and use the RSS feed to load the Filmstrip since this version is all in the cloud:) 

LINK TO DEMO

See previous post for more details

Click the waterfall thumbnail to test the video playback

 

-Rod

Using LINQ to XML to query SharePoint lists from WPF

A colleague of mine (a distinguished architect at Microsoft-you know who you are) convinced me to try LINQ for working with data from SQL recently after seeing my old fashioned SQL Command code in an implementation of SPEventReceiver I had developed.  Slightly embarrassed at the thought I had copied this code from a project I did going on three years ago and thinking LINQ to XML actually came in handy on a couple Silverlight projects where I was pulling data from web services I finally succumbed to peer pressure and dug more into this when recently having a need to connect to SharePoint web services from a WPF client.

It was relatively painless to use LINQ for parsing the data returned from the lists.asmx web service (especially compared to the XMLDOM) and the thought occurred to me that XDocument would also work with the trusty owssrv.dll ISAPI extension in WSS.  The task: A Silverlight project I am working on for a client where on boarding an ASPNET web application is a long and tedius process to get through IT but deploying a Silverlight 2 application is just to drop the test page and .XAP file.  Wanting to avoid resorting to Silverlight V1 (not that I don’t like javascript but prefer C# when building out the SL UI dynamically and attaching animations) I broke out my trusted Swiss army knife for SharePoint  owssrv.dll and the URL protocol usually reserved for accessing list data via javascript: check out the URL Protocol on MSDN

Whaa-laa, a few lines of code and I was actually able to modify the existing code that was previously using getlistitemsfrom the SharePoint built-in lists.asmx web service to use owssrv.dll instead from WPF and preserve all the databinding in my WPF controls-very cool.

How it works:
Use LINQ to XML to load the list data as XML into a LINQ XDocument and build a simple XML tree (you can use this to bind to a WPF or Silverlight control using a data item template or populate a XAML container from code.  The cool thing is using this method you won’t need to add a web reference to your project and for Silverlight applications this can simplify deployment since you won’t have to create a corresponding ASPNET web application to host your Silverlight application as you would if using the web service.

Code Sample:

//specific references to add for this sample

using System.Linq
using System.Xml;
using System.Xml.Linq;

XNamespace z = “#RowsetSchema”;

string sUrl = http://[server]/[site]/_vti_bin/owssvr.dll?Cmd=Display&List={[listguid]}&XMLDATA=TRUE;

//View ID “{[viewid]}” //opitonal parameter to owssrv.dll

//this part resolved a security exception I was getting while accessing from the
//localhost

XmlUrlResolver xmlResolver = new XmlUrlResolver();

xmlResolver.Credentials = System.Net.CredentialCache.DefaultCredentials; XmlReaderSettings xmlReaderSettings = new XmlReaderSettings(); xmlReaderSettings.XmlResolver = xmlResolver;

XDocument xdoc = XDocument.Load(XmlReader.Create(sUrl, xmlReaderSettings));

XElement notifications = new XElement(“Notifications”,

xdoc.Root

.Descendants(z + “row”)

.Select(r => new XElement(“row”,

r.Attribute(“ows_ActorName”), //Use whatever fields are returned from owssrv
r.Attribute(“ows_ActorID”),      //for your particular list.
r.Attribute(“ows_Action”),       //Tip: just copy the value of sUrl into the browser
r.Attribute(“ows_ItemTitle”),   //to view the returned fields and XML from your
r.Attribute(“ows_ItemType”),  //particular list
r.Attribute(“ows_ItemURL”),
r.Attribute(“ows_ListTitle”),
r.Attribute(“ows_ListUrl”),
r.Attribute(“ows_EventTime”),
r.Attribute(“ows_ListType”)

)

)

);

//Use whatever fields are returned from owssrv
//for your particular list.
//Tip: just copy the value of sUrl into the browser
//to view the returned fields and XML from your
//particular list

What’s Next? Trying this out with an RSS feed tonight maybe.

Summary: LINQ to XML definitely simplifies parsing and working with the data returned from the SharePoint web services and also appears to work just as easy with the WSS Url Protocol and am sure with RSS feeds as well.  I haven’t bench-tested performance and scalability for owssrv.dll in this particular application so please keep that in mind-plus one known bug (or feature::) of owssrv.dll is that it doesn’t appear to be accessible if your SharePoint is running under anonymous access.

Coming Soon:Using the SharePoint Lists.asmx web service and handy LINQ to XML from Silverlight 2 for populating your Silverlight controls with data from SharePoint.

-Rod

Silverlight 2 Search UI with Web Services

 
If you are bored and have Silverlight 2 Beta 2 installed check out an example of using Silverlight as a front-end to your
web services.  More details later this week.  Silverlight looking promising…
 
Press Link: Silverlight based search explorer using web services

Concept was conceived by Springbrain.com

Silverlight Search UI using web services

The UI is build exclusively with C# in Visual Studio 2008 which is also nicely
integrated with Microsoft Expression Blend (thank you Microsoft)  virtually all the
UI is developed in C# procedural code with only the container elements hard-coded
into the XAML.  Interesting way to do filtering of results sets is filtering the
container elements rather than making repeated call to web service when filtering-
providing virtually instananeous filtering of results.  cool.