CRUD On List Items Using Web Services And jQuery In SharePoint 2013 - Part 1

Introduction

In this article we will explore SharePoint functionality via Web Services. The goal of this article is to provide how to perform basic create, read, update, and delete (CRUD) operations on lists and list items with the SharePoint Web services.

Now, I will demo all the operations on list items including retrieve, create, update and delete on list items.



Retrieve the list items



Here is the main code in detail:

function retriveListItem()
{
    var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>companyInfo</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Company' /> \
<FieldRef Name='Industry' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
    $.ajax(
    {
        url: _spPageContextInfo.webAbsoluteUrl + "/apps/_vti_bin/Lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset=\"utf-8\""
    });
}

function processResult(xData, status)
{
    var MainResult = "";
    $(xData.responseXML).find("z\\:row").each(function()
    {
        var companyName = $(this).attr("ows_Company");
        var Industry = $(this).attr("ows_Industry");
        MainResult += MainResult + companyName + "-" + Industry + "\n";
    });
    $('#ResultDiv').text(MainResult);
}

Create list item



Here is the main code in detail:

function createListItem() {
    var batch =
        "<Batch OnError=\"Continue\"> \
    <Method ID=\"1\" Cmd=\"New\"> \
        <Field Name=\"Company\">" + $("#Company").val() + "</Field> \
         <Field Name=\"Industry\">" + $("#Industry").val() + "</Field> \
              </Method> \
ch>";

    var soapEnv =
        "<?xml version=\"1.0\" encoding=\"utf-8\"?> \
<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \
    xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \
    xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \
  <soap:Body> \
    <UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \
      <listName>companyInfo</listName> \
      <updates> \
        " + batch + "</updates> \
    </UpdateListItems> \
  </soap:Body> \
</soap:Envelope>";

    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl+ "/apps/_vti_bin/Lists.asmx",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("SOAPAction",
            "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");
        },
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset=utf-8"
    });
}

function processResult(xData, status) {
    retriveListItem();
}

Update list item



Here is the main code in detail:

function updateListItem() {

    var UpdateNewItemXml =
        "<Batch OnError=\"Continue\"> \
    <Method ID=\"1\" Cmd=\"Update\"> \
        <Field Name=\"ID\">7</Field>\
         <Field Name=\"Industry\">" + $("#Industry").val() + "</Field> \
              </Method> \</Batch>";
   var soapEnv =
        "<?xml version=\"1.0\" encoding=\"utf-8\"?> \
<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \
    xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \
    xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \
  <soap:Body> \
    <UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \
      <listName>companyInfo</listName> \
      <updates> \
        " + UpdateNewItemXml + "</updates> \
    </UpdateListItems> \
  </soap:Body> \
</soap:Envelope>";

    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/apps/_vti_bin/Lists.asmx",
        beforeSend: function (xhr) {
            xhr.setRequestHeader("SOAPAction",
            "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");
        },
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset=utf-8"
    });
}
function processResult(xData, status) {
    retriveListItem();
}

Delete list item



Here is the main code in detail:

function deleteListItem()
{
    var DeleteItemXml = "<Batch OnError=\"Continue\"> \
            <Method ID=\"1\" Cmd=\"Delete\"> \
                <Field Name=\"ID\">7</Field>\
                <Field Name=\"Company\">" + $("#Company").val() + "</Field> \
                      </Method> \</Batch>";
    var soapEnv = "<?xml version=\"1.0\" encoding=\"utf-8\"?> \
        <soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \
            xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \
            xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \
          <soap:Body> \
            <UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \
              <listName>companyInfo</listName> \
              <updates> \
                " + DeleteItemXml + "</updates> \
            </UpdateListItems> \
          </soap:Body> \
        </soap:Envelope>";
    $.ajax(
    {
        url: _spPageContextInfo.webAbsoluteUrl + "/apps/_vti_bin/Lists.asmx",
        beforeSend: function(xhr)
        {
            xhr.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");
        },
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset=utf-8"
    });
}

function processResult(xData, status)
{
    retriveListItem();
}

Summary

In this article we exploreed SharePoint Web service for (CRUD) operations on list items level. Hope it will be helpful.