Use SPServices.js for Code less customizations in SharePoint Sites

Does anybody have asked you to update SharePoint page and show related data from other SharePoint list from same site or other sites/sub sites?

if yes then here is the workable answer for you to go ahead with. I’m talking about full JavaScript based client side solution, where you need to be prepared with following knowledge to go ahead with.

1. JQuery

2. Using JQuery with moss

3. SPServices 

Background

SPServices.js is a custom Jquery plugin which is used to call MOSS web Services from Java script. SPServices was wrote basically for WSS 3.0 and MOSS 2007, but as interface for SharePoint 2010 default web services are same as MOSS 2007, we can still use it for both MOSS 2007 and SharePoint 2010.

It also have many utility functions which is very useful for day to day programing on client side while deal with MOSS pages. some of them are as given below:

1. SPGetCurrentSite -  gets URL of current site.

2. SPGetCurrentUser- gets current logged in user

3. SPGetQueryString- returns an array containing the Query String parameters and their values

Now you have everything ready, so lets move ahead.

Step 1. add SPServices.JS file to library along with JQuery file.

Step 2. Add Content Editor Web part on the page. if you didn’t fine this web part then here is the good post to bring it to your web part gallery.

Step 3. now obviously, as CEWP needs to show some HTML as a content, you need to create one HTML page and save it to your ‘Document’ library. for this purpose you can use ‘Shared Document’ library created by default for team sites. or you can create one which can be accessible to all users.

Now it’s time to do real stuff. i.e. using functionality from SPServices.JS to fetch list items/lists or using it’s utilities.

Here is sample JavaScript to fetch the List ID from List schema returned by ‘Lists.asmx’ web service itself.

<script type="text/javascript">
  function GetListId(listName) {
  var id = "";
  $().SPServices({
    operation: "GetList",
    listName: <listName>,
    async: false,
    completefunc: function (xData, Status) {
      id = $(xData.responseXML).find("List").attr("ID");
    }
  });
  return id;
} 
</script>

here is the code to fetch List Items using ‘Lists.asmx’ web service

<script type="text/javascript">
$(document).ready(function(){
    var queryStringValues = $().SPServices.SPGetQueryString();
    var id = queryStringValues["ID"];    
    if(id == "0") {
        var customer = queryStringValues["CustomerNumber"];
        var query = "<Query><Where><Eq><FieldRef Name='CustomerNumber'/><Value Type='Text'>" +                   customer + "</Value></Eq></Where></Query>";
        var url = window.location;    
        $().SPServices({
            operation: "GetListItems",
            listName: "Customers",
            async: false,
            CAMLQuery: query,
            completefunc: function (xData, Status) {
                $(xData.responseXML).find("[nodeName=z:row]").each(function(){
                    id = $(this).attr("ows_ID");
                    url = $().SPServices.SPGetCurrentSite() + "/Lists/Customers/DispForm.aspx?ID=" + id;
                    window.location = url;
                });
            }
        });
    }
});
</script>

Bold part ‘completefunc’ is called when web service returns the result back to browser. here you can do your customization.

CAMLQuery can be created in a same way as created using Object model for querying items from site/list. Operations which can be called directly for Lists service using SPServics.js are listed here. Other supported default SharePoint web service are listed here.

Hope this will give you some information for starting with code less customization for SharePoint sites. Please let me know if you need further information for using this services with your solutions. In my Next post we will take a tour of using WCF data services for the same purpose for SharePoint 2010.

Regards,
Vikas Patel