jQuery to SharePoint Web Services

Recently I have been working on a Google Maps integration for SharePoint and one of the desired capabilities was to include items from SharePoint lists on the map.  The solution was not going to leverage the AJAX .NET capabilites and would instead be built using standard .NET and jQuery.  This presented the major challenge, while we could convert the lists into RSS, GeoRSS, and KML feeds they all required authentication to access these feeds, something that Google Maps does not support in the GGeoXml object.  Google Maps are heavily javascript focused so we couldn’t use the SharePoint API to access the items directly especially since we wanted to avoid post backs to the server, and javascript arrays would likely run out of space give the number of possible items.  This really left us with one possible solution, javascript calls to the SharePoint Web Services.  Fortunately, talking with one of my co-workers he pointed me to a nice, somewhat limited, jQuery plugin for the SharePoint web services available here:

http://www.sympraxisconsulting.com/Demos/Demo%20Pages/SPjQueryWebServices.aspx

Using this service I have been able to access the current web’s lists and items from those lists.  Here is an example of how I have used this plugin to retrieve the lists and populate a selection box, their code for the button clicks are also available.

My Code

$(“.list_select_cell”).html(“<img src=\”/_layouts/images/ewr133.gif\” alt=\”Loading lists\” />”).SPServices({
operation: “GetListCollection”,
completefunc: function(data, status) {
var mySelectBox = “<select size=’5’ id=’list_select’>”;
$(data.responseXML).find(“List”).each(function() {
mySelectBox += “<option value=’” + $(this).attr(“Title”) + “’>” + $(this).attr(“Title”) + “</option>”;
});
mySelectBox += “</select>”;
$(“.list_select_cell”).html(mySelectBox);
}
});

 

So what is really happening here?

$(“.list_select_cell”).html(“<img src=\”/_layouts/images/ewr133.gif\” alt=\”Loading lists\” />”).SPServices({…

 

In the above code we have selected a location that currently exists in our page’s DOM and have added the ewr133.gif, the same gif SharePoint uses when processing Site creations.  So basically you specify the DOM object you want to effect while making the asynchronous calls to the SharePoint web service.  You do not have to add or remove text from a DOM object, you could also choose to show or hide an object, that is based on your needs.

operation: “GetListCollection”

Here you are specifying the service you are calling.  These match the name of the asmx file provided by SharePoint, in this case the call is actually going to the GetListCollection.asmx service.  Only certain service calls are supported as the jQuery library is not an all inclusive library.

 

completefunc: function(data, status) { …

This specifies the action to take when the asynchronous call completes.  The first argument provided to this function is the XmlHttpRequest object, thus in order to gather any information from the response you must parse the responseXML.  At the end of this function I recommend, if you changed the DOM object’s html as part of the “while processing” action that you now set the value to something useful to the user.

So now you can access your lists, and your list items from Javascript and you don’t even need to perform a standard PostBack.

Some limitations

One of the biggest limitations I experienced with this tool is that the plugin assumes you want to use the “current” SharePoint web when retrieveing lists, and also assumes that any list you are accessing is stored in the current web.

Conclusion

This plugin while limited is EXTREMELY stable for an 0.X version, and saved me a number of hours of custom coding WCF services, or building my own version of this plugin.

Update (8/25/2009)

One day after originally publishing this post Marc D made the changes necessary to overcome what I have listed above as a limitation.  I have not had the opportunity to include these changes into our solution as it is no longer in the development phase of its life cycle but I do plan on using Marc’s latest version in the next iteration.

If you are interested in Marc’s tool you can get the latest version on Codeplex here:
http://spservices.codeplex.com/

Thanks Marc for reading!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s