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

Here we will discuss how to use the javascript client object model in SharePoint 2013. In some other posts, we will see some jsom SharePoint 2013 examples. This is also known as ECMAScript Client Object Model (jsom) or JavaScript Client Object Model (JSOM) in SharePoint 2013. JSOM is used for accessing and manipulating SharePoint objects by using JavaScript (JavaScript) in an asynchronous manner.

If you are working with a SharePoint hosted add-in, then we have to use Jsom in SharePoint hosted Add-in. We can use jsom code inside a script editor web part, content editor web part, inside an HTML page or we can use in SharePoint Add-in.

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

We can access and manipulate SharePoint objects like Site, Web, List, ContentTypes, User Permission using ECMAScript client object model which works in asynchronous mode.

JavaScript Client Object Model (JSOM) in SharePoint

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 or also inside a content editor web part inside 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 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");

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: Create List using JSOM SharePoint Online

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 site in SharePoint 2013 or SharePoint online:

<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();
list = web.get_lists().add(listCreationInfo);


function () { alert("Site Created Successfully!!!") },
function () { alert("Request failed") }

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

Example: Add list item to SharePoint Online List using JSOM

Here we will try to create one list item from JSOM SharePoint 2013 or SharePoint online.

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

Example- Get Users from SharePoint Group using JavaScript Client Object Model (JSOM)

Here we will see how to retrieve users from SharePoint group using the JavaScript client object model. Put the below code in a Script editor web part inside a web part page in SharePoint. It will download all the users from a particular group.

<input type="button" id="btnUpdate" value="Export Site Users" onclick="GenerateReport();" />

<script type="text/javascript">
var siteUrl = 'http://win-pfcp2dgt8di/sites/EnjoySharePoint/';
var groups=['20'];
var gp_users=[];
var gp_name;

function GenerateReport()

function retrieveAllUsersInGroup(grp) {

var clientContext = new SP.ClientContext(siteUrl);
var collGroup = clientContext.get_web().get_siteGroups();
var oGroup = collGroup.getById(grp);
this.collUser = oGroup.get_users();

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

function onQuerySucceeded() {
var userInfo = ";
var userEnumerator = collUser.getEnumerator();
while (userEnumerator.moveNext()) {
var oUser = userEnumerator.get_current();

userInfo += '\nUser: ' + oUser.get_title() +
'\nID: ' + oUser.get_id() +
'\nEmail: ' + oUser.get_email() +
'\nLogin Name: ' + oUser.get_loginName();

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());


function generateexcel() {

for(z=0;z < gp_users.length;z++)
var table = document.getElementById('usrTable');
var row = table.insertRow(1);
var cell1 = row.insertCell(0);

cell1.innerHTML =gp_users[z]

var x = document.getElementById('usrTable').rows;
var xls = new ActiveXObject(“Excel.Application");
xls.visible = true
for (i = 0; i < x.length; i++) {
var y = x[i].cells;
for (j = 0; j < y.length; j++) {
xls.cells(i + 1, j + 1).value = y[j].innerText;
<table id="usrTable" border="1″ style="display:none;">
<tr width='250px'>

Get current logged in user name in SharePoint online using JSOM

Now, we will see how to get the current logged in username in SharePoint online using JavaScript object model (jsom).

To retrieve the username, insert the below code inside a script editor web part.Here I am displaying the username on a button click.

<script type="text/javascript">
function GetCurrentUserName()

<input type='button' value='Submit' onclick="GetCurrentUserName();"/>

Fetch List view using JavaScript object model (jsom) in SharePoint Online/2013/2016

Now, we will see how to fetch list view data using the JavaScript object model (jsom) in SharePoint 2013/2016 or SharePoint Online.

Below is the full jsom code to fetch list view using jsom in SharePoint. You can add the code in a script editor web part in a SharePoint web part page.

Here I have a list as Testing123 which has a view as All Items.

<script src=""></script>

<script language="javascript" type="text/javascript">

function getMyList() {
var ctx = SP.ClientContext.get_current();
var web = ctx.get_web();
var list = web.get_lists().getByTitle("Testing123");
var views = list.get_views();
var view = views.getByTitle("All Items");
myview = view.renderAsHtml();
ctx.executeQueryAsync(OnSuccess, OnFailure);

function OnSuccess() {
myview = myview.get_value().toString();
function OnFailure() {

<div id='testingdata'></div>

This is how we can fetch list view using the JavaScript object model (jsom) in SharePoint Online/2013/2016.

You may like following jsom SharePoint examples:

Hope this SharePoint jsom tutorial, helps to learn how to use jsom in SharePoint 2013/2016/Online. Also, we saw one example, how to insert an item to the SharePoint list using jsom.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • >