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

CRUD Operations with ECMA in SharePoint 2016

Objective:
In previous article CRUD Operations with ECMA or jsom in SharePoint 2013 and SharePoint 2016 Part-1 we learned how to create and read the list item.
In this article I would like to walk you through update and delete related script blocks.

Update Car Inventory:
With the help of previous article we have created a new item in the list, let us try to update the inventory. In this process we need to preform 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:
CRUD Operations with ECMA in SharePoint 2013 and 2016
CRUD Operations with ECMA in SharePoint 2013 and 2016
CRUD Operations with ECMA in SharePoint 2013
CRUD Operations with ECMA in SharePoint 2013
Delete Inventory:
By now we have learned the adding and updating a car details, now the last operation is delete.



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

Hope this helps happy development in SharePoint !!!


You May Also like the Following SharePoint Online Tutorials:

About Krishna Vandanapu

I am Krishna.Vandanapu a SharePoint architect working in IT from last 12 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

View all posts by Krishna Vandanapu →