Update an Item in a List in SharePoint 2013 Using CSOM-JavaScript

Introduction

This article explains how to delete an item in a list in SharePoint 2013 using CSOM-JavaScript.

Prerequisites

1. Ensure you have access to the Office 365 online.
2. Ensure Napa tool is available in your site.

Use the following procedure:

1. 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
2. Create a list and name it “MyCustomList”. Click here if you want to learn how to create a list.
3. Click on the Default.aspx page.
   
   
    
4. Add 2 input text boxes, the first one to capture the id details and the second one to capture the details regarding the update.
5. Add a button to update an item, by the id provided in the TextBox.
6. 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/>
   
   
   
   
7. Click on the "App.js" file.
   
   
    
8. 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;
    
9. 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);

   }
   
   

10. 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.
11. “set_item” is the method that is used to update an item in the list using the listitem object.
12. 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());

    }

    
    
13. That’s it!! Now let's start testing.

Testing

1. Now to run the app click on the "Play" button that is available towards the left-most corner.
   
   
    
2. The app is packaged, deployed, and installed on your Office 365 Site.
   
   
    
3. Now you will be able to see the following page.
   
   
   
4. Before entering the id in the text box let's open it in a new tab to navigate to the “MyCustomList” list.
5. Just go to the following URL:
   
   Syntax: https://yoursite/Lists/ListName
   Example: https://mysite/Lists/MyCustomList
   
   
    
6. In “MyCustomList” we are able to see 4 items.
7. Let’s proceed to update an item, let’s update the id number 2.
8. Enter the number 2 in the text box as shown below and enter the text that you want to update.
9. Click on the “Update Item” button.
   
   
    
10. To see the item that was updated, go back to the “MyCustomList” URL.
    
    
     
11. Now you can see that item id 2 is updated with the text that is provided in the text box.
12. 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.