hit counter script
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 > Categories
Using SharePoint Themes to Customize your SharePoint Site

by Rod Stagg, SharePoint Solutions Architect/Developer
http://www.rstagg.com 

 

Overview

 

We recently started an effort to provide a centralized and secure collaboration space for information sharing and collaboration across the enterprise using SharePoint 2007 and WSS. 

 

The first phase of the project consists of a complete site redesign to provide the organization a consistent navigation and “Look and Feel” along with a consolidation of all existing SharePoint sites into a unified and secure SharePoint platform.

 

As part of the site redesign effort we investigated which approach would be most efficient for implementing the “Look and Feel” while also avoiding disrupting our existing WSS sites and users. 

 

Technical Approach

The two primary choices for customizing the look and feel of both MOSS 2007 and WSS sites we evaluated were using custom alternate CSS stylesheets or using SharePoint themes. These choices would not require making significant changes to the sites' existing masterpages and templates. For our approach we decided to start with one of the existing SharePoint themes and customize it to match our branding.

 

What is a SharePoint theme?

SharePoint themes represent a collection of graphics and cascading style sheets that can modify how a Web site looks.  Themes can be customized using SharePoint Designer or using the Visual Studio 2008 extensions for SharePoint.

 

Our customized theme for SharePoint 2007 and WSS sites look like this:

 

Home Page
News Template

 

Site Settings
Search

 

 

 

Advantages of using SharePoint themes:

 

  • The SharePoint site settings interface provides the ability for both site administrators and site owners to customize the look and feel of their site by selecting from a pre-defined list of available site themes. 
  • The site settings interface provides the ability to display a preview/screenshot of the selected theme before they choose to apply it to their site.    
  • Themes can be easily removed via the SharePoint site settings interface.
  • Themes packaged and deployed as a site feature simplify deployment across a SharePoint farm for IT administrators. 
  • Developers can take advantage of the set of ten Visual Studio 2008 extensions for SharePoint projects containing design themes for SharePoint provided by Microsoft as a starting point for developing a custom theme. 

Applying a site theme:

  • From Site Actions select Site Settings and then Modify All Site Settings. Under the Look and Feel section choose Themes. 
  • You will find the selection of available themes to apply to your site. 

Development of a custom site theme:

 

  • Developers can install the set of ten Visual Studio 2008 extensions for SharePoint projects containing design themes for SharePoint provided by Microsoft as a starting point for developing a custom theme. 
  • You can download theme templates from: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=0a87658f-20b8-4dcc-ad7a-09ad22641f3a
  • Navigate to the installed theme folder (the default location is C:\Program Files\Microsoft\TenThemesForSharePoint)
  • Open one of the Visual Studio theme solutions in Visual Studio 2008
  • Modify the CSS classes directly in theme.css classes as needed.
  • Drop in the necessary graphics/images into the projects local image directory.
  • Build the project. 

Source code for the customized version displayed above available by clicking the icon below.

 

 

 

Deployment

 

  • Copy the Visual Studio project’s bin folder to your production server. 
  • Locate the setup.bat file in the debug folder. 
  • Open the setup.bat file in Notepad and modify the DefaultWebUrl and DefaultSiteUrl to point to the web application where you would like to install the theme. 
  • Save setup.bat and run as administrator. 
  • Navigate to a site and from the Site settings page select Site features, locate your theme and activate the feature. 
  • Open your portal site as Administrator and go to Site Actions>Site Settings>Modify All Site Settings. Under the Look and Feel Section, click on Site Theme and choose the newly installed theme.
Latest report from Tinseltown (via Redmond, WA): Access 'n SharePoint heating up?
First heard Access 'n SharePoint were getting a little bit cozier back in 2003, but things didn't really start heating up until 2007. Lots of blanket coverage here (If you catch my drift). Can we say "bi-directional linking"? (wink, wink, nod, nod).
 
But this just in from the juicy-tidbits-grapevine, A sneak preview of coming attractions for 2010, wherein you'll find  positively, steamy chatter about "SharePoint performance and offline," "Browser apps," and other hot items. Tsssss!
 
Speaking of celebrity blogs (Take that Arianna!), you should follow Clint Covington's blog. Heard from those in the know that he scoops the Access 'n SharePoint watch even before the Paparazzi do.
 
News flash! These tasty morsels are just in from the rumor mill: Synchronize with SharePoint under the hood, Code to refresh SharePoint Link Tables, and Access Runtime support for SharePoint Offline. Did I say "synchronize" and "refresh" in the same sentence? Oh my!
 
Be in Vegas in late October to catch more scoops that won't be staying in Vegas for long. Will chapel bells be ringing?
 
That's it for now from your roving romance reporter, Mark Gillis.
 
Ta Ta!
Use SharePoint Designer and Silverlight to create a video blog
by Rod Stagg, SharePoint Solutions Architect/Developer
http://www.rstagg.com | Allyis Inc., Kirkland, Wa
 
We have been looking at ways to increase the discoverability of internally produced video content and rich user experiences developed on Silverlight currently stored in various document libraries throughout our SharePoint intranet/extranet. 
 
One area of particular interest is finding a way to easily incorporate rich user experiences and streaming video directly into individual blog posts taking advantage of the the built-in commenting form provided in the SharePoint blog template. 
 
One challenge has been finding a "start small" approach that provides the performance benefits of streaming the video content vs. downloading from document libraries while being able to get started without the need to provision large media servers and associated infrastructure in the short-term.  
 
Another challenge has been finding an approach to surface our rich user experiences developed on Silverlight onto our internet-facing website as well as our intranet. 
 
To address these efforts we recently provisioned a Silverlight Streaming account and customized a standard SharePoint blog template using SharePoint Designer to display both our streaming video content and Silverlight 2 applications we currently have stored on the Silverlight Streaming Service. 
 
Blog Home Page:
Features: Modified layout, video and/or Silverlight application plays inline, blog title linked to full post page, caption linked to full screen play. 
 
 
Blog Full Post Page
Features: Video or Silverlight application plays inline, full screen link.
 
 
Benefits:
  • Continued ability to publish regular blog posts. 
  • Ability to embed videos stored on Silverlight Streaming Service directly into blog posts.
  • Ability to embed your own custom Silverlight applications directly into blog posts.
  • Ability to categorize video posts.
  • Ability to comment on video posts.
  • Makes use of XSLT and CSS for customizations-no custom javascript to deploy or maintain.
  • Ability to add functionality to existing blogs.
  • Ability to further customize via centralized custom XSLT files and custom CSS. 

Technical requirements:

You have access to edit the blog in SharePoint Designer, a free Silverlight Streaming account set-up with your Windows Live Id, and upload at least one video or Silverlight application to the service for use in your blog post. 

What is the Silverlight Streaming Service?

Microsoft® Silverlight™ Streaming by Windows Live™ is a companion service for Silverlight that makes it easier for developers and designers to deliver and scale rich media as part of their Silverlight applications. The service offers web designers and developers a free (*) and convenient solution for hosting and streaming cross-platform, cross-browser media experiences and rich interactive applications that run on Windows™ and Mac. Combined with the ability to create content with Microsoft® Expression and other 3rd party tools, web designers and content publishers wishing to integrate Silverlight applications into their online properties can enjoy complete control of the end user experience. 
 
 
Example video uploaded using the Upload Video feature:
 
 
 
 
Can I use my existing .wmv video files? 
 
Yes, there are some exceptions and size restrictions but providing you have a valid Windows Live ID account you can upload your .wmv video files directly to the Silverlight Streaming Service using the Manage Videos, Upload Videos feature.  For added features check out Expression Encoder 2 for encoding your videos to specific needs.
 
Can I use my existing Silverlight 2 .xap files?
 
Yes, there are some exceptions and size restrictions but providing you have a valid Windows Live ID account you can upload your Silverlight .xap files directly to the Silverlight Streaming Service using the Manage Applications, Upload Applications feature.  For added features check out Expression Blend 2 for designing Silverlight applications without code. 
 
What SharePoint Designer customizations  do I need to make to add this functionality to my existing SharePoint blogs?
 
We added three new site columns on our blog's post list to allow users to add their own Silverlight Streaming videos and applications and a caption when creating a new post.
 
New columns added to Post list:
  1. SilverlightStreamingServiceApplicationUrl (Text Field: Multiple Lines of Text, Plain Text)
  2. PostImageCaption (Text Field: Muliple Lines of Text, Rich Text)
  3. PostImageUrl (Text Field: Single Line of Text, Plain Text)

Modifications to blog pages:

We modified the default.aspx and post.aspx pages to use a customized version of each XSLT that both reformats the layout and incorporates an iframe to display the user-provided SilverlightStreamingApplicationUrl since the default SharePoint editing controls strip out any iframe, embed, or script references. To accomplish this we first saved back-up versions of our default.aspx and post.aspx pages and then opened each in SharePoint Designer in design mode and converted the appropriate dataview Web Parts to XSLT (right click, convert to XSLT option).

Source XSLT and CSS files:

 

 

 

Modifications to Default.aspx
  1. Upload the provided default.xsl to the blog's root folder.
  2. Convert the post dataview web-part to XSLT (right-click-convert to XSLT).
  3. Apply the custom XSLT file provided: from the dataview web-part's Common Data View Properties pane choose DataView Properties, then select the XSLT Source tab and browse to the default.xsl file.
Modifications to Post.aspx
  1. Upload the provided post.xsl to the blog's root folder.
  2. Convert the post dataview web-part to XSLT (ignore @Author error message).
  3. Apply the custom XSLT: from the dataview web-part's Common Data View Properties pane choose DataView Properties, then select the XSLT Source tab and browse to the post.xsl file.
  4. Create a filter and parameter to filter the post DVWP by id : from the dataview web-part's Common Data View Properties pane choose Filter, if not displayed create a new URL parameter for ID and set the value to [id].
CSS Modifications:

We also created a custom version of the blog templates core.css and referenced the following from the default.aspx and post.aspx pages as a link:
 
Added custom style sheet reference in default.aspx:
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<SharePoint:RssLink runat="server"/>
<link rel="stylesheet" type="text/css" href="customblog.css">
</asp:Content>
 
Added custom style sheet reference in post.aspx:
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<SharePoint:RssLink runat="server"/>
<link rel="stylesheet" type="text/css" href="../../customblog.css">
</asp:Content>
 
Once my blog is configured, how do I create new blog posts that include this new functionaility? 
 
Simply create your blog post as usual including your post title and post body. 
 
Fill in the SilverlightStreamingApplicationUrl and PostImageCaption fields and save your post as usual (see Obtaining the SilverlightStreamingApplicationUrl below for details on the URL to use).
 
Obtaining the SilverlightStreamingApplicationUrl:
From Silverlight Administration Home upload your .wmv video or Silverlight 2 application to the Silverlight Streaming Service.
 
 
From Silverlight Administration Home select the link to the video or application.
 
From Method 1: Embed the video into a web page and obtain the embed link for the video or application.
 
Important: Copy only the URL inside the iframe (example in red) . 
<iframe src="http://silverlight.services.live.com/invoke/37066/Butterfly%20Sample%20Video/iframe.html" scrolling="no" frameborder="0" style="width:500px; height:375px"></iframe>
 
What's next?
  • Investigate how to add YouTube and MSN videos into the posts.
  • Simplify deployment for new blogs via site template (.stp file).
  • Create custom site definition with custom columns included.
  • Create SharePoint application page to allow users to upload videos/display in blog post in one step. 
  • Investigate using Silverlight Streaming Services API and existing solutions to provide reporting on #downloads, video streaming data, etc.


Updating Metadata on Files in SharePoint: Low Cost, High Reward

by Mike Doane

Ascentium | www.ascentium.com

 

Once documents are in SharePoint libraries, there’s always going to be a need to update metadata, whether it’s because the original author didn’t apply metadata correctly, or there’s a need to add new metadata. Finding documents is a high priority for all clients we work with, but many don’t have the resources or big budgets to do the work manually with their dwindling resources.

 

We see this scenario all the time with clients: one person (who may no longer work for the company) created a template for a Word doc, and someone borrowed it and started working on a new doc, etc. The original author’s name is still in the Properties field, so it appears that s/he has written half the company’s documents. I’m exaggerating, yes, but the story rings true with many customers who laugh at that scenario.

 

So, once docs are in place, yes, you can go to Spreadsheet view and make changes, but a much easier and more comprehensive way to do this is to use DocKIT’s “Apply metadata to documents from metadata file” feature, which basically works like the migration tool, except that it simply updates the metadata already attached to the documents in SharePoint.

 

Here’s how it works:

 

Step 1 – Review documents to be changed in your SharePoint site. Below I’ve identified five documents that need a metadata “refresh”.

 

 

Step 2 -  Create a spreadsheet with the URL of the documents you want to change (see above) and the new metadata in columns that match the Site Column names/values in the SharePoint site. Below you can see that I’m going to make changes in Profession, Professional Organization and Author.

 

 

Step 3 – Start DocKIT and use the Apply metadata to documents from metadata file (the Excel file above) option.

 

 

Step 4 – Make sure to identify what columns you want to change.

 

 

Step 5 – Run the Wizard to update the metadata. When DocKIT is done, the metadata are updated and ready to be indexed for search. Old author names are gone, new metadata are in place.

 

 

Step 6 – Create Views to take advantage of the new metadata. For example, you cold sort a View by Professional Organization.

 

 

Hope this makes sense! Post a comment if you need more explanation. The idea works great if you’ve got a lot of old metadata (or NO metadata) on documents that you want to update, and if you don’t have a lot of time/resources to do it manually by hand.

 

There are a lot of other uses for the tool, but those are some we’ve done with clients so far. Thanks for reading.

How to Create Article Comments

 

When publishing pages are utilized one of the common layouts used is the Articles layout.  While this comes out of the box, the ability to comment on a particular article and be brought back to that page after submitting a comment is not an out of the box feature.  This is often a common request from clients.  The following article is the complete solution to this request.  We are going to utilize SharePoint Designer, XSL, JQuery, and the Data View web part.

In order to accomplish this task it is best to see a sample article with comments.  The following image is our end product.

 

 

 

 

  1. The first step is creating a location to hold all of the comments.  We will use a custom list called ArticleComment.  For the purpose of this solution, I am using one list hold all the comments for every article.  While number of items in a list may become an issue, the Data View will be filtering by article page. 

Place the following fields in the ArticleComment custom list:

    1. Rename Title to PageURL
    2. Add ArticleComment

 

The Page URL will contain the article page name (i.e. article.aspx) as it is displayed in the last part of the http address.

 

  1. We have a list for all our comments; now we need to insert a Data View web part onto the article.aspx page.  This will show all of the comments for a particular article.  We will bind this web part to the ArtcleComment list we created in step 1. 
    1. Open SharePoint Designer
    2. Open your default installation (File / Open Site)
    3. Click _catalogs / masterpage
    4. Check out the Articles.aspx page and open
    5. Click Insert Data View positioning it properly on the page (ensure that it is under the body of the article text) as shown in the image below.

 

 

 


  1. After inserting the Data View, the screen will look like the image below.   By clicking it, we can now bind it to the ArticleComment list.  

 

 

 

  1. The fields from the list are now visible and can be inserted into the Data View web part.   Insert:
    1. PageURL
    2. ArticleComment
    3. Created By

 

NOTE:  Styling with this web part is done in code via XSL – we will not be covering styling in this blog.

 

  1. With the fields now showing data, we need to create a filter to show only the comments that are associated with the article that is being viewed.  This is done utilizing a parameter which is part of the Data View web part.
    1.  Click the arrow to the right of the Data View web part that was just inserted.
    2. A new menu will appear called Common Data View Tasks as shown in the image below. 
    3. Click Parameters.

 


 

  1. We can now add a new Parameter.   The image below is the screen you should be viewing.
    1. Click New Parameter
    2. Under the Parameter Source dropdown, choose Server Variable.
    3. Use Path_Info as the Server Variable Name
    4. Click OK

This is key to having this solution work.  The Path_Info variable will bring the complete URL for the page.  (i.e. http://contoso.com/pages/article.aspx).

 

 

 

  1. Now the URL needs to be parsed to just get the article aspx name.  To do this click Filter from the Common Data View Tasks menu show in Step 5 and the resulting screen is show in the image below.

 

  1. Click Add XSLT Filtering and the edit button.
    1. Enter [@Title=substring-after($ReferPageURL, ‘Pages/’)] as shown in the image below.
    2. Click OK

 

This code takes the server variable that has been defined, ReferPageURL.  Substring-after will then parse everything after ‘Pages/’ and assign that new value to @Title.  For example:

 

ReferPageURL = http://wwww.contoso.com/pages/windows7.aspx

@Title = windows7.aspx

 

 

 

 

The Data View is now configured and finished.  We need to write some code in the articles.aspx into order to make the rest of the solution.  This is done in SharePoint Designer code view.

 


  1. We are still in the articles.aspx page but now we need to click Code at the bottom of the page as show in the image below:

 

 

  1.  Navigate to the data view web part.  It can be found by searching for:
    1. WebPartPages:DataFormWebPart

 

NOTE:  You will notice several lines of XSL have been added.  This is all the code behind the task menu as a result of the actions we took in steps 1-8.  We are now going to modify that XSL.

 

 

  1. The first thing we need is the article page name.  This variable (PageName) will be used later in our XSL.
    1. Do a search on dvt_StyleName”>Table
    2. Insert the declaration for the variable for PageName as shown in the code below (in bold)

 

<xsl:variable name="dvt_StyleName">Table</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[@Title=substring-after($ReferPageURL,'Pages/')]"/>

<xsl:variable name="dvt_RowCount" select="count($Rows)" />

<xsl:variable name="RowLimit" select="10" />

<xsl:variable name="FirstRow" select="$dvt_firstrow" />

<xsl:variable name="PageName" select="substring-after($ReferPageURL,'Pages/')" />

<xsl:variable name="LastRow">

 

  1. The user has the ability to comment on the article through a link called 'Add Comment'.  Add Comment takes the user to an input page.

 

 

The link  will use PageName as a variable to be passed in the querystring.  Insert the following code before the section labled dvt 1.body.

 

<xsl:template name="dvt_1.head">

<xsl:param name="PageName"/>

<h6 class="fl">Comments</h6>

<a>

                <xsl:attribute name="href">/Lists/ArticleComment/NewForm.aspx?page=<xsl:value-of select="$PageName" /></xsl:attribute>

            Add Comment

</a>

</xsl:template>

 

  1.  Save the articles.aspx page and close.

From Step 12, one can see that the NewForm.aspx page under the ArticleComment list is being called directly via a querystring.  We need to modify NewForm.aspx to accept the string.  We will utilize jQuery and XSL to accomplish this task.  JQuery is Microsoft's fully supported open source javascript library.  Please refer to www.jquery.com for more information.

 

When a user clicks on Add Comment they will be taken to the following screen.  Upon clicking OK the user will be taken back to the original article. 

 

The image below is a modified NewForm.aspx screen.  The following steps indicate how to modify it.

 

 

 

 

 

  1. Open up Newform.aspx for editing under the list ArticleComment as shown in the image below.

 

 


  1. The page that opens will look like the following image:

 

 

Code needs to be added to the page in order to make the page perform custom actions with the querystring.   Before the code is inserted several components need to added via design mode which will create XSL for us that we can then modify. 

 

 

  1.  Adding a custom list form into the ArticleComment screen shown above will generate XSL that can be manipulated.  Click Insert from the menu > SharePoint Controls > Custom List Form

 

 


  1. The screen will show the PageURL and ArticleComment as seen in the image below:

 

 


  1. Now the code can be added.  In order to insert this code ensure you have the page open in code view (Shown in a prior step). 

Using jquery, we will find the PageURL and insert the value of page as the title (which is the name of your article .aspx).   Your jQuery code is as follows and will be at the top of the file:

 

<script type=”text/javascript”>

 

            $(function() {

 

                                    var page = queryStrVar('page');                //Return the name of the page from querystring

                                    $('input[title=PageURL]').val(page);        //Insert name into PageURL field

 

                        });

           

</script>

 

NOTE: Your master page must have a reference to the jQuery js file in order for this to work.

  1. The next thing to do is hide the ‘Preview of List Form Web Part’ (Shown in the image above).  Find the <IsVisible> tag and set it to ‘false’.
  2.  The last item is to ‘wire’ up the submitting the comments.  The desired behavior is to click the OK button in the image above and comments will be committed into the articlecomment list with the user being redirected to the originating article page.  This must be coded. 
    1. We need a variable containing the page name that our buttons will reference.  Insert the following code after xsl:variable name=”dvt_1_automode”  in the NewForm.aspx page.

<xsl:param name=”Source”>0</xsl:param>

<xsl:variable name=”RedirectLoc”>

            <xsl:value-of select=”$Source”/>

</xsl:variable>

    1. Insert the following code in place of the 2 current input buttons in the NewForm.aspx.  They have a class of ms-toolbar.  By default the buttons are called SaveButton and GoBackButton.

<input type="button" value="Add Comment" class="button" name="btnSave" onclick="javascript: {ddwrt:GenFireServerEvent(concat('__commit;__redirect={/news/Pages/',$RedirectLoc,'}'))}" />

<input type="button" value="Cancel" class="button" name="btnCancel" onclick="javascript: {ddwrt:GenFireServerEvent(concat('__redirect={/news/Pages/',$RedirectLoc,'}'))}" />

  1.  Save the NewForm.aspx and publish this.

The End.  Now every time an article is created there is a spot to add comments and view those comments.

 

Peter Serzo

SharePoint Architect

Trillium Teamologies Inc.

www.sharepointusermagic.com

Twitter:  @pserzo

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