In this article, I have explained how to perform create, read, update, and delete operations on SharePoint list items using HTTP requests.
| HTTP Request | Use |
| GET | This method helps to fetch the information fromSharepoint list |
| POST | This method helps to create or update the list items in sharepoint listPUT: Required all the object properties to update the resourcesMerge: Optional to required all the object properties to update the resources |
| PUT/MERGE | This method helps to update the existing object using X-HTTP method |
| DELETE | This method helps to delete the object from sharepoint list |
Open sharepoint site,
Create a list name “Employee” to play Create, Read, Update, Delete Operations using HTTP RequestsP
“POST” method used to create Item in the sharepoint list
URL
http://<Sharepoint SiteURL>/_api/web/lists/Getbytitle(listname)/items
- function createListItem() {
- //Fetch the values from the input elements
- var eName = $('#txtempname').val();
- var eDesg = $('#txtdesignation').val();
- var eEmail = $('#txtemail').val();
- var eMobile = $('#txtmobile').val();
- var eBloodGroup = $('#txtbloodgrp').val();
- var eComAddress = $('#txtaddress').val();
- var eEmergency = $('#txtemergency').val();
- $.ajax({
- async: true, // Async by default is set to “true” load the script asynchronously
- // URL to post data into sharepoint list
- url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items",
- method: "POST", //Specifies the operation to create the list item
- data: JSON.stringify({
- '__metadata': {
- 'type': 'SP.Data.EmployeeListItem' // it defines the ListEnitityTypeName
- },
- //Pass the parameters
- 'EmployeeName': eName,
- 'Designation': eDesg,
- 'Email': eEmail,
- 'Mobile': eMobile,
- 'BloodGroup': eBloodGroup,
- 'CommunicationAddress': eComAddress,
- 'EmergencyContact': eEmergency
- }),
- headers: {
- "accept": "application/json;odata=verbose", //It defines the Data format
- "content-type": "application/json;odata=verbose", //It defines the content type as JSON
- "X-RequestDigest": $("#__REQUESTDIGEST").val() //It gets the digest value
- },
- success: function(data) {
- swal("Item created successfully", "success"); // Used sweet alert for success message
- },
- error: function(error) {
- console.log(JSON.stringify(error));
- }
- })
- }
"GET" Method used to Fetch the list items from the sharepoint list
URLhttp://<Sharepoint SiteURL>/_api/web/lists/Getbytitle(listname)/items
- function getItems() {
- $.ajax({
- async: true, // Async by default is set to “true” load the script asynchronously
- url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items", // URL to fetch data from sharepoint list
- method: "GET", //Specifies the operation to fetch the list item
- headers: {
- "accept": "application/json;odata=verbose", //It defines the Data format
- "content-type": "application/json;odata=verbose" //It defines the content type as JSON
- },
- success: function(data) {
- data = data.d.results;
- //Iterate the data
- $.each(data, function(index, value) {
- var html = "<tr><td>" + value.EmployeeName + "</td><td>" + value.Designation + "</td><td>" + value.Email + "</td>
- <td>" + value.BloodGroup + "</td><td>" + value.CommunicationAddress + "</td>
- <td>" + value.EmergencyContact + "</td><td>" + value.Mobile + "</td>
- <td>
- <a href='#' data-target='#ModalForUpdateEmployee' data-toggle='modal' onclick='edit(" + value.Id + ")'>
- <img src='https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/003-edit-document.png'>
- </a></td><td><a href='#' onclick='deleteItem(" + value.Id + ");'>
- <img src='https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/001-delete.png'></a></td>
- </tr>";
- $('.table tbody').append(html); //Append the HTML
- });
- table = $('#subsiteList').DataTable(); //initialize the datatable
- },
- error: function(error) {
- console.log(JSON.stringify(error));
- }
- })
- }
"MERGE" Method used to perform update the item in sharepoint list
URL
http://<Sharepoint SiteURL>/_api/web/lists/Getbytitle(listname)/items(itemid)
URL
http://<Sharepoint SiteURL>/_api/web/lists/Getbytitle(listname)/items(itemid)
- function update(uId) {
- //Fetch the values from the input elements
- var eName = $('#txtempnames').val();
- var eDesg = $('#txtdesignations').val();
- var eEmail = $('#txtemails').val();
- var eMobile = $('#txtmobiles').val();
- var eBloodGroup = $('#txtbloodgrps').val();
- var eComAddress = $('#txtaddresss').val();
- var eEmergency = $('#txtemergencys').val();
- $.ajax({
- url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items(" + uId + ")",
- method: "POST",
- data: JSON.stringify({
- '__metadata': {
- 'type': 'SP.Data.EmployeeListItem'
- },
- 'EmployeeName': eName,
- 'Designation': eDesg,
- 'Email': eEmail,
- 'Mobile': eMobile,
- 'BloodGroup': eBloodGroup,
- 'CommunicationAddress': eComAddress,
- 'EmergencyContact': eEmergency
- }),
- headers: {
- "accept": "application/json;odata=verbose",
- "content-type": "application/json;odata=verbose",
- "X-RequestDigest": $("#__REQUESTDIGEST").val(),
- "IF-MATCH": "*", //Overrite the changes in the sharepoint list item
- "X-HTTP-Method": "MERGE" // Specifies the update operation in sharepoint list
- },
- success: function(data) {
- swal( "Item Updated successfully", "success");
- //Reninitialize the datatable
- if ($.fn.DataTable.isDataTable('#subsiteList')) {
- $('#subsiteList').DataTable().destroy();
- }
- $('#subsiteList tbody').empty();
- //Bind the data into datatable
- getItems();
- },
- error: function(error) {
- console.log(JSON.stringify(error));
- }
- })
- }
URL
http://<Sharepoint SiteURL>/_api/web/lists/Getbytitle(listname)/items(itemid)
http://<Sharepoint SiteURL>/_api/web/lists/Getbytitle(listname)/items(itemid)
- function deleteItem(value) {
- $.ajax({
- url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items(" + value + ")",
- method: "POST",
- headers: {
- "accept": "application/json;odata=verbose",
- "content-type": "application/json;odata=verbose",
- "X-RequestDigest": $("#__REQUESTDIGEST").val(),
- "IF-MATCH": "*",
- "X-HTTP-Method": "DELETE"
- },
- success: function(data) {
- swal("Deleted!", "Item Deleted successfully", "success");
- //Renitialize the datatable
- if ($.fn.DataTable.isDataTable('#subsiteList')) {
- $('#subsiteList').DataTable().destroy();
- }
- $('#subsiteList tbody').empty();
- getItems();
- },
- error: function(error) {
- console.log(JSON.stringify(error));
- }
- })
- }
Tob AmanuPosted Mar 10, 2023, 6:01 PM
<!--HERE IS THE CODE I USED BUT SAVING DATA (SAVE BUTTON) IS NOT WORKING--><body> <div class="container"> <div id="row4" class="row nopadding "> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-horizontal padLeftRight"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pleft0 pright0"> <div class="announcment paddingwebpart " style="background:white;"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pleft0 pright0"> <h5 id="BtnAlign"> <a class="addbtn" target="_blank" style="color:white; text-decoration:none" data-target="#ModalForNewProject" data-toggle="modal">New Employee</a> </h5> <br> </div> <table id="subsiteList" class="table table-striped table-bordered"> <thead> <tr> <th>Employee Name</th> <th>Designation</th> <th>Address</th> <th>Email</th> <th>Blood Group</th> <th>Emergency Contact</th> <th>Mobile</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody></tbody> </table> </div> </div> </div> </div> <div class="modal fade" id="ModalForNewProject" role="dialog" title="Create new Project"> <div class="modal-dialog"> <fieldset> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cls-contriute"> <h5 class="contributtitle">Add Employee Information</h5> </div> </fieldset> <div id="ModelBody"> <div class="form-horizontal well bs-component cls-divthoug" id="ModalValidation"> <fieldset id="bodymodal"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >Employee Name <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtempname" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Designation <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtdesignation" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Email <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemail" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Mobile <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtmobile" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Blood Group <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtbloodgrp" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Address for communication <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtaddress" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Emergency contact <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemergency" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <div class="col-lg-offset-7 col-lg-2 cls-divbtn "> <input class="cls-savecancel" id="btnsave" type="button" onclick="createListItem();" value="Submit" /> </div> <div class="col-lg-2 col-lg-offset-1"> <input class="cls-savecancel" type="reset" value="Cancel" id="btnCancel" data-dismiss="modal" /> </div> </div> </fieldset> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group cls-sucees" style="background-color:#edeff2" > <div id="successMessage"> </div> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group LoadingDiv" id="loader" style="display:none;padding: 66px;background-color: #0a2f7d!important;" > <div class="loader">Loading... </div> <div class="loader1"> <p class="ones"></p> </div> </div> </div> </div> </div> <!-- update modal --> <div class="modal fade" id="ModalForUpdateEmployee" role="dialog" title="Update New Employee"> <div class="modal-dialog"> <fieldset> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cls-contriute"> <h5 class="contributtitle">Update Employee Information</h5> </div> </fieldset> <div id="ModelBody"> <div class="form-horizontal well bs-component cls-divthoug" id="ModalValidation"> <fieldset id="bodymodal"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >Employee Name <span class="red">* </span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtempnames" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field! </span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Designation <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtdesignations" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field! </span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Email <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemails" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Mobile <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtmobiles" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Blood Group <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtbloodgrps" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Address for communication <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtaddresss" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Emergency contact <span class="red">*</span> </label> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemergencys" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <div class="col-lg-offset-7 col-lg-2 cls-divbtn "> <input class="cls-savecancel" id="btnsave" type="button" onclick="update(uId);" value="Submit" /> </div> <div class="col-lg-2 col-lg-offset-1"> <input class="cls-savecancel" type="reset" value="Cancel" id="btnCancel" data-dismiss="modal" /> </div> </div> </fieldset> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group cls-sucees" style="background-color:#edeff2" > <div id="successMessage"> </div> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group LoadingDiv" id="loader" style="display:none;padding: 66px;background-color: #0a2f7d!important;" > <div class="loader">Loading... </div> <div class="loader1"> <p class="ones"></p> </div> </div> </div> </div> </div> <!--end--> </body> </html>
Tob AmanuPosted Mar 3, 2023, 8:58 PM
Hello everything is working except Submit button. Nothing happens after filing data and clicking submit. Can you please assist?
Peter GiesselinkPosted Mar 2, 2021, 7:55 AM
Sorry, found the file in the zip download
Peter GiesselinkPosted Mar 2, 2021, 7:50 AM
I think the Style.css file (unreachable on https://sharepointtechie.sharepoint.com) contains important information about the style of for instance the New Employee button (not visible). The class addbtn is not known in the bootstrap version you've used and also not available in the other css files. Can you provide this file?
sakthi eelanPosted Mar 12, 2020, 12:30 PM
this is my code please check and if any error let me know $(document).ready(function(){ getItems(); }); function createListItem() { var eName = $('#txtempname').val(); var eDesg = $('#txtdesignation').val(); var eEmail= $('#txtemail').val(); var eMobile = $('#txtmobile').val(); var eBloodGroup = $('#txtbloodgrp').val(); var eComAddress = $('#txtaddress').val(); var eEmergency = $('#txtemergency').val(); alert("0"); $.ajax({ async: true, url:_spPageContextInfo.webAbsoluteUrl + "https://#####.sharepoint.com/sites/SRVS-EXT-FSI-DIVX/_api/web/lists/GetByTitle('Employee')/items", method: "POST", data: JSON.stringify({ '__metadata':{ 'type': 'SP.Data.EmployeeListItem' }, 'EmployeeName' : eName, 'Designation': eDesg, 'Email': eEmail, 'Mobile': eMobile, 'BloodGroup': eBloodGroup, 'CommunicationAddress': eComAddress, 'EmergencyContact': eEmergency }), headers:{ "accept": "application/json;odata=verbose", "content-type": "application/json;odata=verbose", "X-RequestDigest": $("#__REQUESTDIGEST").val() }, success: function(data){ var eName = $('#txtempname').val(""); var eDesg = $('#txtdesignation').val(""); var eEmail= $('#txtemail').val(""); var eMobile = $('#txtmobile').val(""); var eBloodGroup = $('#txtbloodgrp').val(""); var eComAddress = $('#txtaddress').val(""); var eEmergency = $('#txtemergency').val(""); swal( "Item created successfully", "success"); if ($.fn.DataTable.isDataTable('#subsiteList')) { $('#subsiteList').DataTable().destroy(); } $('#subsiteList tbody').empty(); getItems(); }, error: function(error){ console.log(JSON.stringify(error)); } }) }
sakthi eelanPosted Mar 12, 2020, 10:27 AM
Data is not updating in share point list
Pratik GirdharPosted Nov 14, 2019, 3:28 PM
This is really helpful. Great Job.
Malibongwe NalaPosted Sep 11, 2019, 4:45 AM
How to use a date format... I can't convert it here?
MyhPosted Mar 1, 2019, 3:03 PM
Sorry is this solution working fine? or it's just me who's getting some errors and cannot submit a new item!!
SaMol PPosted Dec 3, 2018, 5:35 AM
How get the all list items/ single item from a splist where i will pass the one value as parameter
Gk NPosted Jul 23, 2018, 1:23 PM
THANKS FOR THE ARTICLE ..The HTML is updated but now I am unable to submit a new item, looks like the JS is not working.. Please guide..Submit button doing nothing..
Itsn78 gamesPosted Jun 5, 2018, 5:16 AM
Where is the updated source code with input fields ?
khan mahmPosted May 24, 2018, 4:48 PM
There is no input field ?
Suja ZaPosted May 7, 2018, 6:39 PM
Why is that there are no input fields like #txtempnames ?
Lin QiangPosted Mar 7, 2018, 7:53 PM
Dear , Friend Firstly thank you for your support ! i refer to your mean do that , it seems that the effort is ok , but not display field input so that can't submit record .
Lin QiangPosted Mar 7, 2018, 2:19 AM
Download source code , just only no happen your effort!
Lin QiangPosted Mar 7, 2018, 2:17 AM
How to add the content editor into the page and link the HTML file ,friend