Post
Ask Question

List Item Operations In SharePoint 2016 Using REST API

SharePoint 2016 general availability had been announced in the Future Of SharePoint conference in May 2016. The series, which discusses the installation of SharePoint 2016 in Azure can be found at C# Corner from the links, given below:

In this article, we will see, how to interact with List Items, using REST API. As an initial prerequisite, ensure that we have a list of the name DepartmentWing created in the Site with the columns, as shown below:

columns

We will use REST to connect to SharePoint to perform the list item operations.The scope of the article involves the operations, given below, using REST,

  • Fetch all the List Items
  • Create a new List Item
  • Update existing List Item
  • Delete existing List Item

Fetch List Items

In order to get all the list items from the List, we can issue a Get request to SharePoint List. The REST URL is used for the AJAX request will be of the format :

/_api/Web/Lists/GetByTitle('DepartmentWing')/Items

The method used to send the request will be a GET request. In the headers attribute, we specify the type of return data expected, which is JSON here.The result returned will be iterated in the success call back function.The header of the AJAX GET request will be plain and simple, as shown below:

  1. headers: {  
  2.     "accept": "application/json;odata=verbose",  
  3. },  
Output

We are trying to retrieve the list item and display the name and expertise of the resource, which is shown below in the console:

Output

Full Code
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  2. <script language="javascript" type="text/javascript">  
  3.     $(document).ready(function()   
  4.     {  
  5.         var listUrl = "/_api/Web/Lists/GetByTitle('DepartmentWing')/Items";  
  6.         getItem(listUrl)  
  7.     });  
  8.   
  9.     function getItem(listUrl) {  
  10.         $.ajax({  
  11.             url: _spPageContextInfo.webAbsoluteUrl + listUrl,  
  12.             type: "GET",  
  13.             headers: {  
  14.                 "accept": "application/json;odata=verbose",  
  15.             },  
  16.             success: function(data) {  
  17.                 console.log(data.d.results);  
  18.                 var items = data.d.results;  
  19.                 for (var i = 0; i < items.length; i++) {  
  20.                     console.log(items[i].Name + ":" + items[i].Expertise);  
  21.                 }  
  22.             },  
  23.             error: function(error) {  
  24.                 alert(JSON.stringify(error));  
  25.             }  
  26.         });  
  27.     }  
  28. </script>  
Create List Item

We can create the list item by issuing a POST AJAX request. The REST URL used for the operation is:

/_api/Web/Lists/GetByTitle('DepartmentWing')/Items

We will be creating a key value pair of information, which will be used to create the list. The list creation information property is shown below. It will be sent as JSON in the ‘data’ attribute of the AJAX REST call.
  1. var metadata =  
  2. {  
  3.     __metadata:  
  4.     {  
  5.         'type': 'SP.Data.DepartmentWingListItem'  
  6.     },  
  7.     Name: 'Priyaranjan KS',  
  8.     Expertise: 'SharePoint',  
  9.     Location: 'Delhi'  
  10. };  
Within the _metadata attribute, we have to specify the value for ListItenEntityTypeFullName('SP.Data.DepartmentWingListItem'). We can get this value by issuing a GET request in the Browser, using the URL, given below:
http://sharepoint2016/sites/HOL/_api/lists/getbytitle('DepartmentWing')?$select=ListItemEntityTypeFullName

code

The header section will look as below,
  1. headers:  
  2.  { 
  3.     "accept": "application/json;odata=verbose",  
  4.     "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  5.     "content-Type": "application/json;odata=verbose"  
  6. },  
Here, accept attribute specifies the data type for the return value and the content-type defines the data type for the data sent to the Server. In POST request, we have to send the X-RequestDigest value along with the request for the form validation without which, we will get a validation error. To fulfil this, we will be assigning the $("#__REQUESTDIGEST").val(), which sets the value of the form digest control  present within the page to X-RequestDigest key.
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  2. <script language="javascript" type="text/javascript">  
  3.     $(document).ready(function()   
  4.     {  
  5.         var newItemUrl = "/_api/Web/Lists/GetByTitle('DepartmentWing')/Items";  
  6.         var metadata =  
  7.             {  
  8.             __metadata:  
  9.               {  
  10.                 'type': 'SP.Data.DepartmentWingListItem'  
  11.             },  
  12.             Name: 'Priyaranjan KS',  
  13.             Expertise: 'SharePoint',  
  14.             Location: 'Delhi'  
  15.         };  
  16.         addNewItem(newItemUrl, metadata)  
  17.     });  
  18.   
  19.     function addNewItem(newItemUrl, metadata) {  
  20.         $.ajax({  
  21.             url: _spPageContextInfo.webAbsoluteUrl + newItemUrl,  
  22.             type: "POST",  
  23.             headers: {  
  24.                 "accept": "application/json;odata=verbose",  
  25.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  26.                 "content-Type": "application/json;odata=verbose"  
  27.             },  
  28.             data: JSON.stringify(metadata),  
  29.             success: function(data) {  
  30.                 console.log(data);  
  31.             },  
  32.             error: function(error) {  
  33.                 alert(JSON.stringify(error));  
  34.             }  
  35.         });  
  36.     }  
  37. </script> 
Output: The console output looks, as given below:

Output

A new item has been created in SharePoint List.

new item

Update the list item

The list item can be updated by issuing AJAX MERGE call with the REST URL :

"/_api/Web/Lists/GetByTitle('DepartmentWing')/Items(1)";

The information to update the list item can be assigned to the metadata key and assigned to the ‘data’ attribute of AJAX call.
  1. var metadata = { __metadata: { 'type': 'SP.Data.DepartmentWingListItem' },Location : 'Kerala' };  
ListItenEntityTypeFullName can be obtained, as mentioned in create Item operation. The header section looks similar to the previous operations.
  1. headers:   
  2.   {
  3.     "accept": "application/json;odata=verbose",  
  4.     "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  5.     "content-Type": "application/json;odata=verbose",  
  6.     "IF-MATCH": "*"  
  7. }  
Output : The list item column value for ‘Location’ has been updated, as shown below:

Output

Full code
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  2. <script language="javascript" type="text/javascript">  
  3.     $(document).ready(function()  
  4.     {  
  5.         var existingItemUrl = "/_api/Web/Lists/GetByTitle('DepartmentWing')/Items(1)";  
  6.         var metadata = {  
  7.             __metadata: {  
  8.                 'type': 'SP.Data.DepartmentWingListItem'  
  9.             },  
  10.             Location: 'Kerala'  
  11.         };  
  12.         updateItem(existingItemUrl, metadata)  
  13.     });  
  14.   
  15.     function updateItem(existingItemUrl, metadata) {  
  16.         $.ajax({  
  17.             url: _spPageContextInfo.webAbsoluteUrl + existingItemUrl,  
  18.             type: "MERGE",  
  19.             data: JSON.stringify(metadata),  
  20.             headers: {  
  21.                 "accept": "application/json;odata=verbose",  
  22.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  23.                 "content-Type": "application/json;odata=verbose",  
  24.                 "IF-MATCH": "*"  
  25.             },  
  26.             success: function(data) {  
  27.                 console.log(data);  
  28.             },  
  29.             error: function(error) {  
  30.                 alert(JSON.stringify(error));  
  31.             }  
  32.         });  
  33.     }  
  34. </script>  
Delete List Item

In order to delete the list item, we can issue a AJAX Delete request to the Server, using REST URL :

/_api/Web/Lists/GetByTitle('DepartmentWing')/Items(1)

‘Items(1)’ specifies the item Id of the item to be deleted. In the header section, we can specify the ‘accept’ and ‘X-RequestDigest’ attribute , which specifies the return data type and the form digest value respectively. The “IF-Match” attribute is used to check the concurrency of the list item to ensure that the item, that is being deleted is really the one, which we intend to delete. We can either specify “*”, which will blindly skip the concurrency check, else we can specify the e-tag value (which can be obtained by issuing a GET request).
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  2. <script language="javascript" type="text/javascript">  
  3.     $(document).ready(function()  
  4.     {  
  5.         var existingItemUrl = "/_api/Web/Lists/GetByTitle('DepartmentWing')/Items(1)";  
  6.         deleteItem(existingItemUrl)  
  7.     });  
  8.   
  9.     function deleteItem(existingItemUrl) {  
  10.         $.ajax({  
  11.             url: _spPageContextInfo.webAbsoluteUrl + existingItemUrl,  
  12.             type: "DELETE",  
  13.             headers: {  
  14.                 "accept": "application/json;odata=verbose",  
  15.                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  16.                 "IF-MATCH": "*"  
  17.             },  
  18.             success: function(data) {  
  19.                 console.log(data);  
  20.             },  
  21.             error: function(error) {  
  22.                 alert(JSON.stringify(error));  
  23.             }  
  24.         });  
  25.     }  
  26. </script>  
Let’s see how we can implement it in SharePoint. Save the script as a text file and upload it to the site assets library.

SharePoint Implementation 
  • Go to the edit settings of SharePoint page and click Web part from the Insert tab.

    Web part

  • Add Content Editor Web part.

    Content Editor Web part

  • Click Edit Web art from Content Edit Web part. Assign the URL of the script text file and click Apply.

    Content Edit

  • Click Apply and we can see the successful list deletion message from the console.

Output

Upon refreshing the list item’s display page, which was present in the Browser prior to deletion, we will get the list item, which has not found an error, which indicates the deletion of the list item.

Output

Conclusion

Thus, we have seen, how to perform the list item operations in SharePoint 2016, using REST API. This has been tried and tested in Office 365 as well.


Similar Articles