Update SharePoint List Items Using SPServices And Batch

Introduction

This article introduces how to update SharePoint list items using SPservice.

Requirement

If the client has provided a SharePoint site with restricted access and wants to customize the site then we can’t write C# code or any server-side code. Using SharePoint Web services and JQuery we can develop custom pages to update items instead of Web parts.

Here, I am providing one example to update the SharePoint list items. Please follow the steps.

Step 1. Here I am taking a list called ‘school’ and it has columns Title, Phone.

Step 2. Open SharePoint Designer create a page in the SitePages library and apply the master page to this page.

Step 3. Download the SPService reference file and JQuery reference from the source of this article and add them to the page.

Step 4. Write the following code in the above created page.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://<siteurl>/SiteAssets/jquery.SPServices-2014.02.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    loaditems();
});
function loaditems() {
    var tbl = "<table>";
    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "school",
        //CAMLViewFields : "<ViewFields><FieldRef Name='Title' /></ViewFields>",
        completefunc: function (xData, Status) {
            alert(xData.responseText);
            alert(xData.status);
            if (xData.status == 200) {
                $(xData.responseXML).SPFilterNode("z:row").each(function () {
                    tbl += "<tr><td>" + $(this).attr("ows_ID") + "</td><td>" + $(this).attr("ows_LinkTitle") + "</td><td>" + $(this).attr("ows_Phone") + "</td></tr>";
                });
            }
        }
    });
    tbl += "</table>";
    $("#divHtml").html(tbl);
}
function updateListContent() {
    var title = $('#txtTitle').val();
    var phone = $('#txtPhone').val();
    var itmid = $('#txtid').val();
    $().SPServices({
        operation: "UpdateListItems",
        async: false,
        batchCmd: "Update",
        listName: "school",
        updates: "<Batch OnError='Continue' PreCalc='TRUE' >" + "<Method ID='1' Cmd='Update'>" + "<Field Name='ID' >" + itmid + "</Field>" + "<Field Name='Title' >" + title + "</Field>" + "<Field Name='Phone' >" + phone + "</Field>" + "</Method></Batch>",
        completefunc: function (xData, Status) {
            if (xData.status == 200) {
                alert('success');
            } else {
                alert(xData.responseXML.xml);
            }
        }
    });
    loaditems();
}
</script>
<div id="divHtml">
    <ul id="tasksUL"></ul>
</div>
<table>
    <tr>
        <th colspan="2">SharePoint</th>
    </tr>
    <tr>
        <td>ID:</td>
        <td><input type="text" id="txtid" /></td>
    </tr>
    <tr>
        <td>Title:</td>
        <td><input type="text" id="txtTitle" /></td>
    </tr>
    <tr>
        <td>Phone:</td>
        <td><input type="text" id="txtPhone" /></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" value="Update" id="btnsp" onclick="updateListContent();" /></td>
    </tr>
</table>

Step 5. Enter the ID into the ID text field, the Title into the title field, and the Phone into the phone field.

Step 6. Click on update. It will update the 5th item and display an updated table.

Now you can enjoy the updated program as you want. You can design the page however you want. It can be implemented in CEWP also.