SharePoint crud operations using jsom (JavaScript Object Model)

This SharePoint jsom tutorial, we will do crud operations in SharePoint using jsom. Basically, we will do crud operations in SharePoint list 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.

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 List Item using jsom

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

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:

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.

<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:

sharepoint crud operations using jsom

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>
sharepoint online crud operations using jsom

Update SharePoint List Item using JSOM

Now, we will see how to update the 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:

sharepoint 2016 crud operations using jsom
sharepoint 2013 crud operations using jsom

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:

crud operations in sharepoint list using jsom
crud operations in sharepoint online using csom

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>
sharepoint crud operations using jsom

You may like following SharePoint jsom tutorials:

Through this SharePoint jsom tutorial, we learn how to do SharePoint crud operations using jsom in SharePoint Online or SharePoint 2013/2016.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

Krishna Vandanapu

I am Krishna.Vandanapu a SharePoint architect working in IT from last 13+ years, I worked in SharePoint 2007, 2010, 2013, 2016 and Office 365. I have extensive hands on experience in customizing SharePoint sites from end to end. Expertise in SharePoint migration tools like Sharegate, Doc Ave and Metalogix. Migrated SharePoint sites from SharePoint 2007 to 2010 and 2010 to 2013 several times seamlessly. Implementing CSOM with Microsoft best practices. Spent quality time in configuring SharePoint application services like User Profile, Search, Managed Meta data services etc. Now exploring SharePoint Framework and SharePoint 2019

  • Arundhiti says:

    Hi Krishna, I am new to the SharePoint Development and using SharePoint 2013. Recently got new projects about how to develop Employee Recognization portal in sharepoint. Not understanding which approach i need to choose and how to implement this? Could you help on this?

  • >