What is JavaScript Object Model (JSOM) in SharePoint Online

This tutorial, we will discuss what is JavaScript object model (jsom) in SharePoint Online or SharePoint 2013/2016.


We will discuss various SharePoint client object models and how to use jsom in SharePoint Online. How to write jsom code in the content editor web part and script editor web part in SharePoint online?

In jsom SharePoint Online example, we will retrieve web site details like web title, description, templates, etc.


SharePoint Online tutorial contents:

  • SharePoint Client Object Model

  • What is JavaScript Client Object Model (JSOM) in SharePoint

  • How to use JSOM in SharePoint Online?

  • Jsom SharePoint Code in Content Editor web part

  • Add files into a content editor web part

  • Jsom Code in Script Editor web part

  • Call jsom code in Button click in SharePoint Online

  • Call jsom code in Page Load in SharePoint Online:


SharePoint Client Object Model

We can use client object model code to retrieve, update, insert and manage data in SharePoint 2016/2013 or SharePoint online.


SharePoint provides various client object model like below:

  • Managed Client Object Model

  • JavaScript Client Object Model

  • Rest API for SharePoint

  • Silverlight client object model

  • Windows Phone Assemblies

Microsoft provides various dlls or js files to work with SharePoint. To work with the managed client object model we have to use two ddls which can be found in the ISAPI folder.

  • Microsoft.SharePoint.Client.dll

  • Microsoft.SharePoint.Client.Runtime.dll

To work with Silverlight client object model, we have to use below two dlls which are found in LAYOUTS\ClientBin folder.

  • Microsoft.SharePoint.Client.Silverlight.dll

  • Microsoft.SharePoint.Client.Silverlight.Runtime.dll

Similarly to work with JavaScript Object model we have to use SP.js file which is located in the LAYOUTS folder.


While each of the models provides a different programming interface, each interacts with SharePoint through a Windows Communication Foundation (WCF) service named Client.svc, which is located in the ISAPI directory.

jsom sharepoint online / jsom sharepoint 2013 tutorial


Developers write client-side code using the object model, but the operations are batched and sent as a single Extensible Markup Language (XML) request to the Client.svc service. When the XML request is received, the Client.svc service makes calls to the server-side object model on behalf of the client. The results of the server-side calls are then sent back to the calling client in the form of a JavaScript Object Notation (JSON) object.


What is JavaScript Client Object Model (JSOM) in SharePoint

JavaScript Object Model(JSOM) is a SharePoint Online client object model which is nothing but a set of classes and libraries. We can use those classes and objects to work with SharePoint data.

To work with jsom, SP.js file should already be loaded on the page.


How to use JSOM in SharePoint Online?

Jsom SharePoint code, we can use in:

  • Content editor web part

  • Script editor web part

  • SharePoint hosted Add-in

In this post, we will discuss how to use jsom code inside a content editor web part and script editor web part.


Jsom SharePoint Code in Content Editor web part

It is not recommended to write your HTML or CSS or jsom code directly inside the content editor web part. So first create an HTML File that will contain your HTML code and create .js file where we can write our JSOM code.

For creating these both Files, you can use Notepad++, Visual Studio 2017 or you can use visual studio code also. Let’s take an example, Create an HTML file and add some code of paragraph or content. Then will retrieve the data using JSOM which is present inside the JS file.


Here the HTML File Code is given below-


HTML code:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/SpProperties.js"></script>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>Retrive Web Site Details</h2>
Site Title: <p id="pTitle"></p>
Site description: <p id="pdescript"></p>
Site template: <p id="ptemp"></p>
</body>
</html>

In this HTML Code, I added some content as paragraphs like Site Title, Site description and also Site template.


For each paragraph, we have to give different “id” whereas I have given for “Site Title” as “pTitle” and so on. So that by using their specific “id”, we can retrieve the data by using JSOM Code which is present below-

JS Code:

// JavaScript source code
ExecuteOrDelayUntilScriptLoaded(clickMethod, 'sp.js');
$(document).ready(function () {
});
var site;
function clickMethod() {
var clientContext = new SP.ClientContext.get_current();
site = clientContext.get_web();
clientContext.load(site);
clientContext.executeQueryAsync(success, failure);
}
function success() {
$("#pTitle").html(site.get_title());
$("#pdescript").html(site.get_description());
$("#ptemp").html(site.get_webTemplate());
}
function failure() {
alert("Failure!");
}

The server-side object model or a client-side object model requires a starting point to work with SharePoint objects. The starting point is known as context.


The context object provides an entry point into the associated application programming interface (API) that can be used to gain access to other objects. Once you have access to the objects, you may interact with the scalar properties of the object like Name, Title, Url, etc. freely.


We can use below code to retrieve the current context.

var clientContext = SP.ClientContext.get_current();

The SP.ClientContext class in the JavaScript client object model inherits from the SP.Client ContextRuntime class.


The ClientContextRuntime class provides two methods for loading objects: Load and LoadQuery.

The Load method specifies an object or collection to retrieve, while the LoadQuery method allows you to return collections of objects using a LINQ query.


Executing the Load or LoadQuery method does not cause the client to communicate with the server.

Instead, it adds the load operation to a batch that will be executed on the server. In fact, you may execute multiple load methods (as well as other operations) before calling the server.


Each operation is batched, waiting for your code to initiate communication with the server. To execute the batched operations, your code must call the ExecuteQuery or ExecuteQueryAsync method.


The ExecuteQuery method creates an XML request and passes it to the Client.svc service. The client then waits synchronously while the batch is executed and the JSON results are returned.


The ExecuteQueryAsync method, which is used in the Silverlight client object model, sends the XML request to the server, but it returns immediately. Designated success and failure callback methods receive a notification when the batch operation is complete. Here, by using this JSOM Code as [“$(“#pTitle”).html(site.get_title());” ], we can retrieve the Site Title data.


Similarly for other content named “Site description” and as well as “Site template”, we can use the same JSOM Code by using their specific “id”. So by using this JSOM code, we can retrieve the data from HTML File.


Add files into a content editor web part

To run this HTML and JS Code in “Content Editor Web Part”, First we have to upload that two files(HTML File, JS File) in the “Site Assets”.


Once all the files are uploaded to the Site Assets library. Then create a web part page and then edit the web part page and click on add a web part, to add the content editor web part.


Edit the page and then click on “Add a web part” link, Then it will open the Web part categories in the ribbon. From the web part categories, select Media and Content and then from the Parts select Content Editor.


Once the content editor web part added, edit the web part like below:

sharepoint javascript examples / jsom sharepoint 2013 examples


Then in the web part properties dialog box, give your HTML File link path which you have uploaded inside the “Site Assets”. Then click on “Apply” and “Ok“.

jsom sharepoint 2013 examples


Now stop the editing, It will show you the final result as like given below screenshot.


jsom in sharepoint / jsom sharepoint 2013 tutorial / jsom sharepoint 2013 examples


Here we can see the “Site Title”, “Site description” and “Site template”.


Jsom Code in Script Editor web part

SharePoint 2013 or SharePoint online provides the script editor web part where we can directly write our js or Html code.


To add a script editor web part, open the edit the page and then edit the web part page. Then click on the Add a web part link.


Then it will open the Web part categories in the ribbon. From the web part categories, select Media and Content and then from the Parts select Script Editor web part and click on Add as shown in the fig below:

sharepoint online jsom


Once the web part added successfully click on Edit Snippet as shown in the fig below, then in the Embed section put your JavaScript code.

javascript object model tutorial


You can just add the below code to test if your javascript is working fine or not.

<input type='button' value='Load JavaScript' onclick="clickMethod();"/>
<br />
<script language="javascript" type="text/javascript">
function clickMethod() {
alert('hello');
}
</script>

javascript object model in sharepoint online examples


Save the page and click on Load JavaScript, it should show you the alert which means it is working fine.


Call jsom code in Button click in SharePoint Online

We can use jQuery to call our jsom code in SharePoint online on button click.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnClick").click(function(){
yFunction();
});
});
function myFunction()
{
//Your jsom code will be here
var clientContext = new SP.ClientContext.get_current();
site=clientContext.get_web();
clientContext.load(site);
clientContext.executeQueryAsync(success, failure);
}
function success() {
alert(site.get_title());
}
function failure() {
alert("Failure!");
}
</script>
<input type='button' id='btnClick' value='Get Site Title'/>


Call jsom code in Page Load in SharePoint Online:

SharePoint provides ExecuteOrDelayUntilScriptLoaded() method to call the jsom code after SP.js loaded successfully. Below is how we can a method on the page/form load after sp.js loaded successfully.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
ExecuteOrDelayUntilScriptLoaded(myFunction,'sp.js');
function myFunction()
{
//Your jsom code will be here
var clientContext = new SP.ClientContext.get_current();
site=clientContext.get_web();
clientContext.load(site);
clientContext.executeQueryAsync(success, failure);
}
function success() {
alert(site.get_title());
}
function failure() {
alert("Failure!");
}
</script>

Conclusion

In this SharePoint tutorial we learned”

  • SharePoint Client Object Model

  • What is JavaScript Client Object Model (JSOM) in SharePoint

  • How to use JSOM in SharePoint Online?

  • Jsom SharePoint Code in Content Editor web part

  • Add files into a content editor web part

  • Jsom Code in Script Editor web part

  • How to call jsom code in Button click in SharePoint Online

  • How to call jsom code in Page Load in SharePoint Online

Tags: jsom sharepoint, jsom in sharepoint, jsom sharepoint 2013, sharepoint javascript examples, jsom sharepoint 2013 examples, jsom sharepoint 2013 get list items, sharepoint 2013 jsom, sharepoint 2016 jsom, sharepoint online jsom, sharepoint jsom example, javascript object model tutorial, javascript object model in sharepoint 2013 examples, javascript object model in sharepoint 2013, javascript object model in sharepoint online examples, javascript object model sharepoint, jsom sharepoint 2013 tutorial


Source: Paper.li