CRUD Operations with ECMA or jsom in SharePoint 2013 and SharePoint 2016 Part-1

CRUD Operations with ECMA in SharePoint 2013 and 2016

Objective:
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 post backs 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). For more interactive way of learning I am implementing a small demo project to main Car Inventory.
Prerequisites:
-> Create a team site / site collection
-> Create a custom list with the name “CarInventory”
-> Ensure the below 2 columns in that list
-> Title
-> CompanyName

Creating List Item using jsom:

As part of our mini project let us create a code block to add a 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:



CRUD Operations with ECMA in SharePoint 2013 and 2016
CRUD Operations with ECMA in SharePoint 2013 and 2016

Read list items using JSOM:

<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:
CRUD Operations with ECMA in SharePoint 2013
CRUD Operations with ECMA in SharePoint 2013



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>
CRUD Operations with ECMA in SharePoint 2016
CRUD Operations with ECMA in SharePoint 2016

Stay tuned we will learn how to update and delete in next article Part-2.

Hope this helps happy development in SharePoint !!!

Similar SharePoint 2013 Tutorials


Leave a Reply