Kwizcom Forms

SharePoint jsom synchronous call using deferred and promise

Deferred and Promise in JavaScript Object Model in SharePoint 2013

This SharePoint jsom tutorial, we will discuss, how to use Deferred with when in JavaScript Object Model (jsom) to make a synchronous call in SharePoint Online or SharePoint 2016/2013.

In SharePoint 2013 client object model supports ExecuteQueryAsync and not synchronous ExecuteQuery. When you call ExecuteQueryAsync in JSOM on the client-side, it executes the object model code you declared and carries on immediately. But sometimes you may require to do asynchronous call.

SharePoint deveopment training course

SharePoint jsom synchronous call using deferred and promise

We can use Deferred and promise in JavaScript Object Model in SharePoint 2013/2016/Online to make calls. Let us consider an example and then we will see how we can implement this.

Here let us take a list which has three columns:

  • Title
  • FirstName
  • LastName

And let us create an HTML form where the user can enter a title, first name, and last name and click on submit button to save the data in the list and once the data get saved it should display in a div. So in this situation, we need a synchronous call.

Our Save to list code should execute first and once it is complete then our Retrieve list items code should execute which will fetch the data from list and show in a div.

Syntax:
var p = addListItem();

p.done(function (result) {
retrieveListItems();
});

p.fail(function (result) {
alert('error');
});

Here is you will see first addListItem() function will execute and once it is done then retrieveListItems() function will start execution.

Here the first function (addListItem())will return a promise like below:

function addListItem() {
var d = $.Deferred();
//Your code
return d.promise();
}

In the success and failure method we can call the resolve() and reject() like below:

function onSuccess(d) {
d.resolve();
}

function onFailure(d) {
d.reject();
}

Below is the full code:

<h2>Add Items to Employee List</h2>
<div id="AddListData">
<div>
Title:
<br />
<input type="text" id="txtTitle" />
</div>
<div>
First Name:
<br />
<input type="text" id="txtFirstName" />
</div>
<br />
<div>
Last Name:
<br />
<input type="text" id="txtLastName" />
</div>
<br />
<div>
<input id="btnSubmit" type="button" value="Submit" />
</div>
</div>
<div id="divResult"></div>
<div id="divListItems"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var d = $.Deferred();
var listItemInfo = ";
$(function () {
bindButtonClick();
});

function bindButtonClick() {
$("#btnSubmit").on("click", function () {
var p = addListItem();
p.done(function (result) {
retrieveListItems();
});

p.fail(function (result) {
alert('error');
});
});
}

function addListItem() {
var title = $("#txtTitle").val();
var firstname = $("#txtFirstName").val();
var lastname = $("#txtLastName").val();
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getByTitle('Employees');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Title', title);
oListItem.set_item('FirstName', firstname);
oListItem.set_item('LastName', lastname);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onAddSucceeded),
Function.createDelegate(this, this.onAddFailed)
);

return d.promise();
}

function onAddSucceeded(sender, args) {
d.resolve(sender, args);
}

function onAddFailed(sender, args) {
d.reject(sender, args);
}

function retrieveListItems() {
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getByTitle('Employees');
var camlQuery = new SP.CamlQuery();
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded(sender, args) {
listItemInfo = ";
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
listItemInfo += '<strong>ID: </strong> ' + oListItem.get_id() +
' <strong>Title:</strong> ' + oListItem.get_item('Title') +
' <strong>FirstName:</strong> ' + oListItem.get_item('FirstName') +
' <strong>LastName:</strong> ' + oListItem.get_item('LastName') +
'<br />';
}

$("#divListItems").html(listItemInfo);
}

function onQueryFailed(sender, args) {
alert('Hello');
}
</script>

Once you save the code and refresh the page, user can see a form. Let us enter the values in the field and click on Submit. It will show the list items like below:

SharePoint jsom synchronous call using deferred and promise

You may like following SharePoint jsom tutorials:

This SharePoint jsom tutorial explains, how to use Deferred and Promise in JavaScript Object Model in SharePoint 2013 to make asynchronous to synchronous call.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →