Introduction
This article explains how to delete an item in a list in SharePoint 2013 using CSOM-JavaScript.
Prerequisites
- Ensure you have access to the Office 365 online.
- Ensure Napa tool is available in your site.
Use the following procedure:
- Create an app for SharePoint using Office 365 Tools. If you have missed out on how to create an app in SharePoint 2013, then Click here
- Create a list and name it “MyCustomList”. Click here if you want to learn how to create a list.
- Click on the Default.aspx page.
- Add 2 input text boxes, the first one to capture the id details and the second one to capture the details regarding the update.
- Add a button to update an item, by the id provided in the TextBox.
- Place the following code inside the “PlaceHolderMain” tag.
Enter the Item ID to Update: <input typr="text" name="txtID" id="txtID"></input><br/><br/><br/>
Enter the Text to update the Title: <input typr="text" name="txtContent" id="txtContent"></input><br/><br/><br/>
<button id="btnUpdateItem" onclick="updateItem()">Update Item</button><br/>
- Click on the "App.js" file.
- Globally declare the content, web and list objects as shown below.
var context = SP.ClientContext.get_current();//gets the current context
var web=context.get_web(); //gets the web object
var list=web.get_lists(); //gets the collection of lists
var targetList;
- Now write the function to update an item in a list.
function updateItem() {
targetList = list.getByTitle("MyCustomList");
context.load(targetList);
var itemId = document.getElementById("txtID").value;
var itemToUpdate = targetList.getItemById(itemId);
var txtContentValue=document.getElementById("txtContent").value;
itemToUpdate.set_item('Title', txtContentValue);
itemToUpdate.update();
context.executeQueryAsync(updateItemSuccess,updateItemFailed);
}
- In the preceding sample code snippet we are updating an item in a list based on the item id and the text value that is captured through the text boxes.
- “set_item” is the method that is used to update an item in the list using the listitem object.
- Now execute the code by calling executeQueryAsync().
function updateItemSuccess() {
alert('Item updated successfully');
}
function updateItemFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
- That’s it!! Now let's start testing.
Testing
- Now to run the app click on the "Play" button that is available towards the left-most corner.
- The app is packaged, deployed, and installed on your Office 365 Site.
- Now you will be able to see the following page.
- Before entering the id in the text box let's open it in a new tab to navigate to the “MyCustomList” list.
- Just go to the following URL:
Syntax: https://yoursite/Lists/ListName
Example: https://mysite/Lists/MyCustomList
- In “MyCustomList” we are able to see 4 items.
- Let’s proceed to update an item, let’s update the id number 2.
- Enter the number 2 in the text box as shown below and enter the text that you want to update.
- Click on the “Update Item” button.
- To see the item that was updated, go back to the “MyCustomList” URL.
- Now you can see that item id 2 is updated with the text that is provided in the text box.
- Thus the item was updated in the list.
Summary
Thus in this article you saw how to update an item in a list in SharePoint 2013 using CSOM-JavaScript.