Share via

SharePoint 2013 : List Item CRUD Operation using JSOM (Part 2)

  • Article

Introduction

The goal of this article is to provide how to perform basic create, read, update, and delete (CRUD) operations on lists and list items with the JSOM. We have explored the CRUD operation using Web Service in my previous article.

Now, we will demo all the operations on list items, including retrieve, create, update and delete on list items.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/sagarp/crud-operation-on-list-items-using-jsomin-sharepoint-2013/Images/SharePoint.jpg 

Retrieve the list items

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/sagarp/crud-operation-on-list-items-using-jsomin-sharepoint-2013/Images/addingItem.png

Here is the main code in detail:

  1. function retriveListItem() 
  2. { 
  3.  //Get the current context 
  4.  var context = new SP.ClientContext(); 
  5.  var list = context.get_web().get_lists().getByTitle(‘companyInfo’); 
  6.  var caml = new SP.CamlQuery(); 
  7.  caml.set_viewXml("<View><Query><OrderBy><FieldRef Name=’Company’ Ascending='TRUE' /></OrderBy></Query></View>"); 
  8.  returnedItems = list.getItems(caml); 
  9.  context.load(returnedItems); 
  10.  context.executeQueryAsync(onSucceededCallback, onFailedCallback); 
  11. } 
  12.  
  13. function onSucceededCallback(sender, args) 
  14. { 
  15.  var enumerator = returnedItems.getEnumerator(); 
  16.  //Formulate HTML from the list items 
  17.  var MainResult = 'Items in the Divisions list: <br><br>'; 
  18.  //Loop through all the items 
  19.  while (enumerator.moveNext()) 
  20.  { 
  21.  var listItem = enumerator.get_current(); 
  22.  var companyName = listItem.get_item(“Company "); 
  23.   var Industry = listItem.get_item(“Industry "); 
  24.    MainResult += MainResult + companyName + "-" + Industry + "\n"; 
  25.    } 
  26.    //Display the formulated HTML in the displayDiv element 
  27.   displayDiv.innerHTML = MainResult; 
  28.   } 
  29.   //This function fires when the query fails 
  30.  function onFailedCallback(sender, args) 
  31.  { 
  32.   //Formulate HTML to display details of the error 
  33.   var markup = '<p>The request failed: <br>'; 
  34.   markup += 'Message: ' + args.get_message() + '<br>'; 
  35.   //Display the details 
  36.   displayDiv.innerHTML = markup; 
  37.  } 
  38.  }
  39. } 

Create list item

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/sagarp/crud-operation-on-list-items-using-jsomin-sharepoint-2013/Images/Create%20list%20items.jpg

Here is the main code in detail:

  1. function AddListItem() 
  2. { 
  3.  var listTitle = "companyInfo"; 
  4.  //Get the current client context 
  5.  context = SP.ClientContext.get_current(); 
  6.  var airportList = context.get_web().get_lists().getByTitle(listTitle); 
  7.  //Create a new record 
  8.  var listItemCreationInformation = new SP.ListItemCreationInformation(); 
  9.  var listItem = airportList.addItem(listItemCreationInformation); 
  10.  //Set the values 
  11.  Var industryVal = $("#Industry").val(); 
  12.  var Company = $("#Company").val(); 
  13.  listItem.set_item('Industry', +industryVal); 
  14.  listItem.set_item('Company', +new item); 
  15.  listItem.update(); 
  16.  context.load(listItem); 
  17.  context.executeQueryAsync(AddListItemSucceeded, AddListItemFailed); 
  18. } 
  19.  
  20. function AddListItemSucceeded() 
  21. { 
  22.  retriveListItem(); 
  23. } 
  24.  
  25. function AddListItemFailed(sender, args) 
  26. { 
  27.  alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); 
  28. } 

Update list item

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/sagarp/crud-operation-on-list-items-using-jsomin-sharepoint-2013/Images/Update%20list%20items.jpg

Here is the main code in detail:

  1. function updateListItem() 
  2. { 
  3.  var ListName = "companyInfo"; 
  4.  var context = new SP.ClientContext.get_current(); // the current context is taken by default here 
  5.  //you can also create a particular site context as follows 
  6.  var lstObject = context.get_web().get_lists().getByTitle(ListName); 
  7.  this.lstObjectItem = lstObject.getItemById(1); 
  8.  
  9.  Var industryVal = $("#Industry").val(); 
  10.  var Company = $("#Company").val(); 
  11.  lstObjectItem.set_item('Industry', “+industryVal + ”); 
  12.  lstObjectItem.set_item('Company', ”+Company + ”); 
  13.  lstObjectItem.update(); 
  14.       context.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFailure));  
  15. } 
  16.  
  17. function onSuccess() 
  18. { 
  19.  retriveListItem(); 
  20. } 
  21.  
  22. function onFailure(sender, args) 
  23. { 
  24.  alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); 
  25. } 

Delete list item

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/sagarp/crud-operation-on-list-items-using-jsomin-sharepoint-2013/Images/Delete%20list%20items.jpg

Here is the main code in detail:

  1. function deleteListItem() 
  2. { 
  3.  var listTitle = "companyInfo"; 
  4.  //get the current client context 
  5.  context = SP.ClientContext.get_current(); 
  6.  var airportList = context.get_web().get_lists().getByTitle(listTitle); 
  7.  //get the list item to delete 
  8.  var listItem = airportList.getItemById(1); 
  9.  //delete the list item 
  10.  listItem.deleteObject(); 
  11.  context.executeQueryAsync(DeleteItemSucceeded, DeleteItemFailed); 
  12. } 
  13.  
  14. function DeleteItemSucceeded() 
  15. { 
  16.  retriveListItem(); 
  17. } 
  18.  
  19. function DeleteItemFailed(sender, args) 
  20. { 
  21.  alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); 
  22. } 

Summary

In this article we explored SharePoint JSOM for CRUD operations on list items level. Hope it will be helpful.