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

  • Article

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, we will demo all the operations on list items including *retrieve, create, update *and *delete *on list items.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/sagarp/crud-on-list-items-using-web-services-and-jquery-in-sharepoi/Images/list%20items.jpg

Retrieve the list items

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/sagarp/crud-on-list-items-using-web-services-and-jquery-in-sharepoi/Images/Retrieve%20the%20list%20items.jpg

Here is the main code in detail:

  1. function retriveListItem()  
  2. {  
  3.     var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \ 
  4. <soapenv:Body> \ 
  5. <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \ 
  6. <listName>companyInfo</listName> \ 
  7. <viewFields> \ 
  8. <ViewFields> \ 
  9. <FieldRef Name='Company' /> \ 
  10. <FieldRef Name='Industry' /> \ 
  11. </ViewFields> \ 
  12. </viewFields> \ 
  13. </GetListItems> \ 
  14. </soapenv:Body> \ 
  15. </soapenv:Envelope>";  
  16.     $.ajax(  
  17.     {  
  18.         url: _spPageContextInfo.webAbsoluteUrl + "/apps/_vti_bin/Lists.asmx",  
  19.         type: "POST",  
  20.         dataType: "xml",  
  21.         data: soapEnv,  
  22.         complete: processResult,  
  23.         contentType: "text/xml; charset=\utf-8\"  
  24.     });  
  25. }  
  26.   
  27. function processResult(xData, status)  
  28. {  
  29.     var MainResult = "";  
  30.     $(xData.responseXML).find("z\:row").each(function()  
  31.     {  
  32.         var companyName = $(this).attr("ows_Company");  
  33.         var Industry = $(this).attr("ows_Industry");  
  34.         MainResult += MainResult + companyName + "-" + Industry + "\n";  
  35.     });  
  36.     $('#ResultDiv').text(MainResult);  
  37. }  

Create list item

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/sagarp/crud-on-list-items-using-web-services-and-jquery-in-sharepoi/Images/Create%20list%20item.jpg

Here is the main code in detail:

  1. function createListItem() {  
  2.     var batch =  
  3.         "<Batch OnError=\Continue\> \ 
  4.     <Method ID=\1\ Cmd=\New\> \ 
  5.         <Field Name=\Company\>" + $("#Company").val() + "</Field> \ 
  6.          <Field Name=\Industry\>" + $("#Industry").val() + "</Field> \ 
  7.               </Method> \ 
  8. ch>";  
  9.   
  10.     var soapEnv =  
  11.         "<?xml version=\1.0\ encoding=\utf-8\?> \ 
  12. <soap:Envelope xmlns:xsi=\http://www.w3.org/2001/XMLSchema-instance\ \ 
  13.     xmlns:xsd=\http://www.w3.org/2001/XMLSchema\ \ 
  14.     xmlns:soap=\http://schemas.xmlsoap.org/soap/envelope/\> \ 
  15.   <soap:Body> \ 
  16.     <UpdateListItems xmlns=\http://schemas.microsoft.com/sharepoint/soap/\> \ 
  17.       <listName>companyInfo</listName> \ 
  18.       <updates> \ 
  19.         " + batch + "</updates> \ 
  20.     </UpdateListItems> \ 
  21.   </soap:Body> \ 
  22. </soap:Envelope>";  
  23.   
  24.     $.ajax({  
  25.         url: _spPageContextInfo.webAbsoluteUrl+ "/apps/_vti_bin/Lists.asmx",  
  26.         beforeSend: function(xhr) {  
  27.             xhr.setRequestHeader("SOAPAction",  
  28.             "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");  
  29.         },  
  30.         type: "POST",  
  31.         dataType: "xml",  
  32.         data: soapEnv,  
  33.         complete: processResult,  
  34.         contentType: "text/xml; charset=utf-8"  
  35.     });  
  36. }  
  37.   
  38. function processResult(xData, status) {  
  39.     retriveListItem();  
  40. }  

Update list item

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/sagarp/crud-on-list-items-using-web-services-and-jquery-in-sharepoi/Images/Update%20list%20item.jpg

Here is the main code in detail:

  1. function updateListItem() {  
  2.       
  3.     var UpdateNewItemXml =  
  4.         "<Batch OnError=\Continue\> \ 
  5.     <Method ID=\1\ Cmd=\Update\> \ 
  6.         <Field Name=\ID\>7</Field>\ 
  7.          <Field Name=\Industry\>" + $("#Industry").val() + "</Field> \ 
  8.               </Method> \/Batch>";  
  9.    var soapEnv =  
  10.         "<?xml version=\1.0\ encoding=\utf-8\?> \ 
  11. <soap:Envelope xmlns:xsi=\http://www.w3.org/2001/XMLSchema-instance\ \ 
  12.     xmlns:xsd=\http://www.w3.org/2001/XMLSchema\ \ 
  13.     xmlns:soap=\http://schemas.xmlsoap.org/soap/envelope/\> \ 
  14.   <soap:Body> \ 
  15.     <UpdateListItems xmlns=\http://schemas.microsoft.com/sharepoint/soap/\> \ 
  16.       <listName>companyInfo</listName> \ 
  17.       <updates> \ 
  18.         " + UpdateNewItemXml + "</updates> \ 
  19.     </UpdateListItems> \ 
  20.   </soap:Body> \ 
  21. </soap:Envelope>";  
  22.   
  23.     $.ajax({  
  24.         url: _spPageContextInfo.webAbsoluteUrl + "/apps/_vti_bin/Lists.asmx",  
  25.         beforeSend: function (xhr) {  
  26.             xhr.setRequestHeader("SOAPAction",  
  27.             "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");  
  28.         },  
  29.         type: "POST",  
  30.         dataType: "xml",  
  31.         data: soapEnv,  
  32.         complete: processResult,  
  33.         contentType: "text/xml; charset=utf-8"  
  34.     });  
  35. }  
  36. function processResult(xData, status) {  
  37.     retriveListItem();  
  38. }  

Delete list item

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/sagarp/crud-on-list-items-using-web-services-and-jquery-in-sharepoi/Images/Delete%20list%20item.jpg

Here is the main code in detail:

  1. function deleteListItem()  
  2. {  
  3.     var DeleteItemXml = "<Batch OnError=\Continue\> \ 
  4.             <Method ID=\1\ Cmd=\Delete\> \ 
  5.                 <Field Name=\ID\>7</Field>\ 
  6.                 <Field Name=\Company\>" + $("#Company").val() + "</Field> \ 
  7.                       </Method> \/Batch>";  
  8.     var soapEnv = "<?xml version=\1.0\ encoding=\utf-8\?> \ 
  9.         <soap:Envelope xmlns:xsi=\http://www.w3.org/2001/XMLSchema-instance\ \ 
  10.             xmlns:xsd=\http://www.w3.org/2001/XMLSchema\ \ 
  11.             xmlns:soap=\http://schemas.xmlsoap.org/soap/envelope/\> \ 
  12.           <soap:Body> \ 
  13.             <UpdateListItems xmlns=\http://schemas.microsoft.com/sharepoint/soap/\> \ 
  14.               <listName>companyInfo</listName> \ 
  15.               <updates> \ 
  16.                 " + DeleteItemXml + "</updates> \ 
  17.             </UpdateListItems> \ 
  18.           </soap:Body> \ 
  19.         </soap:Envelope>";  
  20.     $.ajax(  
  21.     {  
  22.         url: _spPageContextInfo.webAbsoluteUrl + "/apps/_vti_bin/Lists.asmx",  
  23.         beforeSend: function(xhr)  
  24.         {  
  25.             xhr.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");  
  26.         },  
  27.         type: "POST",  
  28.         dataType: "xml",  
  29.         data: soapEnv,  
  30.         complete: processResult,  
  31.         contentType: "text/xml; charset=utf-8"  
  32.     });  
  33. }  
  34.   
  35. function processResult(xData, status)  
  36. {  
  37.     retriveListItem();  
  38. }  

Summary

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