SharePoint List Item Control

Deepak Chaudhari
9 min readSep 18, 2023

Introduction to SharePoint Web Services:

SharePoint Web Services provide a way to interact with SharePoint functionality and data using standard web protocols such as SOAP (Simple Object Access Protocol) and REST (Representational State Transfer). These services allow developers to perform various operations on SharePoint sites, lists, libraries, users, and more.

There are several web services available in SharePoint, each serving a specific purpose. Here are some commonly used SharePoint web services:

  1. SharePoint SOAP Web Services:
  • Lists.asmx: Provides operations for working with lists and list data.
  • Copy.asmx: Allows copying files and folders within SharePoint.
  • UserGroup.asmx: Enables managing users, groups, and their permissions.
  • Search.asmx: Provides search capabilities within SharePoint.
  • UserProfileService.asmx: Allows accessing user profile information.

2. SharePoint REST API:

  • SharePoint 2013 introduced a RESTful API that allows developers to interact with SharePoint using HTTP requests. The REST API supports CRUD operations on SharePoint entities such as sites, lists, items, and more. It follows the principles of REST and returns data in JSON format.

Using SharePoint Web Services, developers can perform various operations on SharePoint data, including:

  • Creating, reading, updating, and deleting list items.
  • Uploading and downloading files to document libraries.
  • Managing user permissions and groups.
  • Querying and searching for data within SharePoint.
  • Retrieving user profile information.

To interact with SharePoint Web Services, developers can use various programming languages and frameworks. For example, in JavaScript, jQuery is commonly used to make AJAX requests to the web services and handle the responses.

In the context of the previous question and answers, we discussed how to perform CRUD operations on list items in SharePoint 2013 using the SharePoint REST API and jQuery. This involved creating, reading, updating, and deleting list items by making HTTP requests to the SharePoint REST API endpoints.

1. CRUD On List Items Using Web Services and jQuery In SharePoint 2013

In SharePoint 2013, you can perform CRUD operations (Create, Read, Update, Delete) on list items using web services and jQuery. Here’s a step-by-step guide.

Step 1: Include jQuery Library First, make sure you have included the jQuery library in your SharePoint site. You can do this by adding the following code to your SharePoint page:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Step 2: Get List Name and Web URL To perform CRUD operations, you need to know the name of the list and the URL of the SharePoint web. You can find the list name by navigating to the list and checking the URL. The web URL is the URL of the SharePoint site.

Step 3: Create a New Item To create a new item in the list, you can use the SharePoint REST API. Here’s an example code snippet to create a new item:

var listName = "YourListName";
var webUrl = "YourWebUrl";
var itemData = {
"__metadata": { "type": "SP.Data." + listName + "ListItem" },
"Title": "New Item",
"Description": "This is a new item"
};

$.ajax({
url: webUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(itemData),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
console.log("Item created successfully");
},
error: function (error) {
console.log(JSON.stringify(error));
}
});

Make sure to replace “YourListName” with the actual name of your list and “YourWebUrl” with the URL of your SharePoint web.

This code sends a POST request to the SharePoint REST API to create a new item in the specified list. The item data is provided in the “itemData” object. The “__metadata” property specifies the type of the list item, and the other properties represent the column values.

Step 4: Read List Items To read list items, you can use the SharePoint REST API. Here’s an example code snippet to retrieve all items from a list:

var listName = "YourListName";
var webUrl = "YourWebUrl";

$.ajax({
url: webUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function (data) {
console.log(data.d.results);
},
error: function (error) {
console.log(JSON.stringify(error));
}
});

This code sends a GET request to the SharePoint REST API to retrieve all items from the specified list. The response data contains an array of items, which can be accessed using the “data.d.results” property.

Perform update and delete operations:

Step 1: Update an Item To update an existing item in the list, you can use the SharePoint REST API. Here’s an example code snippet to update an item:

var listName = "YourListName";
var webUrl = "YourWebUrl";
var itemId = 1; // Replace with the ID of the item you want to update
var itemData = {
"__metadata": { "type": "SP.Data." + listName + "ListItem" },
"Title": "Updated Item",
"Description": "This item has been updated"
};

$.ajax({
url: webUrl + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(itemData),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": "*"
},
success: function (data) {
console.log("Item updated successfully");
},
error: function (error) {
console.log(JSON.stringify(error));
}
});

Make sure to replace “YourListName” with the actual name of your list, “YourWebUrl” with the URL of your SharePoint web, and “itemId” with the ID of the item you want to update.

This code sends a POST request with the “X-HTTP-Method” header set to “MERGE” to the SharePoint REST API. The item data is provided in the “itemData” object, and the “__metadata” property specifies the type of the list item. The “If-Match” header is set to “*” to ensure that the update operation is performed regardless of the item’s current version.

Step 2: Delete an Item To delete an item from the list, you can use the SharePoint REST API. Here’s an example code snippet to delete an item:

var listName = "YourListName";
var webUrl = "YourWebUrl";
var itemId = 1; // Replace with the ID of the item you want to delete
$.ajax({
url: webUrl + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")",
type: "POST",
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "DELETE",
"If-Match": "*"
},
success: function (data) {
console.log("Item deleted successfully");
},
error: function (error) {
console.log(JSON.stringify(error));
}
});

Make sure to replace “YourListName” with the actual name of your list, “YourWebUrl” with the URL of your SharePoint web, and “itemId” with the ID of the item you want to delete.

This code sends a POST request with the “X-HTTP-Method” header set to “DELETE” to the SharePoint REST API. The “If-Match” header is set to “*” to ensure that the delete operation is performed regardless of the item’s current version.

2. CRUD Operation On List Items Using JSOM In SharePoint 2013

Here we performed CRUD operations (Create, Read, Update, Delete) on list items using JavaScript Object Model (JSOM). Here’s a step-by-step guide:

Step 1: Load the SharePoint JavaScript libraries To use JSOM, you need to load the SharePoint JavaScript libraries. You can do this by adding the following code to your SharePoint page:

<script src="/_layouts/15/init.js"></script>
<script src="/_layouts/15/MicrosoftAjax.js"></script>
<script src="/_layouts/15/SP.Runtime.js"></script>
<script src="/_layouts/15/SP.js"></script>

Step 2: Authenticate and get the client context To perform CRUD operations, you need to authenticate the user and get the client context. Here’s an example code snippet to authenticate and get the client context:

var context;
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
context = new SP.ClientContext.get_current();
});

Step 3: Create a new item To create a new item in the list, you can use the SP.List.addItem method. Here’s an example code snippet to create a new item:

var listName = "YourListName";
var list = context.get_web().get_lists().getByTitle(listName);
var itemCreateInfo = new SP.ListItemCreationInformation();
var newItem = list.addItem(itemCreateInfo);
newItem.set_item("Title", "New Item");
newItem.set_item("Description", "This is a new item");
newItem.update();
context.executeQueryAsync(
function () {
console.log("Item created successfully");
},
function (sender, args) {
console.log(args.get_message());
}
);

Make sure to replace “YourListName” with the actual name of your list.

Step 4: Read list items To read list items, you can use the SP.CamlQuery object and the SP.List.getItems method. Here’s an example code snippet to retrieve all items from a list:

var listName = "YourListName";
var list = context.get_web().get_lists().getByTitle(listName);
var query = new SP.CamlQuery();
var items = list.getItems(query);
context.load(items);
context.executeQueryAsync(
function () {
var itemEnumerator = items.getEnumerator();
while (itemEnumerator.moveNext()) {
var item = itemEnumerator.get_current();
console.log(item.get_item("Title"));
console.log(item.get_item("Description"));
}
},
function (sender, args) {
console.log(args.get_message());
}
);

Make sure to replace “YourListName” with the actual name of your list.

Step 5: Update an item To update an existing item in the list, you can use the SP.ListItem.update method. Here’s an example code snippet to update an item:

var listName = "YourListName";
var list = context.get_web().get_lists().getByTitle(listName);
var itemId = 1; // Replace with the ID of the item you want to update
var item = list.getItemById(itemId);
item.set_item("Title", "Updated Item");
item.set_item("Description", "This item has been updated");
item.update();
context.executeQueryAsync(
function () {
console.log("Item updated successfully");
},
function (sender, args) {
console.log(args.get_message());
}
);

Make sure to replace “YourListName” with the actual name of your list and “itemId” with the ID of the item you want to update.

Step 6: Delete an item To delete an item from the list, you can use the SP.ListItem.deleteObject method. Here’s an example code snippet to delete an item:

var listName = "YourListName";
var list = context.get_web().get_lists().getByTitle(listName);
var itemId = 1; // Replace with the ID of the item you want to delete
var item = list.getItemById(itemId);
item.deleteObject();
context.executeQueryAsync(
function () {
console.log("Item deleted successfully");
},
function (sender, args) {
console.log(args.get_message());
}
);

Make sure to replace “YourListName” with the actual name of your list and “itemId” with the ID of the item you want to delete.

That’s it for performing CRUD operations on list items using JSOM in SharePoint 2013.

3. CRUD Operation On List Items Using REST API Services In SharePoint

To perform CRUD operations on list items using REST API services in SharePoint 2013, you can follow these steps:

  1. Create a SharePoint list: First, create a SharePoint list where you want to perform the CRUD operations.
  2. Obtain the list’s endpoint URL: Get the URL of the SharePoint list where you want to perform the operations. The URL will typically be in the format: http://<site_url>/_api/web/lists/getbytitle(‘<list_title>’).
  3. Retrieve list items: To retrieve list items, you can make a GET request to the list’s endpoint URL. You can specify additional parameters like $select and $filter to retrieve specific fields or filter the results.
  4. Create a new list item: To create a new list item, make a POST request to the list’s endpoint URL. Include the necessary data in the request body, following the JSON format.
  5. Update a list item: To update an existing list item, make a POST request to the item’s specific endpoint URL. Include the updated data in the request body.
  6. Delete a list item: To delete a list item, make a DELETE request to the item’s specific endpoint URL.

Here’s an example of how you can perform these operations using JavaScript and jQuery:

// Retrieve list items
$.ajax({
url: "<list_endpoint_url>",
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function(data) {
// Process the retrieved list items
console.log(data);
},
error: function(error) {
console.log(JSON.stringify(error));
}
});

// Create a new list item
$.ajax({
url: "<list_endpoint_url>",
type: "POST",
headers: {
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
data: JSON.stringify({
"__metadata": { "type": "<list_item_type>" },
"<field1_name>": "<field1_value>",
"<field2_name>": "<field2_value>"
}),
success: function(data) {
// Process the response
console.log(data);
},
error: function(error) {
console.log(JSON.stringify(error));
}
});

// Update a list item
$.ajax({
url: "<item_endpoint_url>",
type: "POST",
headers: {
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": "*"
},
data: JSON.stringify({
"__metadata": { "type": "<list_item_type>" },
"<field1_name>": "<updated_field1_value>",
"<field2_name>": "<updated_field2_value>"
}),
success: function(data) {
// Process the response
console.log(data);
},
error: function(error) {
console.log(JSON.stringify(error));
}
});

// Delete a list item
$.ajax({
url: "<item_endpoint_url>",
type: "DELETE",
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"If-Match": "*"
},
success: function(data) {
// Process the response
console.log(data);
},
error: function(error) {
console.log(JSON.stringify(error));
}
});

Make sure to replace <list_endpoint_url>, <item_endpoint_url>, <list_item_type>, <field1_name>, <field1_value>, <field2_name>, <field2_value>, <updated_field1_value>, and <updated_field2_value> with the appropriate values for your SharePoint list and list item.

Remember to include the necessary jQuery library and obtain the __REQUESTDIGEST value for authentication.

I hope this helps you perform CRUD operations on list items using REST API services in SharePoint 2013!

Conclusion: SharePoint Web Services provide a powerful and flexible way to extend and customize SharePoint functionality. They allow developers to integrate SharePoint with other systems, build custom applications, and automate business processes. Let me know through comments if you guys have any further questions.

>===>> Best of Luck!! <<===<

--

--