If you work as a SharePoint developer, you may interact with SharePoint data programmatically using the REST API. In this tutorial, we’ll explore how to perform CRUD (Create, Read, Update, Delete) operations on SharePoint lists using the REST API, with examples.
The SharePoint REST API allows applications to communicate with SharePoint sites over HTTP, enabling you to access and manipulate SharePoint data from external applications or custom solutions.
SharePoint CRUD Operations using REST API
CRUD stands for Create, Read, Update, and Delete. These are the four basic operations you can perform on SharePoint list items using the REST API:
- Create: Add a new item to a SharePoint list.
- Read: Retrieve items or data from a SharePoint list.
- Update: Modify an existing item in a SharePoint list.
- Delete: Remove an item from a SharePoint list.
Before you start, ensure you have:
- Access to a SharePoint Online site.
- Necessary permissions for the target SharePoint list.
- A tool to issue HTTP requests (e.g., Postman, browser fetch, or JavaScript in a SharePoint page).
The base URL for SharePoint REST API is:
https://<your-tenant>.sharepoint.com/_api/For all the examples below, I have taken a SharePoint list named “Sales” that has the following columns:
- ID – Default ID column
- Title: Product Name [Single line of text]
- Product Category [Choice -Books, Electronics, and Home &Kitchen]
The SharePoint list with some data looks like the screenshot below:
Note: To insert the code into a SharePoint web part page, I will use a script editor web part.
1. CREATE: Add an Item to a SharePoint List using REST API
To create a new SharePoint list item, send a POST request to the /items endpoint of your list.
Endpoint:
POST https://<your-tenant>.sharepoint.com/_api/web/lists/getbytitle('YourListName')/itemsHeaders:
- Accept: application/json;odata=verbose
- Content-Type: application/json;odata=verbose
- X-RequestDigest: <form_digest_value> (required for POST, PATCH, DELETE)
Body Example:
{
"__metadata": { "type": "SP.Data.YourListNameListItem" },
"Title": "New Item",
"Description": "This is a new item created via REST API."
}Let me now show you an example.
I will use the above Sales SharePoint list.
Below is the complete REST API code to add an item to a SharePoint list. In this code, I have added a textbox, where the user can enter the product name, and from a dropdown, the user can select the product category.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function addNewItemInList(restUrl, data) {
$.ajax({
url: restUrl,
type: "POST",
data: JSON.stringify(data),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"Content-Type": "application/json;odata=verbose",
"X-HTTP-Method": "POST"
},
success: function (data) {
alert("Item added successfully!");
resetForm();
},
error: function (error) {
alert("Error occurred while adding item: " + JSON.stringify(error));
}
});
}
function resetForm() {
$('#addItemForm')[0].reset();
}
$(document).ready(function () {
$('#addButton').click(function () {
var productName = $('#productNameInput').val();
var productCategory = $('#productCategoryInput').val();// for choice column
var itemData = {
"__metadata": { "type": "SP.Data.SalesListItem" }, // Replace "Sales" with your actual list name
"Title": productName, //Replace 'Title' with your field name
"ProductCategory": productCategory //Replace 'ProductCategory' with your field name
};
addNewItemInList(_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Sales')/items", itemData); // Replace "Sales" with your list name
});
});
</script>
<form id="addItemForm">
<label for="productNameInput">Product Name:</label>
<input type="text" id="productNameInput" name="productNameInput"><br>
<label for="productCategoryInput">Product Category:</label>
<select id="productCategoryInput" name="productCategoryInput">
<option value="Electronics">Electronics</option>
<option value="Books">Books</option>
<option value="Home & Kitchen">Home & Kitchen</option>
</select><br><br>
<button type="button" id="addButton">Add</button>
</form>You can add the code to a SharePoint script editor web part, and it will appear as shown in the screenshot below. Once you click on the Add button, the item will be added to the SharePoint list.
2. READ: Retrieve Items from a SharePoint List using REST API
To read or retrieve items from a SharePoint list, send a GET request to the /items endpoint.
Endpoint:
GET https://<your-site>.sharepoint.com/_api/web/lists/getbytitle('YourListName')/itemsI will now demonstrate how to retrieve all SharePoint list items using the REST API. Here, I will also use the same SharePoint list example.
To retrieve all items from the SharePoint list, we will execute the Get SharePoint REST API operation.
Below is the complete code to get all the items from a SharePoint list using the REST API.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
function getListItemsfromList(siteURL, listName) {
$.ajax({
url: siteURL + "/_api/web/lists/getbytitle('" + listName + "')/items",
type: 'GET',
headers: {
"Accept": "application/json;odata=verbose"
},
cache: false,
success: function(data) {
console.log(data.d.results);
var itemsContainer = $("#itemsContainer");
itemsContainer.empty();
data.d.results.forEach(function(item) {
itemsContainer.append("<div>ID: " + item.Id + ", Product Name: " + item.Title + ", Product Category: " + item.ProductCategory + "</div>");
});
},
error: function(error) {
alert(JSON.stringify(error));
}
});
}
$("#retrieveButton").click(function(event) {
event.preventDefault();
var siteURL = 'https://szg52.sharepoint.com/sites/Sales';
var listName = 'Sales';
getListItemsfromList(siteURL, listName);
});
});
</script>
</head>
<body>
<button id="retrieveButton" style= " padding: 5px 5px">Retrieve</button>
<div id="itemsContainer" style="background-color: #FFFFCC; max-width: 40vw; font-size: 18px;"></div>
</body>
</html>Once you add the code in a script editor web part, you can see the output like in the screenshot below:
Check out Get SharePoint List Items using REST API
3. UPDATE: Modify an Existing Item using SharePoint REST API
To update an item in a SharePoint list using REST API, send a MERGE or PATCH request to the specific item’s endpoint.
Endpoint:
POST https://<your-site>.sharepoint.com/_api/web/lists/getbytitle('YourListName')/items(<item-id>)Headers:
- Accept: application/json;odata=verbose
- Content-Type: application/json;odata=verbose
- X-RequestDigest: <form_digest_value>
- IF-MATCH: * (or the item’s ETag)
- X-HTTP-Method: MERGE
Body Example:
{
"__metadata": { "type": "SP.Data.YourListNameListItem" },
"Title": "Updated Title",
"Description": "Updated via REST API"
}Now, let me show you an example of updating an item using the SharePoint REST API. We can update an item based on the Item ID.
I have a textbox where the user can enter the SharePoint list item ID, updated product name, and product category.
Below is the complete REST API code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function updateListItemInList(restUrl) {
var id = $('#idInput').val();
var productName = $('#productNameInput').val();
var productCategory = $('#productCategoryInput').val(); // Assuming ID of the choice column is "productCategory"
// Get item ID based on the title
$.ajax({
url: restUrl + "?$filter=ID eq '" + id + "'",
type: "GET",
headers: {
"Accept": "application/json;odata=verbose",
},
success: function(data) {
if (data.d.results.length > 0) {
var itemId = data.d.results[0].Id;
var itemData = {
"__metadata": { "type": "SP.Data.SalesListItem" }, // Adjust the list item type based on your list
"ID": id,
"Title": productName,// change the 'Title' with your field name
"ProductCategory": productCategory// change the 'ProductCatefory' with your field name
};
$.ajax({
url: restUrl + "(" + itemId + ")",
type: "POST",
data: JSON.stringify(itemData),
headers: {
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"IF-MATCH": "*",
"X-HTTP-Method": "MERGE"
},
success: function(data) {
alert("Item updated successfully!");
},
error: function(error) {
alert("Error occurred while updating item: " + JSON.stringify(error));
}
});
} else {
alert("Item with id '" + id + "' not found!");
}
},
error: function(error) {
alert("Error occurred while retrieving item: " + JSON.stringify(error));
}
});
}
$(document).ready(function () {
$('#updateButton').click(function () {
var restUrl = "https://szg52.sharepoint.com/sites/Sales/_api/web/lists/getbytitle('Sales')/items"; // Replace with the URL of your SharePoint site (https://szg52.sharepoint.com/sites/Sales) and list name(Sales)
updateListItemInList(restUrl);
});
});
</script>
<form id="updateItemForm">
<label for="idInput">ID:</label>
<input type="text" id="idInput" name="idInput"><br><br>
<label for="productNameInput">Product Name:</label>
<input type="text" id="productNameInput" name="productNameInput"><br><br>
<label for="productCategoryInput">Product Category:</label>
<select id="productCategoryInput" name="productCategoryInput">
<option value="Electronics">Electronics</option>
<option value="Books">Books</option>
<option value="Home & Kitchen">Home & Kitchen</option>
<!-- Add other options as needed -->
</select><br><br>
<button type="button" id="updateButton">Update</button>
</form>
Once you click the Update button, it will update the list item with ID 16.
4. DELETE: Remove an Item from a SharePoint List using REST API
To delete an item from a SharePoint list using REST API, send a DELETE request to the item’s endpoint.
Endpoint:
POST https://<your-site>.sharepoint.com/_api/web/lists/getbytitle('YourListName')/items(<item-id>)Headers:
- Accept: application/json;odata=verbose
- X-RequestDigest: <form_digest_value>
- IF-MATCH: *
- X-HTTP-Method: DELETE
Here is an example.
I will show you how to delete Item ID 16 from the SharePoint list using the REST API delete operation.
Below is the complete code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// Function to delete item by ID
function deleteItemById(restUrl, itemId) {
$.ajax({
url: restUrl + "(" + itemId + ")",
type: "POST",
headers: {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"IF-MATCH": "*",
"X-HTTP-Method": "DELETE"
},
success: function(data) {
console.log("Item with ID " + itemId + " deleted successfully!");
},
error: function(error) {
console.log("Error occurred while deleting item with ID " + itemId + ": " + JSON.stringify(error));
}
});
}
// URL to delete item from SharePoint list
var restUrl = "https://szg52.sharepoint.com/sites/Sales/_api/web/lists/getbytitle('Sales')/items"; // Replace with the URL of your SharePoint site and list name
// ID of the item to be deleted
var itemIdToDelete = 16;
deleteItemById(restUrl, itemIdToDelete);
});
</script>Once you save the code in a script editor web part, it will delete the SharePoint list item whose ID is 16.
I hope you learned about the SharePoint REST API CRUD operations with list items. If you have questions or want to see more advanced examples, let us know in the comments!
You may also like:
- Get Current User using SharePoint Rest API
- SharePoint REST API Order by, Filter, Pagination, and Select
After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.
Hi, how we can make those connection by login from flutter
can u plz let me know how to create new and edit form from share point list using REST API. plz give me some solution with Screen shot for better understanding.