SharePoint crud operations using jsom (JavaScript Object Model)

In this SharePoint jsom tutorial, we will do crud operations in SharePoint using jsom. Basically, we will do sharepoint crud operations using jsom using jsom (JavaScript Object Model).

We will see how to do insert, update, read, and delete list items using jsom in SharePoint Online or SharePoint 2013/2016.

From SharePoint 2013 every client is looking for quick response time than looking at browser spinning icon for minutes together. Microsoft has improved javascript abilities to communicate and perform all the basic Create Read Update Delete (CRUD) operations in eye blinking time without postbacks and browser spinning steps.

SharePoint crud operations using jsom

In this article, I would like to walk you through all the basic operations and the related script blocks using ECMA Script Object Model (JSOM) in SharePoint Online/2013/2016.

For a more interactive way of learning, I am implementing a small demo project to main Car Inventory.

Before doing this demo make sure to do the below things:

• Create a team site/site collection in SharePoint
• Create a SharePoint custom list with the name “CarInventory” which will have two columns as Title and CompanyName.

Insert data in SharePoint list using jsom

Now, we will see how to create a list item using jsom (JavaScript object model) into the SharePoint list. As part of our mini-project let us create a code block to add new car details. Here is the code sample:

Code block:

<script language="javascript" type="text/javascript">
var siteUrl;
function addLstItem()
{
    siteUrl = document.getElementById("strsiteURL").value;
    var objClntCntx = new SP.ClientContext(siteUrl);
    var objList = objClntCntx.get_web().get_lists().getByTitle('CarInventory');
    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.objListItem = objList.addItem(itemCreateInfo);
    objListItem.set_item('Title', document.getElementById("strTitle").value);
    objListItem.set_item('CompanyName', document.getElementById("strBody").value);
    objListItem.update();
    objClntCntx.load(objListItem);
    objClntCntx.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    return false;
}
function onQuerySucceeded() {
    alert('Item created Successfully, With the ID:: ' + objListItem.get_id())
}
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace())
}
</script>

Output for the above code block in our project will be as follows:

This is how we can add an item to SharePoint list using jsom as a part of the SharePoint crud operations using jsom.

Read SharePoint list items using JSOM

Now, we will see how to read SharePoint list items using jsom in SharePoint Online or SharePoint 2013/2016/2019. The code to get sharepoint list items using jsom will work in On-premise as well as online version.

<script language="javascript" type="text/javascript">
var siteUrl;
function getLstItem()
{
    siteUrl = document.getElementById("strsiteURL").value;
    var objClntCntx = new SP.ClientContext(siteUrl);
    var objList = objClntCntx.get_web().get_lists().getByTitle('CarInventory');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/><Value Type=\'Number\'>'+document.getElementById("strItemID").value+'</Value></Eq></Where></Query><RowLimit>10</RowLimit></View>');
    this.collListItem = objList.getItems(camlQuery);
    objClntCntx.load(collListItem);
    objClntCntx.executeQueryAsync(Function.createDelegate(this, this.onGetQuerySucceeded), Function.createDelegate(this, this.onGetQueryFailed));
    return false;
}
function onGetQuerySucceeded(sender, args) {
    var listItemInfo = ";
    var listItemEnumerator = collListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var objListItem = listItemEnumerator.get_current();
        listItemInfo += '\nID: ' + objListItem.get_id() +
            '\nTitle: ' + objListItem.get_item('Title')
             + '\nBody: ' + objListItem.get_item('CompanyName');
        document.getElementById("strTitle").value = objListItem.get_item('Title');
        document.getElementById("strBody").value = objListItem.get_item('CompanyName');
    }
    //alert(listItemInfo.toString());
}
function onGetQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

Output for Read List Item:

UI Code block:

<table class='tblStyle'>
<tr class='trstyle'>
  <td colspan='2′ style='text-align:center'><h1>CRUD operations with ECMA scripting</h1></td>
</tr >
<tr class='trstyle'>
  <td class='tdstyle'>Enter the site URL</td>
  <td ><input type="text" ID="strsiteURL" class='tdTxtstyle'/></td>
</tr>
<tr class='trstyle'>
  <td class='tdstyle' >Car Name</td>
  <td ><input type="text" ID="strTitle" class='tdTxtstyle'/></td>
</tr>
<tr class='trstyle'>
  <td class='tdstyle' >Company Name</td>
  <td ><input type="text" ID="strBody" class='tdTxtstyle'/></td>
</tr>
<tr class='trstyle'>
    <td colspan='2′ class='tdstyle'>
        Car Inventory ID: <input type="text" ID="strItemID" class='tdTxtstyle' style='font-size:1em;width: 150px;margin-left:72px;'/>
        <button class="btn" onclick="return getLstItem()"><i class="fa fa-bars"></i> <b>Get Item</b></button>
        <button class="btn" onclick="return updLstItem()"><i class="fa fa-bars"></i> <b>Update Item</b></button>
    </td>
</tr >
<tr class='trstyle'>
  <td colspan='2′ style='text-align:center'>
      <button class="btn" onclick="return addLstItem()"> <b>+ Add Item</b></button>
      <button class="btn"><i class="fa fa-close"></i> <b>Clear</b></button>
      <button class="btn" onclick="return deleteLstItem()"><i class="fa fa-trash"></i> <b>Delete</b></button>
  </td>
</tr>
</table>

Here, we saw how to get sharepoint list data using jsom (JavaScript object model).

Update SharePoint List Item using JSOM

Now, we will see how to update SharePoint list item using jsom in SharePoint Online or SharePoint 2013/2016.

Let us try to update the inventory. In this process, we need to perform 2 operations Read and Update.

To update the inventory from UI I am reading the Inventory ID and reading the car details and then Updating those details.

Update Code block:

<script language="javascript" type="text/javascript">
var siteUrl;
function updLstItem() {
    siteUrl = document.getElementById("strsiteURL").value;
    var objClntCntx = new SP.ClientContext(siteUrl);
    var objList = objClntCntx.get_web().get_lists().getByTitle('CarInventory');
    this.objListItem = objList.getItemById(document.getElementById("strItemID").value);
    objListItem.set_item('Title',document.getElementById("strTitle").value);
    objListItem.set_item('CompanyName', document.getElementById("strBody").value);
    objListItem.update();
    objClntCntx.executeQueryAsync(Function.createDelegate(this, this.onUpdateQuerySucceeded), Function.createDelegate(this, this.onUpdateQueryFailed));
    return false;
}
function onUpdateQuerySucceeded() {
    alert('Item updated Successfully!!!')
}
function onUpdateQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace())
}
</script>

For ease of access I am providing the Read Code Block again:

<script language="javascript" type="text/javascript">
var siteUrl;
function getLstItem()
{
    siteUrl = document.getElementById("strsiteURL").value;
    var objClntCntx = new SP.ClientContext(siteUrl);
    var objList = objClntCntx.get_web().get_lists().getByTitle('CarInventory');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/><Value Type=\'Number\'>'+document.getElementById("strItemID").value+'</Value></Eq></Where></Query><RowLimit>10</RowLimit></View>');
    this.collListItem = objList.getItems(camlQuery);
    objClntCntx.load(collListItem);
    objClntCntx.executeQueryAsync(Function.createDelegate(this, this.onGetQuerySucceeded), Function.createDelegate(this, this.onGetQueryFailed));
    return false;
}
function onGetQuerySucceeded(sender, args) {
    var listItemInfo = ";
    var listItemEnumerator = collListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var objListItem = listItemEnumerator.get_current();
        listItemInfo += '\nID: ' + objListItem.get_id() +
            '\nTitle: ' + objListItem.get_item('Title')
             + '\nBody: ' + objListItem.get_item('CompanyName');
        document.getElementById("strTitle").value = objListItem.get_item('Title');
        document.getElementById("strBody").value = objListItem.get_item('CompanyName');
    }
    //alert(listItemInfo.toString());
}
function onGetQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

Output for Update:

The above code we can use to update sharepoint list item using javascript.

Bulk update sharepoint list items programmatically using jsom

Let us see how to bulk update sharepoint list items programmatically.

Recently we got a requirement to update the status in bulk, like if the user selected 4 items from the SharePoint list and click on Update, then the Status should change to a particular value at a time.

Put the below code inside a script editor web part in the list page basically in the all items view page, where we will have the checkbox to select multiple items.

Once the user selected we will be able to identify which items have been checked by using the below code:

var selectedItems = SP.ListOperation.Selection.getSelectedItems(context);

And then we will update the status.

<input type="button" id="btnUpdate" value="Update Item Status" onclick="UpdateItemStatus();" />

<script>
function UpdateItemStatus()
{
var context = SP.ClientContext.get_current();
var selectedItems = SP.ListOperation.Selection.getSelectedItems(context);
var list = context.get_web().get_lists().getByTitle("MyTestList");
var item;
for (item in selectedItems)
{
var mySelItem = list.getItemById(selectedItems[item].id);
mySelItem.set_item("Status","Approved");
mySelItem.update();
context.executeQueryAsync(Function.createDelegate(this, this.onSucceeded), Function.createDelegate(this, this.onFailed));
}
}

function onSucceeded() {
alert('Items Get updated!');
}

function onFailed(sender, args) {
alert('Some error occured');
}
</script>

This is how to update bulk items using javascript in SharePoint Online or SharePoint 2013/2016/2019.

Delete List Item using JSOM in SharePoint

Now, we will see how to delete list item using jsom in SharePoint Online or SharePoint 2013/2016.

By now we have learned the adding and updating car details, now the last operation is deleted.

Code block for delete:

<script language="javascript" type="text/javascript">
var siteUrl;
function deleteLstItem() {
    if (confirm("Do you really want to Delete!"))
    {
        this.itemId = document.getElementById("strItemID").value;
        siteUrl = document.getElementById("strsiteURL").value;
        var objClntCntx = new SP.ClientContext(siteUrl);
        var objList = objClntCntx.get_web().get_lists().getByTitle('CarInventory');
        this.objListItem = objList.getItemById(itemId);
        objListItem.deleteObject();
        objClntCntx.executeQueryAsync(Function.createDelegate(this, this.onDelQuerySucceeded), Function.createDelegate(this, this.onDelQueryFailed));
    }
    return false;
}
function onDelQuerySucceeded() {
    alert('Item deleted: ' + itemId);
    document.getElementById("strTitle").value = "";
    document.getElementById("strBody").value = "";
    document.getElementById("strItemID").value = "";
}
function onDelQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

Output:

UI Code block:

<table class='tblStyle'>
<tr class='trstyle'>
  <td colspan='2′ style='text-align:center'><h1>CRUD operations with ECMA scripting</h1></td>
</tr >
<tr class='trstyle'>
  <td class='tdstyle'>Enter the site URL</td>
  <td ><input type="text" ID="strsiteURL" class='tdTxtstyle'/></td>
</tr>
<tr class='trstyle'>
  <td class='tdstyle' >Car Name</td>
  <td ><input type="text" ID="strTitle" class='tdTxtstyle'/></td>
</tr>
<tr class='trstyle'>
  <td class='tdstyle' >Company Name</td>
  <td ><input type="text" ID="strBody" class='tdTxtstyle'/></td>
</tr>
<tr class='trstyle'>
    <td colspan='2′ class='tdstyle'>
        Car Inventory ID: <input type="text" ID="strItemID" class='tdTxtstyle' style='font-size:1em;width: 150px;margin-left:72px;'/>
        <button class="btn" onclick="return getLstItem()"><i class="fa fa-bars"></i> <b>Get Item</b></button>
        <button class="btn" onclick="return updLstItem()"><i class="fa fa-bars"></i> <b>Update Item</b></button>
    </td>
</tr >
<tr class='trstyle'>
  <td colspan='2′ style='text-align:center'>
      <button class="btn" onclick="return addLstItem()"> <b>+ Add Item</b></button>
      <button class="btn"><i class="fa fa-close"></i> <b>Clear</b></button>
      <button class="btn" onclick="return deleteLstItem()"><i class="fa fa-trash"></i> <b>Delete</b></button>
  </td>
</tr>
</table>

This is how we can delete sharepoint list item using jsom as a part of the sharepoint online crud operations using jsom

You may like the following SharePoint jsom tutorials:

• Create, Update, Delete and Display List items using JavaScript Object Model (JSOM) in SharePoint
• How to get the total number of users from SharePoint group using JSOM
• Uncaught TypeError: Cannot read property get_current of undefined error SharePoint Online jsom
• SharePoint CSOM vs JSOM vs SSOM vs REST
• SharePoint get current user id, name, email, display name programmatically
• Your changes could not be saved because this SharePoint web site has exceeded the storage quota limit

Through this SharePoint jsom tutorial, we learn how to do SharePoint crud operations using jsom in SharePoint Online or SharePoint 2013/2016/2019. We saw the below examples:

• Insert data in SharePoint list using jsom
• Get sharepoint list items using jsom
• Update SharePoint List Item using JSOM
• Delete List Item using JSOM in SharePoint