SharePoint 2013 - The JavaScript Object Model (JSOM)

In this post we shall look a little deep into the JavaScript Object Model in SharePoint 2013. In the next post we will see a demo for retrieving list items from a SharePoint list using JSOM.

JSOM Objects
Objects in JSOM are pretty much similar to the classes in SharePoint server object model. Following are some of the commonly used JSOM counter parts.

.NET Server type	JSOM object
SPSite	SP.Site object (sp.js)
SPWeb	SP.Web object (sp.js)
SPWebCollection	SP.WebCollection object (sp.js)
SPList	SP.List object (sp.js)
SPListItem	SP.ListItem object (sp.js)
SPListItemCollection	SP.ListItemCollection object (sp.js)
Client context not available	SP.ClientContext object (sp.js)
SPContentType	SP.ContentType object (sp.js)
SPContext	SP.RequestContext object (sp.js)

JSOM Implementation
Following are the main steps for implementing JSOM.
1) Add reference to the JavaScript libraries that support JSOM.
2) Get an instance of Client Context and load the JSOM objects
3) Specify Callback functions and Execute the query.

Now lets see each of the above mentioned steps in detail. After that we will see a demo for getting the items from a SharePoint list using JSOM.

1) Adding reference to the JS libraries for supporting JSOM
For implementing JSOM, a reference to the following JS files should added inside the page.
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>

Note:- In case we have customized or utilized a new master page for our sites, we should ensure that JSOM is loaded before we start accessing it. There are 2 methods for doing in it.
(i) ScriptLink : Use the server side ScriptLink class to declaratively register a script. The class provides properties and methods for registering scripts so that they can be requested when the page is being rendered.

<SharePoint:ScriptLink ID="registerSP" runat="server" OnDemand="true" LoadAfterUI="true" Name="SP.js">

(ii) ExecuteOrDelayUntilScriptLoaded : The SOD framework provides methods to ensure that the client scripts are loaded before any execution takes place on the dependent methods. Calling the following method before the executing method ensures that the function provided in the first parameter is not executed until the script file name mentioned is not loaded or has not been loaded.

ExecuteOrDelayUntilScriptLoaded(GetProducts, "sp.js");

2) Get an instance of client context and load the JSOM objects
First of all, an instance of the client context must be created to access the objects in the JSOM. The current context can be get by using the get_current() method in SP.ClientContext as shown below.
var clientContext = new SP.ClientContext.get_current();

Using the Client Context object all the other SharePoint objects should be loaded as follows. In the following example we are loading all the items from the list named "Products".
var oList = clientContext.get_web().get_lists().getByTitle('Products');

this.collListItem = oList.getItems("");
clientContext.load(collListItem);

Note: You can further add a CAML query to the above code as follows 

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);

3) Specify the callback functions and execute the query
Once all the necessary objects are loaded, we must specify the callback functions and execute the query as follows.
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));

Specify the Callback function if query execution succeeded
function onQuerySucceeded(sender, args) {
alert("Success");
}
Specify the Callback function if query execution failed
function onQueryFailed(sender, args) {
alert("Failure");
}

Hope this post helps you to get a basic idea about the JavaScript object model in SharePoint 2013. In the next post we will see a demo for retrieving list items from a SharePoint list using JSOM.