Simple Sharepoint API Usage with jQuery

(This is part 1 of a 2-part post. Part 2 can be found here)

I've recently worked on some projects for a company heavily using Microsoft's Sharepoint platform. I've been trying to move away from it as much as possible, but for a few of my projects it has been unavoidable. On those projects I needed to work dynamically with data captured in Sharepoint. After a lot of trial and error, I discovered the owssvr.dll API interface.

The owssvr.dll interface lives in the _vti_bin directory under the Sharepoint site you are working with. Using GET requests, you can access XML data in SOAP form containing the information from lists and surveys in Sharepoint. More information about the API can be found here. UPDATE: On part 2 of this post, Eduard Ralph pointed out that there is a Webservice API offered by WSS 3.0 and MOSS. Information on this can be found here. For this post, I was still working with SharePoint 1.1.

I wasn't able to find a way to get jQuery to recognize namespaced XML elements, so instead I simply walked the DOM tree to get to the nodes I needed. This is taking the easy way out of the problem and it won't serve every purpose, so If someone knows of a better way to do this please comment below and let me know.

Random Image for a Sharepoint Picture Library

To start out, I'll share a quick example of a random image script that I implemented for one of the sites. Part of the default Sharepoint template is a view of a Sharepoint Picture Library. The view shows the first picture from the library, and using the built-in Sharepoint tools I wasn't able to find a way to randomize it. I'm just focusing on the Sharepoint interaction here, and glossing over the rest of the script.

I wanted the script to be fully degradable so that users that don't have JavaScript enabled could still see the first picture from the library. I left the template how it was, and set about accessing the Picture Library info via the API.

First off, I found the GUIDs of the list I wanted to access, and the view of that list I wanted data from. To do this, I went into the "Documents and Lists" view on the Sharepoint site itself, clicked on the Picture Library, and then clicked on "Modify Settings and Columns". The URL then gives us the first piece of info we need, the GUID of the list:

http://example.com/sites/mysite/_layouts/1234/listedit.aspx?List={A1234567-B123-C123-D123-A12345678901}

The GUID is the portion within the curly braces. In my JavaScript file, I added a local variable for the list so that I can build it for the $.get query later.

var list = 'A1234567-B123-C123-D123-A12345678901';

Next I needed the view. This is a little trickier, because sharepoint escapes the special charactes from the GUID in the List Edit interface. Under the "Views" section in the "Modify Settings and Columns" page, I selected the view that I created that includes the fields I needed for the script. After selecting the view, the view GUID is displayed at the end of the URL:

View=%7BE9876543%2DF987%2D9876%2DB987%2DA98765432109%7D

I manually converted the escaped special characters back into their counterparts.

%7B = {
%2D = -
%7D = }

View={E9876543-F987-9876-B987-A98765432109}

Then I added that to a local variable in my script.

var view = 'E9876543-F987-9876-B987-A98765432109';

Then I built my $.get query and fired it off with an inline callback function.

var url = 'http://example.com/sites/mysite/_vti_bin/owssvr.dll?XMLDATA=1&' +
    'List={' + list + '}&' + 'View={' + view + '}'

var relative_url = new Array();
var title = new Array();


$.get(url, {}, function (xml) {
    $('xml > *:last > *', xml).each(function (i) {
        relative_url[i] = $(this).attr('ows_RequiredField');
        title[i] = $(this).attr('ows_NameOrTitle');
    });

    var img = Math.round(Math.random()*(relative_url.length - 1));

    var thumb_url = 'http://example.com/' +
        relative_url[img].slice(0, relative_url[img].indexOf(title[img])) +
        '_t/' + title[img].slice(0, title[img].lastIndexOf('.')) + '_' +
        title[img].slice(title[img].lastIndexOf('.') + 1) + '.jpg'

    $('#my-element).attr('src', thumb_url);
});

The DOM tree walk I mentioned earlier is done on this line:

$('xml > *:last > *', xml).each(function (i) {

My raw XML data looked something like this (with unnecessary portions minimized):

<xml>
    <s:Schema id="RowsetSchema"></s:Schema>
    <rs:data>
        <z:row ows_SelectedFlag="0"
            ows_DocIcon="jpg"
            ows_NameOrTitle="Picture Filename.JPG"
            ows_ImageSize="1234"
            ows_FileSizeDisplay="123456"
            ows_RequiredField="sites/mysite/My Picture Library/Picture Filename.JPG"/>
        <z:row ows_SelectedFlag="0"
            ows_DocIcon="jpg"
            ows_NameOrTitle="Another Picture.JPG"
            ows_ImageSize="123"
            ows_FileSizeDisplay="654321"
            ows_RequiredField="sites/mysite/My Picture Library/Another Picture.JPG"/>

The DOM tree is walked by starting with the xml tag, then selecting the last descendant, then selecting all the descendants under that. The script then reads the attributes into variables that are then used when a random image is selected to build a new URL for the photo element.

That's all for now. In my next post, I'll walk through a more complex example to dynamically calculate statistics from a Sharepoint survey.