CRUD Operations In SharePoint Using REST API - CREATE Operations

REST API is a powerful CSOM concept that can be leveraged in SharePoint for converting sophisticated business designs into working and efficient SharePoint Artifacts (Add-Ins, CSOM solutions, etc.). REST does not require any separate references for its working unlike other frameworks (SPservices!)

This series of blogs will demonstrate how to work with SharePoint lists and REST API for basic and common operations. Please have a look at MSDN articles if you wish to gain a more in-depth understanding of REST in SharePoint. 

REST Operations in SharePoint – CREATE

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 NameInternal NameType
NameTitleSingle line of text
Employee IDEmployee_x0020_IDNumber
DepartmentDepartmentSingle line of text
CityCitySingle line of text
Contact NumberContact_x0020_NumberSingle line of text

This is how the list looks like in my case.
SharePoint
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 add 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 –

This concludes the steps and the page will be now functional with the Create Operation.

SharePoint

SharePoint

SharePoint  

Explanatory Step

Although this is not a step, but gives a very brief description of the REST API code used in this scenario. The code used is, 

  1. var listName = "Employee";  
  2. var itemType = GetItemTypeForListName(listName);  
  3.   
  4. function CreateListItem( ) {  
  5.      var name = $("#txtName").val();                
  6.      var employeeID = $("#txtEmployeeID").val();  
  7.      var department = $("#slctDepartment").val();  
  8.      var city = $("#txtCity").val();   
  9.      var contactNumber = $("#txtContactNumber").val();            
  10.               
  11.      var item = {  
  12.            "__metadata": { "type": itemType },  
  13.            "Title": name,  
  14.            "Employee_x0020_ID": employeeID,  
  15.            "Department": department,                      
  16.            "City": city,  
  17.            "Contact_x0020_Number": contactNumber  
  18.        };  
  19.           
  20.      $.ajax({  
  21.           url:  _spPageContextInfo.webAbsoluteUrl  + "/_api/web/lists/getbytitle('" + listName + "')/items",  
  22.           type: "POST",  
  23.           contentType: "application/json;odata=verbose",  
  24.           data: JSON.stringify(item),  
  25.           headers: {  
  26.                "Accept""application/json;odata=verbose",  
  27.                "X-RequestDigest": $("#__REQUESTDIGEST").val()  
  28.            },  
  29.           success: function (data) {  
  30.                alert("success");  
  31.            },  
  32.           error: function (data) {  
  33.                alert("success");  
  34.            }  
  35.       });  
  36. }  
  37.   
  38. function GetItemTypeForListName (name)  
  39.       {  
  40.            return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";  
  41.       }  

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 case is “SP.DataEmployeeListItem”, which is then in turn used as,

__metadata: {‘type’ : ‘SP.DataEmployeeListItem’ }

As our task here is to create/add data in SharePoint entity (list in this case), the operation is of type/method - POST

type: "POST",

And finally, all the data is passed as JSON,

data: JSON.stringify(item),

The next article outlines the “Read” operation of REST API in SharePoint. This blog can also be found in my personal blogsite – SharePoint Surgeon

Happy reading!

Up Next
    Ebook Download
    View all
    Learn
    View all