CRUD Operations in SharePoint using REST API – Part III

Applicable to: SharePoint 2013, SharePoint 2016, SharePoint Online

In the previous blogs, we had a look at the “Create” and “Read” operations in this series of CRUD Operations in SharePoint using REST API. In this blog, we will explain the “Update” operations.

As before, we start with the assumption that the list in picture “Employee” has some entries in it. We will be reading the list based on the ID of the list item – you enter the ID and get the corresponding list item details in HTML table. Next you modify the values you wish to change and the “post” the changes back into the list.

 REST Operations in SharePoint – UPDATE

Step1: Create a custom list “Employee” as per the schema below. Capture the generated internal names of the columns – you will need it later on.

List Name: Employee

This is how the list looks like in my case.

Step2:  Create a webpart page, and insert the list “Employee” in any of the webpart zones.

Step 3:  Next step is the addition of the code. The code can be downloaded from – here. In our case, we will be creating a single page HTML file (i.e. the style, scripts and the body elements will be in a single page, with internal reference to jQuery.min.js file). The HTML can be added to our page in either of the below ways. For this scenario, we have added a Content Editor Web Part (CEWP) in any of the webpart zones and then –

• Insert the code directly in the CEWP.
• Upload the HTML and JS file to any document library, and then insert the link to the HTML file in the Content Link as shown below –

Step 4: Enter the ID you wish to update for, and click on “Read” button first. The result will be displayed.

Step 5: Now make the necessary changes, and click on “Update” button. The change in the list item can be observed now. This concludes the step. Have a look at below Step 6 to understand the code.

Explanatory Step: This step gives a description of the REST API code used in this scenario. The code used is –

var listName = "Employee";
var itemType = GetItemTypeForListName(listName);

function GetItemTypeForListName(name)
{
 return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}

function UpdateListItem()
{
     var myID = $("#numID").val();
     var name = $("#txtName").val();
     var employeeID = $("#txtEmployeeID").val();
     var department = $("#slctDepartment").val();
     var city = $("#txtCity").val();
     var contactNumber = $("#txtContactNumber").val();         

     var item = {
          "__metadata": { "type": itemType },
          "Title": name,
          "Employee_x0020_ID": employeeID,
          "Department": department,                   
          "City": city,
          "Contact_x0020_Number": contactNumber
        };

       $.ajax({
          url:  _spPageContextInfo.webAbsoluteUrl  + "/_api/web/lists/getbytitle('" + listName + "')/items(" + myID + ")",
          type: "POST",
          contentType: "application/json;odata=verbose",
          data: JSON.stringify(item),
          headers: {
              "Accept": "application/json;odata=verbose",
              "X-RequestDigest": $("#__REQUESTDIGEST").val(),
              "IF-MATCH": "*",
              "X-HTTP-Method":"MERGE",
           },
          success: function (data) {
               alert("success");
          },
          error: function (data) {
               alert("failed");
          }
        });
 }

The function GetItemTypeForListName() returns a string, which is used in the metadata of the list item type that is to be added. The returned string in this particular case is “SP.DataEmployeeListItem”, which is ultimately used in the code line –

__metadata: {“type” : itemType }

We have added an X-HTTP-Method header with a value of MERGE, which we later target as “POST”

 "X-HTTP-Method":"MERGE",

Finally, as our task here is to update data in SharePoint entity (list in this case), the operation is of type/method – “POST”

type: "POST",

The success block alerts a “success” string, after which a page refresh takes place, and the updated data can be seen in the list item.

The next blog outlines the “Delete” operation of REST API in SharePoint.

Download the source code

Happy reading!

 8,316 total views,  3 views today