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.

    List in SharePoint1
     
  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/>

    List in SharePoint2

  7. Click on the "App.js" file.

    List in SharePoint3
     
  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.

    List in SharePoint4
     
  2. The app is packaged, deployed, and installed on your Office 365 Site.

    List in SharePoint5
     
  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.

Up Next
    Ebook Download
    View all
    Learn
    View all