Adventures in SPWonderland. - Getting Macromedia Flash to talk to Sharepoint

Sunday, January 22, 2006

« Running both versions of ASP.NET with WS... | Main | Hiding SharePoint Page Elements when Pri... »

Getting Macromedia Flash to talk to Sharepoint

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>

- <rs:data>

<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

}

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: