CRUD Operations In SharePoint Using REST API - Update Operations

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, let us 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” 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

Column Name	Internal Name	Type
Name	Title	Single line of text
Employee ID	Employee_x0020_ID	Number
Department	Department	Single line of text
City	City	Single line of text
Contact Number	Contact_x0020_Number	Single line of text

This is how the list looks like in my case.

Step2

Create a web part page, and insert the list “Employee” in any of the web part 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 on a single page, with an 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 web part 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 the below Step 6 to understand the code.