CRUD Operation On List Items Using JSOM In SharePoint 2013 – Part 2

Posted: January 22, 2017 in SharePoint2013

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. I have explored the CRUD operation using Web Service in my previous article.

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

SharePoint

Retrieve the list items

Retrieve the list items

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. function onSucceededCallback(sender, args)
  13. {
  14.     var enumerator = returnedItems.getEnumerator();
  15.     //Formulate HTML from the list items 
  16.     var MainResult = ‘Items in the Divisions list: <br><br>’;
  17.     //Loop through all the items 
  18.     while (enumerator.moveNext())
  19.     {
  20.         var listItem = enumerator.get_current();
  21.         var companyName = listItem.get_item(“Company “);
  22.                 var Industry = listItem.get_item(“Industry “);
  23.                         MainResult += MainResult + companyName + “-“ + Industry + “\n”;
  24.                     }
  25.                     //Display the formulated HTML in the displayDiv element 
  26.                 displayDiv.innerHTML = MainResult;
  27.             }
  28.             //This function fires when the query fails 
  29.         function onFailedCallback(sender, args)
  30.         {
  31.             //Formulate HTML to display details of the error 
  32.             var markup = ‘<p>The request failed: <br>’;
  33.             markup += ‘Message: ‘ + args.get_message() + ‘<br>’;
  34.             //Display the details 
  35.             displayDiv.innerHTML = markup;
  36.         }
  37.    }
  38. }

Create list item

Create list item

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. function AddListItemSucceeded()
  20. {
  21.     retriveListItem();
  22. }
  23. function AddListItemFailed(sender, args)
  24. {
  25.     alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
  26. }

Update list item

Update list item

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.     Var industryVal = $(“#Industry”).val();
  9.     var Company = $(“#Company”).val();
  10.     lstObjectItem.set_item(‘Industry’, “+industryVal + ”);
  11.     lstObjectItem.set_item(‘Company’, ”+Company + ”);
  12.     lstObjectItem.update();
  13.         context.executeQueryAsync(Function.createDelegate(thisthis.onSuccess), Function.createDelegate(thisthis.onFailure));
  14. }
  15. function onSuccess()
  16. {
  17.     retriveListItem();
  18. }
  19. function onFailure(sender, args)
  20. {
  21.     alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
  22. }

Delete list item

Delete list item

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. function DeleteItemSucceeded()
  14. {
  15.     retriveListItem();
  16. }
  17. function DeleteItemFailed(sender, args)
  18. {
  19.     alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
  20. }

Summary

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s