CRUD Operations in SharePoint using REST API – Part IV

Applicable to: SharePoint 2013, SharePoint 2016, SharePoint Online

The previous blogs demonstrates the “Create”, “Read” and “Update” operations of REST API in SharePoint. This is the last blog of this series and explains the “Delete” operation of a list item.

As before, we start with the assumption that the list in picture “Employee” has some entries in it. We will be deleting the list item based on the ID of the item – you enter the ID, and just click on the “Delete” button, to get the list item deleted.

REST Operations in SharePoint – DELETE

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 delete, and click on “Delete” button The list item pertaining to that list ID will be deleted. Visuals are shown in the below images.

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";

function RemoveListItem(){
      var myID = $("#numID").val();
      
      if ((myID.length < 1) || isNaN(myID)) 
         {
            alert("Please enter a valid item ID");
         }
     else{
            $.ajax({
               url:  _spPageContextInfo.webAbsoluteUrl  + "/_api/web/lists/getbytitle('" + listName + "')/items(" + myID + ")",
               type: "POST",
               contentType: "application/json;odata=verbose",
               headers: {
                        "Accept": "application/json;odata=verbose",
                        "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                        "IF-MATCH": "*",
                        "X-HTTP-Method":"DELETE",
                        },
               success: function (data) {
                        alert("success");
                        },
               error: function (data) {
                       alert("failed");
                       }
              });
           }
      }

The delete method can be passed in the X-HTTP-Method-Override header, and the call is made using type/method – “POST”. The override helps avoid browser or client limitations, as well as firewall issues.

"X-HTTP-Method":"DELETE",

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.

Download the source code.

Happy reading!

 6,273 total views,  2 views today