SharePoint: January 2017

1. Used to perform async calls to the SharePoint to accessing data.
2. ExecuteQueryAsync method: Executes the current pending request asynchronously on the server.

SOM or JavaScript Object Model is a set of .js files built for ECMAScript-enabled platforms. The main .js files that are available are:

SP.js
SP.Core.js
SP.Ribbon.js
SP.Runtime.js

These files are deployed in the SharePoint15_Root\TEMPLATE\LAYOUTS directory.

context.Load(listitems);
context.ExecuteQueryAsync();

Load is to prepare query what you want from the server
executeQueryAsync/executeQuery is to get the data from the server

Add the following two methods for Callback in App.js

function success() {

    $("#dvMessage").text("Operation Completed Successfully");

}

function fail() {

    $("#dvMessage").text("Operation failed  " + arguments[1].get_message());

}

Syntax:-

{
var clientcontext = sp.clientcontext.get_current();
var website=clientcontext.get_web();
var lists= website.get_lists();
var carlist= lists.getbytitle("cars");
var itemcreatioinfo = new sp.itemcreatioinfo();
var listitem= carlist.additem(itemcreaitoninfo);
listitem.set_item("title", txtcarname.value);
listeitem.set_item("carid", txtcarid.value);
listitem.update();
clientcontext.executequeryAsync(Funtion. createDelegate(This, this.succeded),
(Funtion. createDelegate(This, this.failure);
}

Item create into list code:

function AddListItem()
{
var listTitle = "companyInfo";
//Get the current client context
context = SP.ClientContext.get_current();
var airportList = context.get_web().get_lists().getByTitle(listTitle);
//Create a new record
var listItemCreationInformation = new SP.ListItemCreationInformation();
var listItem = airportList.addItem(listItemCreationInformation);
//Set the values
Var industryVal = $("#Industry").val();
var Company = $("#Company").val();
listItem.set_item('Industry', +industryVal);
listItem.set_item('Company', +new item);
listItem.update();
context.load(listItem);
context.executeQueryAsync(AddListItemSucceeded, AddListItemFailed);
}
function AddListItemSucceeded()
{
retriveListItem();
}
function AddListItemFailed(sender, args)
{
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

JSOM Convert Async calls to Sync:

SharePoint 2013 Client Object Model is used to retrieve, update and manage the data in SharePoint 2013 library/List. SharePoint makes an Object model available in several forms but here, we are using Javascript Object Model.

JavaScript library(JSOM)
REST/OData endpoints

In this Javascript Object Model, we will use executeQueryAsync() but it will execute/ will not wait for success/ fail to complete. We need to make executeQueryAsync() behave synchronously.

It means the function will wait for async operations, which should be completed and should return some values.

We know that SharePoint JavaScript Client Object Model is asynchronous. However, sometimes we want to process the things in a synchronous way.

This can be done by using JavaScript callbacks and deferred/Promises. Let's first see an asynchronous example, which we will later convert to synchronous:

For this reason, JavaScript is having an option to use deferred/promise method do this operation.

Promise

The promises pattern significantly simplifies JavaScript code when you make an app, which must have multiple, nested asynchronous calls and it makes it very powerful.

Example

Your JavaScript code has to update multiple list items one by one to complete the basic operations and wait for the first one to execute.

However, Promise object also acts like a caching mechanism, where the success or failure function will be called immediately, if the Promise has already been fulfilled.

Promises object can make it easy to execute dependent asynchronous calls sequentially, which are based on the results.

Syntax

The deferred/ Promise object is very simple syntax and powerful method for sequentially updating in the list/ list items.

Initially, we need to declare the deferred object, as shown below.

var deferred = $.Deferred();  

At the end of the function, we have to return Promise object.

return deferred.promise();   

First, we will see about normal JavaScript execution.

<script type="text/javascript">  
    var 0camlItems;  
    $(document).ready(function () {  
        //don't exectute any jsom until sp.js file has loaded.          
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getvalues);  
    });  
  
    function getvalues() {  
        retrivethelistitem('Tutorial list');  
        console.log(“Execute  second after the retrieve list items ”);              
    }  
  
    function retrivethelistitem(listTitle) {  
        var clientContext = new SP.ClientContext.get_current();  
        var olist = clientContext.get_web().get_lists().getByTitle(listTitle);  
        var camlQuery = new SP.CamlQuery();  
        ocamlItems = olist.getItems(camlQuery);  
        clientContext.load(ocamlItems);  
        clientContext.executeQueryAsync(  
            Function.createDelegate(this, this.success),  
            Function.createDelegate(this, this.failure)  
        );  
    };  
  
    function success(sender, args) {  
        var listItemEnumerator = ocamlItems.getEnumerator();  
        while (listItemEnumerator.moveNext()) {  
            var olistItem = listItemEnumerator.get_current();  
console.log(‘execute first ‘);  
              
console.log(olistItem.get_item('Title'));  
        }  
    }  
  
    function onQueryFailed(sender, args) {  
        console.log('An error occured while retrieving list items:' + args.get_message());  
    }  
</script>   

Output

For the method given above, we will get the output given below.

Execute second after retrieving the list items.

execute first
NewListitem

Here, we are expecting success function, which should execute first. Unfortunately, the previous one executed. Sometimes it will cause a major issue when you are updating the list items.

Thus, we need to use Async operation to perform synchronously.

Let's see the deferred/ Promise function, as shown below.

<script type="text/javascript">  
    var 0camlItems;  
    $(document).ready(function () {  
        //don't exectute any jsom until sp.js file has loaded.          
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getvalues);  
    });  
  
    function getvalues() {  
        retrivethelistitem('Tutorial list').done(function()  
{  
        console.log(“Execute  second after the retrieve list items ”);   
}).fail(function()  
{  
 console.log(“Execute  second after the retrieve list items  failed”);   
});             
    }  
  
    function retrivethelistitem(listTitle) {  
//Declare your deferred object here  
      var deferred=$.Deferred();  
        var clientContext = new SP.ClientContext.get_current();  
        var olist = clientContext.get_web().get_lists().getByTitle(listTitle);  
        var camlQuery = new SP.CamlQuery();  
        ocamlItems = olist.getItems(camlQuery);  
        clientContext.load(ocamlItems);  
        clientContext.executeQueryAsync(  
            Function.createDelegate(this, this.success),  
            Function.createDelegate(this, this.failure)  
        );  
//Return your Promise Object  
return deferred.promise();  
    };  
  
    function success(sender, args) {  
        var listItemEnumerator = ocamlItems.getEnumerator();  
        while (listItemEnumerator.moveNext()) {  
            var olistItem = listItemEnumerator.get_current();  
console.log(‘execute first ‘);  
              
console.log(olistItem.get_item('Title'));  
//Resolve your object here  
deferred.resolve(olistItem );  
        }  
    }  
  
    function onQueryFailed(sender, args) {  
        console.log('An error occured while retrieving list items:' + args.get_message());  
//Reject your object here  
deferred.reject(olistItem );  
    }  
</script>   

Output

For the code given above, we will get the output, as shown below.

execute first
NewListitem

Execute second after retrieving the list items.

SharePoint

Friday 20 January 2017

JSOM

Traffic