JSOM Batching Code Example

In this article we can explore a sample JSOM code which will reveal the Batching advantage of JSOM.

Batching

Batching is one core advantage of JSOM over REST API. Batching minimizes the roundtrips involved by grouping all the queries together.

For example, if you have 10 SharePoint lists to be queried from a page, REST API requires 10 roundtrips which would be taking around 20 seconds. Here we can use JSOM to combine the requests into 1 roundtrip there by reducing the time to 2 seconds. (90% time reduction)

image

Network Roundtrip occupies the majority time involved in a web page loading.

JSOM Example

In this example we are using 2 lists named Contacts A and Contacts B. Please create these lists from template Contacts & add one item in each.

image

image

Now create a new page & add a content editor web part. Insert following code into it. Change the server URL before saving.

<script src=” http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js” type=”text/javascript”></script>

<script>

var siteUrl = ‘http://server‘;

$(document).ready(function () {

    ExecuteOrDelayUntilScriptLoaded(retrieveListItems, “sp.js”);

    }

)

function retrieveListItems() {

   var clientContext = new SP.ClientContext(siteUrl);

    var oList = clientContext.get_web().get_lists().getByTitle(‘Contacts A’);

    var camlQuery = new SP.CamlQuery();

    camlQuery.set_viewXml(‘<View><Query><Where><Geq><FieldRef Name=\’ID\’/>’ +

        ‘<Value Type=\’Number\’>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>’);

    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

    var oList2 = clientContext.get_web().get_lists().getByTitle(‘Contacts B’);

    var camlQuery2 = new SP.CamlQuery();

    camlQuery.set_viewXml(‘<View><Query><Where><Geq><FieldRef Name=\’ID\’/>’ +

        ‘<Value Type=\’Number\’>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>’);

    this.collListItem2 = oList2.getItems(camlQuery2);

    clientContext.load(collListItem2);

  clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));       

}

function onQuerySucceeded(sender, args) {

    var listItemInfo = ”;

    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {

        var oListItem = listItemEnumerator.get_current();

        listItemInfo += ‘\nID: ‘ + oListItem.get_id() +

            ‘\nTitle: ‘ + oListItem.get_item(‘Title’);

    }

    alert(listItemInfo.toString());

    var listItemInfo2 = ”;

    var listItemEnumerator2 = collListItem2.getEnumerator();

    while (listItemEnumerator2.moveNext()) {

        var oListItem2 = listItemEnumerator2.get_current();

        listItemInfo2 += ‘\nID: ‘ + oListItem2.get_id() +

            ‘\nTitle: ‘ + oListItem2.get_item(‘Title’);

    }

    alert(listItemInfo2.toString());

}

function onQueryFailed(sender, args) {

    alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());

}

</script>

Testing the Code

Save and Refresh the page. You can see that the items from both lists are fetched.

image

image

You can see that the above message boxes shows items from 2 different lists. The code completed in one roundtrip instead of two.

image

REST is Chattier, but JSOM allows Batching.

References

https://msdn.microsoft.com/en-us/library/office/jj163201.aspx

Summary

In this article we have explored a JSOM batching example.

Leave a Reply

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