SharePoint Blog

Displaying Data with the Client OM

Here is an example of how to use the Client OM (more specifically jQuery and the SPServices library)  can be used to display content from lists. I will then build upon this using readily available examples i have found to build the html/js/css needed to end up with a multi tabbed web part displaying several tabs of content.

In this first example, we will create some code to query a Announcements list. I have added an extra column to this list called ShowOnHomePage this will be a filter for our display, and is just a simple Yes/No column.

I am happy with the out of the box announcement for now, it gives us a good test. You will need to upload a copy of jQuery and the SPServices .js files onto your site, i will be using the Style Library for now. If you dont have access to edit your masterpage, you could register the scripts inside your HTML, see example below.

The next thing we need to do is just gather the information to build our jQuery function. For my example this includes the following:

  • The operation we wish to perform: “GetListItems”
  • The list we are querying: “Announcements”
  • The fields we are querying: Title / ID / Body
  • The filter we have defined: ShowOnHomePage = Yes (1)
  • The maximum results we are wanting to receive back: 5

Now we have this information we can start building our HTML and Javascript. The first thing i am going to do is to create a

to host our content inside. I have also put the javascript placeholders in:

 HTML |  copy code |? 
<script type="text/javascript" src="/sites/Christest/Style Library/jquery-1.5.2.min.js"></script>       
<script type="text/javascript" src="/sites/Christest/Style Library/jquery.SPServices-0.6.0.min.js"></script>       
<div id="com_tab1">       
<script type="text/javascript">       

Next we will construct the SPServices function, SPServices is an abstraction layer between the SharePoint Web Services and you as a developer which makes it really simple for us to get our data. Insert the following code inside the com_tab1 div, inside the script tags.

 Javascript |  copy code |? 
var com_tab1_html = "";    
    operation: "GetListItems",    
    async: false,    
    listName: "Announcements",    
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='ID' /><FieldRef Name='Body' /></ViewFields>",    
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='ShowOnHomePage' /><Value Type='Text'>1</Value></Eq></Where></Query>",    
    CAMLRowLimit: 5,    
    completefunc: function (xData, Status) {    
        $(xData.responseXML).find("[nodeName='z:row']").each(function() {    
             com_tab1_html+='<div><a href="/sites/christest/Lists/Announcements/DispForm.aspx?ID='+$(this).attr("ows_ID")+'&Source=/sites/christest/">'+$(this).attr("ows_Title")+'</a></div><div>'+$(this).attr("ows_Body")+'</div>';    

So what are we doing here, well the first thing is creating a variable, as we have up to 5 rows of data to print out, we are going to want to store the html somewhere for each iteration, after this we are setting various parameters that we came up with answers for earlier, if you need help with your CAML query there are plenty of examples out there.

We then are querying the data and formatting the output we get back, finally we are setting our original DIV to contain the html from our ariable in Part 2 we will style these DIVs so dont worry too much about how pretty it looks for now, function over figure for part one. Now you have your completed HTML block, save it to a .html file and upload it to a SharePoint document library. Once its there add a Content Editor Web Part to your page and use the Content Link option to link to your .html file. You should end up with something like this:

About Chris Grist

Chris SharePoint Architect for Beach Energy in Adelaide, South Australia. Chris has specialised in SharePoint for the last few years and has over 12 years experience in the IT Industry. Catch Chris on twitter at @griStdoG View all posts by Chris Grist →
This entry was posted in Featured, Office365, SharePoint and tagged , , , . Bookmark the permalink.

Leave a Comment

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>