Towards the end of last year our company Flexnet Consultants decided to release a set of free Web Parts that we thought might be useful to have installed in WSS/SPS sites. The first of these was a Flash slideshow based on the pictures held in a SharePoint picture library http://www.flexnetconsult.co.uk/WebParts/FlashSlideShow.htm.
We like Flash a lot as its a great way to liven up dull static pages and the content can be a lot more than 'eye-candy'
The first thing you need is some way to create the swf file that Flash is compiled into, in-house we use Flash MX. The actual slideshow view of the pictures wasn't a real problem as that's exactly the kind of thing Flash is good at. We use ActionScript to control the action on the Flash stage.
The main issue was how to get a list of the pictures held in the library.
We looked at a few possible ways, one would be to pass a list of pictures to Flash using its URL or the FlashVars property, not pretty and not scaleable, the next idea was to talk to the SharePoint Web Services, this would have been ideal except Flash only really got proper support for talking to generic Web Services with the recent version 8 and we wanted to support Flash players version 6 and upwards to allow for the widest audience. We will probably create a version that supports 8 later.
That left us with one final method and it turns out to be a very easy one, the old SharePoint URL protocol available since version 1. The docs for these calls are here http://msdn.microsoft.com/library/default.asp?url=/library/en-us/spsdk11/Client_API/spURLProtocol.asp , there's a lack of useful examples but its pretty easy to use.
You pass parameters via URL to the SharePoint ISAPI DLL called owssvr.dll in the _vti_bin directory and it returns xml information either formated in a CAML style or raw data rowset style. We want raw Data so we put XMLDATA=true in the URL
As an example if you pass http://sharepoint.flexnet.ds/_vti_bin/owssvr.dll?CS=109&Cmd=Display&List={89ECD870-30EE-4E6E-B39B-B2C8CC548213}&XMLDATA=TRUE then you get this XML data back
- <xml xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:rs="urn:schemas-microsoft-com:rowset" xmlns:z="#RowsetSchema">
- <s:Schema id="RowsetSchema">
- <s:ElementType name="row" content="eltOnly" rs:CommandTimeout="30">
- <s:AttributeType name="ows_SelectedFlag" rs:name="Selection Checkbox" rs:number="1">
<s:datatype dt:type="ui1" dt:maxLength="1" />
</s:AttributeType>
- <s:AttributeType name="ows_DocIcon" rs:name="Type" rs:number="2">
<s:datatype dt:type="string" dt:maxLength="512" />
</s:AttributeType>
- <s:AttributeType name="ows_NameOrTitle" rs:name="Name" rs:number="3">
<s:datatype dt:type="string" dt:maxLength="512" />
</s:AttributeType>
- <s:AttributeType name="ows_ImageSize" rs:name="Picture Size" rs:number="4">
<s:datatype dt:type="i4" dt:maxLength="4" />
</s:AttributeType>
- <s:AttributeType name="ows_FileSizeDisplay" rs:name="File Size" rs:number="5">
<s:datatype dt:type="i4" dt:maxLength="4" />
</s:AttributeType>
- <s:AttributeType name="ows_RequiredField" rs:name="" rs:number="6">
<s:datatype dt:type="string" dt:maxLength="1073741823" />
</s:AttributeType>
</s:ElementType>
</s:Schema>
<z:row ows_SelectedFlag="0" ows_DocIcon="jpg" ows_NameOrTitle="London01.jpg" ows_ImageSize="180" ows_FileSizeDisplay="10587" ows_RequiredField="Flash Test/London01.jpg" />
<z:row ows_SelectedFlag="0" ows_DocIcon="jpg" ows_NameOrTitle="London02.jpg" ows_ImageSize="180" ows_FileSizeDisplay="7675" ows_RequiredField="Flash Test/London02.jpg" />
<z:row ows_SelectedFlag="0" ows_DocIcon="jpg" ows_NameOrTitle="London03.jpg" ows_ImageSize="180" ows_FileSizeDisplay="14242" ows_RequiredField="Flash Test/London03.jpg" />
<z:row ows_SelectedFlag="0" ows_DocIcon="jpg" ows_NameOrTitle="London04.jpg" ows_ImageSize="180" ows_FileSizeDisplay="6755" ows_RequiredField="Flash Test/London04.jpg" />
<z:row ows_SelectedFlag="0" ows_DocIcon="jpg" ows_NameOrTitle="London05.jpg" ows_ImageSize="180" ows_FileSizeDisplay="19926" ows_RequiredField="Flash Test/London05.jpg" />
:row ows_SelectedFlag="1" ows_NameOrTitle="SubFolder1" ows_RequiredField="Flash Test/SubFolder1" />
</rs:data>
</xml>
As you can see the data holds information such as the filesize and the subfolders, this could be used to recurse into the sub folders if you wanted.
This format is exactly what we need as Flash has a XML object that can load XML data from a URL.
Example code for this would be
var x=new XML();
x.ignoreWhiteSpace = true;
x.onLoad = LoadDocs;
x.Load("http://sharepoint.flexnet.ds/_vti_bin/owssvr.dll?CS=109&Cmd=Display&List={89ECD870-30EE-4E6E-B39B-B2C8CC548213}&XMLDATA=TRUE");
The XML object will call the LoadDocs function when it has completed the data download.
All thats left is to iterate the XML nodes and extract the picture names from the attribute ows_RequiredField
function LoadDocs(success)
{
if (success){
var eXmlRoot = this.firstChild;
// allow for /r/n in the XML stream
var eXmlSchema= eXmlRoot.childNodes[1];
var eXmlData= eXmlRoot.childNodes[3];
var eRows= eXmlData.childNodes;
arrImages=new Array();
for (i=0; i< eRows.length; i++){
if (eRows[i].nodeType==1 && eRows[i].nodeName.toLowerCase()=="z:row"){
//Skip subfolders and only show jpgs
// to only show jpgs use (eRows[i].attributes.ows_DocIcon == 'jpg')
if(eRows[i].attributes.ows_SelectedFlag=="0" )
{
arrImages.push(eRows[i].attributes.ows_RequiredField);
}
}
}
}
// The list of pictures are now loaded
}
Now that we have the list of pictures we can then use ActionScript to rotate through them.
Once you have created your Flash SWF the final thing that needs to be done is to render out the OBJECT tag that will host the Flash file in the RenderWebPart event, this will look like this on the SharePoint page:
The FlashVars method allow you to reference parameters as variables in the ActionScript code e.g. _root.ServerBase and _root.SiteURL
Future Web Parts in the pipeline are an improved Slideshow, a PhotoStrip with dynamic pictures (like the Flikr badge) and a analog/digital clock.