jQuery CAML Query – lists.asmx Web Service


So, recently I’ve embarked on a project to create a client side jQuery grid. To do this, I started out by creating a simple table from list data return from a CAML query to the list.asmx web service.

To get me started, I used Jan Tielen’s blog post Here. His example works perfectly accept you’ll need to modify one line of code to make it fully cross-browser compatible.

Change this:

$(xData.responseXML).find(“z\\:row”).each(function() {

to this:

$(xData.responseXML).find(“z\\:row, row”).each(function() {
Cross Browser Compatibility

z\\:row‘ will only work in IE, whereas ‘row‘ will work in every other browser. If you forget to change this line of code, the code will not return any of the rows because .find() will not be able to find them.

Site Collection URL Trick

Another useful trick is to grab the SharePoint JavaScript variable that contains the site collection relative URL and use that to generate the URL. You can do that like this:

var listsUrl = L_Menu_BaseUrl + “/_vti_bin/lists.asmx”,

The L_Menu_BaseUrl variable stores the relative url of the current page you’re on. This way, you don’t have to change your URL setting in the jQuery AJAX call from site to site.

Outside of those few changes, the Jan Tielens’ jQuery will work great!

To start out, make sure you reference the jQuery library either locally or the Google API version, which I prefer to use.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script&gt;

</script>

<script type=”text/javascript”>
$(document).ready(function() {
var soapEnv =
“<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’&gt; \
<soapenv:Body> \
<GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’&gt; \
<listName>Tasks</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name=’Title’ /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>”;

        $.ajax({
url: L_Menu_BaseUrl + “_vti_bin/lists.asmx”,
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processResult,
contentType: “text/xml; charset=\”utf-8\””
});
});

function processResult(xData, status) {
var htmlToAdd = “”;
$(xData.responseXML).find(“z\\:row, row”).each(function() {
var liHtml = “<li>” + $(this).attr(“ows_Title”) + “</li>”;
htmlToAdd += liHTML;
});
$(“#tasksUL”).append(htmlToAdd);
}
</script>

<ul id=”tasksUL”/>

Of course, you may want to provide a Query or a Row Limit to this lists.asmx call. So here’s how to add those:

Adding a Query

It’s important to note that when using a soap request in your jQuery the CAML Queries are case sensitive, so always check your capitalization and opening/closing tags if a query fails. With that said, you can use the code below to add a query to the call above. Make sure you have both the lowercase query and the uppercase Query nested within each other, otherwise the jQuery AJAX request will fail with a 400 error.

This code will go after the listName, inside of GetListItems.

<query> \
    <Query> \
        <Where> \
            ****Query Goes Here****
        </Where> \
    </Query> \
</query> \

A useful tool for building CAML queries is the U2U CAML Query Builder. It is advertised to work with 2003/2007 but it also works in SharePoint 2010 if you select ‘Web Services’.

Row Limit

Row limit is very easy to add. It consists of a single tag, rowLimit, to your query. Again, this will be placed within GetListItems. Same as above, if you forget to make the ‘r’ lowercase, the jQuery AJAX request will fail with a 400 error.

<rowLimit>30</rowLimit>

As usual, if you have any suggestions or find any mistakes let me know!

Advertisements
  1. No trackbacks yet.

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

%d bloggers like this: