ECMAScript or JavaScript Client Object Model (JSOM) in SharePoint 2013/2016/Online

ECMAScript Client Object Model SharePoint 2013
SharePoint deveopment training course

This SharePoint tutorial explains, ECMAScript Client Object Model or JavaScript Client Object Model (JSOM) in SharePoint 2013. We will also see some examples in ECMAScript Client Object Model in SharePoint.

As in most of cases, you will not get access to deploy your server-side code, this will help you much in that scenarios. From SharePoint 2010 towards next versions there is lot of improvements towards the client side object model. Lots of classes available to work with client-side object model.

ECMAScript Client Object Model or JavaScript Client Object Model (JSOM) in SharePoint 2013

We can access and manipulate SharePoint objects like Site, Web, List, ContentTypes, User Permission using ECMAScript client object model which works in asynchronous mode. To work with JSOM we need to refer to certain javascript files and if you web part page or the page is using the default master pages then we do not need to give any reference because most of the cases the reference is already presented inside the master pages. And we should also make sure that there should be one and the only reference exists for a particular file.

We can write the JSOM code inside a script editor web part or also inside a content editor web part in a SharePoint Site. But Cross-site scripting is also not allowed in JSOM like you cannot call SharePoint objects from one site to another site.

Below are the browsers supported like:

  • IE 7.0 onwards
  • Firefox 3.5 onwards
  • Safari 4.0 onwards.
  • Google Chrome

When the client made an Http request to the server, the server tries to load the page and the master page. If the page using the default master pages then the page already has references to the required JSOM scripts.

If it is a custom master page, then we have to load the JSOM references before the pages and controls can use the JSOM. The SharePoint downloads the files from the C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS directory to the client browser.

The js files which we required are:

  • SP.js
  • SP.Core.js
  • SP.Runtime.js

Unlike SharePoint 2007, SharePoint 2010 or 2013 versions SharePoint only download the required files instead of downloading the whole file.

SharePoint provides Script On Demand (SOD) framework which ensures that only the required files are downloaded to the client and provides options to load them in the background after the page has completed loading.

SOD is a class defined in the init.js file and contains methods for loading scripts, registering script dependencies, executing methods within a loaded page, and event notification.

You can enable on-demand loading is to set the OnDemand=”true” attribute in the SharePoint:ScriptLink server tag.

<script type="text/javascript">
SP.SOD.RegisterSod("SP.js", "\_layouts\SP.js");
</script>

If you want to give reference in a page which is using any custom master page, then you can write like below:

<SharePoint:ScriptLink ID="ScriptLink21″ Name="sp.js" runat="server" OnDemand="false" LoadAfterUI="true" Localizable="false" />

Example-1: Create List using JSOM or ECMAScript in SharePoint

Now to work with the SharePoint objects from JSOM, first we need an instance of the client context. You can get an instance of SP.ClientContext by using the get_current() method. Like

var clientContext = SP.ClientContext.get_current();

Below is the code to create a List in the SharePoint site using JSOM.

<input type='button' id='id1' value='Create List' onclick="CreateList();"/>

<script type="text/javascript">
function CreateList()
{
var clientContext;
var listCreationInfo;
var web;
var list;

clientContext = SP.ClientContext.get_current();
web = clientContext.get_web();
listCreationInfo = new SP.ListCreationInformation();
listCreationInfo.set_title("MyTestList");
listCreationInfo.set_templateType(SP.ListTemplateType.genericList);
list = web.get_lists().add(listCreationInfo);
clientContext.load(list);
clientContext.executeQueryAsync(
function () { alert("Site Created Successfully!!!") },
function () { alert("Request failed") }
);
}
</script>

Go to the SharePoint site content and you will be able to see the list created in the SharePoint site.

Example-2: Create List Item using ECMAScript or JSOM in SharePoint

Here we will try to create one list item by using the JavaScript object model (JSOM) or ECMAScript Client Object Model.

<input type='button' id='id1' value='Create List Item' onclick="CreateListItem();"/>

<script type="text/javascript">
var siteUrl = 'http://win-pfcp2dgt8di/sites/EnjoySharePoint/';
function CreateListItem() {
var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('MyTestList');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Title', 'My test item');
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {
alert('Item created: ' + oListItem.get_id());
}

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

You may like following SharePoint client object model tutorials:

Tags: jsom sharepoint 2013, jsom sharepoint 2013 examples, jsom sharepoint examples, jsom sharepoint online, jsom sharepoint 2013 get list items, get list items using jquery sharepoint 2013, jsom get all list items, sharepoint jsom, sharepoint javascript examples, ecmascript sharepoint 2013, ecmascript sharepoint 2013 get list items, ecmascript, ecmascript sharepoint 2013 examples, jsom sharepoint 2013 examples, ecmascript sharepoint 2010 examples

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 →