Update SharePoint List Items Using SPServices And Batch

Introduction

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

Requirement

If client has provided SharePoint site with restricted access and want 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 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 and create a page in SitePages library and apply master page to this page.

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

Step 4: Write the following code in 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 in to the ID text field, Title into title field and Phone into phone field.



Step 6: Click on update. It will update the 5th item and display 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.