jQuery for SharePoint Web Services

The “core” of the jQuery Library for SharePoint Web Services is the $().SPServices function, which allows you to simply call each Web Service operation.

The table below shows the Web Services currently available in the library and where they work, along with links to the MSDN documentation:

Web Service WSS 3.0 MOSS MSDN Documentation
Alerts Alerts Web Service
Authentication Authentication Web Service
Forms Forms Web Service
Lists Lists Web Service
Permissions Permissions Web Service
Users and Groups Users and Groups Web Service
Versions Versions Web Service
Views Views Web Service
WebPartPages Web Part Pages Web Service
Webs Webs Web Service
PublishedLinksService   PublishedLinksService Web Service
Search   Search Web Service
UserProfileService   User Profile Web Service
Workflow   Workflow Web Service
Calling the Library

To set things up to use the jQuery Library for SharePoint Web Services, you’ll need to add references to it and the core jQuery library in the right context for what you are trying to accomplish.

<script src="/TimeSheet/jQuery%20Libraries/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/TimeSheet/jQuery%20Libraries/jquery.SPServices-0.5.6.min.js" type="text/javascript"></script>

What all this adds up to is that you can use the jQuery Library for SharePoint Web Services to call any of the Web Service operations it wraps as simply as this:

   1: $().SPServices({
   2:    operation:  "GetList",
   3:    listName:  "Project",
   4:    completefunc: function  (xData, Status) {
   5:      ...do something...
   6:    }
   7: });
The Results

When you make one of these calls, you get back XML, just as you’ve passed XML into it. As I was building the library, I found that I very often wanted to see what was in that XML in an easy to read format, so I built the $().SPServices.SPDebugXMLHttpResult function. If you’re comfortable with XML and debugging tools, you may never need this function, but I find it useful. If you wanted to use it in the above example, replace the completefunc with this:

   1: completefunc: function (xData, Status) {
   2:    var out =  $().SPServices.SPDebugXMLHttpResult({
   3:      node:  xData.responseXML
   4:    });
   5:    $(divId).html("").append("<b>This  is the output from the GetList operation:</b>" + out);
   6: }

where divId is the ID for a DIV on the calling page where you’d like to place the results. The output from the $().SPServices.SPDebugXMLHttpResult function for GetList will look something like this excerpt:



On the other hand, if you’d like to work with the output, you’d probably do something like this:

   1: $().SPServices({
   2:    operation:  "GetList",
   3:    async: false,
   4:    webURL: opt.webURL,
   5:    listName:  opt.listName,
   6:    completefunc:  function(xData, Status) {
   7:      $(xData.responseXML).find("Field").each(function()  {
   8:        if($(this).attr("StaticName")  == opt.columnStaticName) displayName = $(this).attr("DisplayName");
   9:      });
  10:    }
  11: });

This example comes from the $().SPServices.SPGetDisplayFromStatic function. In the completefunc, I find all of the Field elements, iterate through them until I find the one I’m looking for, then grab the DisplayName attribute to return.

Source Reference

Leave a Reply