Thursday 3 November 2011

Creating the SharePoint Silverlight Slideshow

Instructions on how to build this demo http://www.wssdemo.com/SlideShow/show.aspx
It would be simpler to just install a custom web part on your SharePoint server that provides this functionality but not everyone has server administration access to their SharePoint environment to do this.
That is why I love the Data View/Form web part. It is already installed on your WSS/MOSS server, all you have to do is configure it through SharePoint Designer or import an already created .webpart configuration file through the web ui and you have a powerful solution.
Assuming you have some experience with SharePoint Designer and used the Data View, you shouldn't have to many problems getting this to work. (if you are new to the Data View then I suggest you look at these webcasts http://office.microsoft.com/home/video.aspx?assetid=HX102200491033 and http://office.microsoft.com/en-gb/sharepointdesigner/HA102540351033.aspx?pid=CL100738871033#2 )

Step 1

Create or use an existing SharePoint Picture library for the slideshow. Note: Silverlight only support JPG and PNG filetypes.

Step 2

Create a new document Library (I called mine SlideShow) and set the document template type to "Web Part Page".

Step 3

Download the files from http://www.codeplex.com/silverlightslideshow/Release/ProjectReleases.aspx?ReleaseId=9559
and upload the 6 .js files + the scene.xml into the document library created in step 2.

Step 4

Create a new web part page called "show" in the document library.

Your document library should now contain the following files...

Step 5

Open the "show" web part page in SharePoint Designer

Step 6

Add a Data View of the desired Picture Library to the web part page by selecting the data source and then inserting as a multiple item view

It doesn't matter what fields from the data source are selected (first 5 by default).

Step 7

Change the Data View properties

Set the Filter value to only return JPG or PNG file types

You can also change the sorting if you would like the pictures displayed in alphabetical Title or date Created order using the Sort and Group task.
You have now completed the SPDatasource configuration for the Slideshow web part.

Step 8

Switch to Code View and remove the <Xsl> </Xsl> tags and everything in between.
Add the following line to replace all the xsl just deleted
<XslLink>slideshow.xsl</XslLink>
Upload this file http://www.wssdemo.com/SlideShow/slideshow.xsl (right-click the link and "Save-as")as slideshow.xsl to the Document Library containing the web part page.

Step 9

Save the web part page and view it in the browser.

Step 10

Experiment with the Slideshow options in the xsl file by using the default.html file that came with the original Codeplex project. You will see that there are many options you can place in the
slideSettings: {theme: THEME_RANDOM_STACK}
section of the createSlideshow function.
More Info at : http://www.wssdemo.com/Blog/archive/2009/01/10/Creating-the-SharePoint-Silverlight-Slideshow.aspx

No comments:

Post a Comment