Get SharePoint list items using SPServices

SharePoint list items & CRUD operations using spservices

SP Services is the best programming concept for the MOSS 2007, SharePoint 2010 & SharePoint 2013 as well.

The developers who are not having the knowledge on SharePoint Server Object Model(SSOM) or SharePoint Client Object Model(CSOM) can work with this SP Services. It is the best option to them and even PHP developers and other web developers also can work who are having Javascript knowledge.

It is developed by the codeplex open source community.

In order to work with SP Services we should have JQuery also in our SharePoint Page. Because SP Services is developed using jquery.

In order to work with SP Services need to be downloaded below two references.

  1. Jquery
  2. SP Services reference

Once downloaded the above files, please go though the below steps.

Here, I have used SCHOOL list for the sample. The below is the screen shot

imgSchoolList

  1. Open your SharePoint site in SharePoint designer
  2. Go to SitePages and create sample *.aspx page
  3. Go to SiteAssets and create sample *.js file
  4. Edit page in Advanced mode as shown in image.

     imgEditAdvancedMode

  5. Add reference in header as below
    <head runat="server">
    <meta name="WebPartPageExpansion" content="full" />
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <SharePoint:CssRegistration Name="default" runat="server"/>
    <!-- JQuery Reference-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- SP Service Reference-->
    <script type="text/javascript" src="../SiteAssets/jquery.SPServices-2014.02.min.js"></script>
    <!-- Custom code reference -->
    <script type="text/javascript" src="../SiteAssets/spservice.js"></script>
    </head>
    
  6. Now the sample page is included with the SP Services reference
  7. To display the list content we need to have one substitute control, so that I have created div(divContent) and input contrls for the CUD operations.
    <body>
    Welcome to the sharepoint SP Services
    <div id="divContent"></div>
    <div>
       <table>
          <tr>
             <td>Name:</td>
             <td><input type="text" id="txtName"/></td>
          </tr>
          <tr>
             <td>Marks:</td>
             <td><input type="text" id="txtMarks"/></td>
          </tr>
          <tr>
             <td></td>
             <td><input type="button" id="btnAdd" value="Add" onclick="addItem()"/></td>
          </tr>
       </table>
    </div>
    <div>
       <table>
          <tr>
             <td>ID:</td>
             <td><input type="text" id="txtid"/></td>
          </tr>
          <tr>
             <td></td>
             <td><input type="button" id="btnAdd" value="Update" onclick="itmUpdate()"/>&nbsp;<input type="button" id="btnAdd" value="Delete" onclick="itemDelete()"/></td>
          </tr>
       </table>
    </div>
    </body>
    
  8. Open *.js file in SiteAssets and write the below code
    $(document).ready(function () {
    	$.ajax({
    		success : function () {
    			loadContent();
    		}
    	});
    });
    
    //To display all items from SCHOOL list
    function loadContent() {
    	var myJson = [];
    	$().SPServices({
    		operation : "GetListItems", //Method name
    		async : false,
    		//webURL : webUrl,//pass webUrl dynamically
    		listName : "SCHOOL", // List Name
    		//CAMLQueryOptions : "",
    		//CAMLViewFields : "<ViewFields><FieldRef Name='Title' /></ViewFields>",
    		//CAMLQuery : "",
    		//CAMLRowLimit : 1,
    		completefunc : function (xData, Status) {
    			//alert(xData.responseText);
    			if (xData.status == 200) {
    				//debugger;
    				myJson = $(xData.responseXML).SPFilterNode("z:row").SPXmlToJson({
    						mapping : {
    							ows_ID : {
    								mappedName : "ID",
    								objectType : "Counter"
    							},
    							ows_Title : {
    								mappedName : "Title",
    								objectType : "Text"
    							},
    							ows_Marks : {
    								mappedName : "marks",
    								objectType : "Number"
    							}
    						}, // name, mappedName, objectType
    						includeAllAttrs : true
    					});
    				//alert(myJson);
    			} else {
    				alert(xData.status);
    			}
    		}
    	});
    
    	//debugger;
    	//JSON Viewer
    	//http://jsonviewer.stack.hu/
    	var listItemInfo = '<table>';
    	for (var i = 0; i < myJson.length; i++) {
    		listItemInfo += "<tr>";
    		listItemInfo += "<td>" + myJson[i].ID + "</td>";
    		listItemInfo += "<td>" + myJson[i].Title + "</td>";
    		listItemInfo += "<td>" + myJson[i].marks + "</td>";
    		listItemInfo += "</tr>";
    	}
    	listItemInfo += "</table>";
    	$('#divContent').html(listItemInfo);
    }
    
    function addItem() {
    	var strName = $('#txtName').val();
    	var strMarks = $('#txtMarks').val();
    	alert(strName);
    
    	$().SPServices({
    		operation : "UpdateListItems",
    		async : false,
    		batchCmd : "Update",
    		listName : "SCHOOL",
    		updates : "<Batch OnError='Continue' PreCalc='TRUE' >"
    		 + "<Method ID='1' Cmd='New'>"
    		 + "<Field Name='Title' >" + strName + "</Field>"
    		 + "<Field Name='Marks' >" + strMarks + "</Field>"
    		 + "</Method></Batch>",
    		completefunc : function (xData, Status) {
    			if (xData.status == 200) {
    				//alert('File added successfully');
    			} else {
    				alert(xData.responseXML.xml);
    			}
    		}
    	});
    	loadContent();
    }
    
    //To update the item
    function itmUpdate() {
    	var strName = $('#txtName').val();
    	var strMarks = $('#txtMarks').val();
    
    	var strid = $('#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'>" + strid + "</Field>"
    		 + "<Field Name='Title'>" + strName + "</Field>"
    		 + "<Field Name='Marks'>" + strMarks + "</Field>"
    		 + "</Method></Batch>",
    		completefunc : function (xData, Status) {
    			if (xData.status == 200) {
    				alert('File updated successfully');
    			} else {
    				alert(xData.responseXML.xml);
    			}
    		}
    	});
    
    	loadContent();
    }
    
    //To delete the item
    function itemDelete() {
    	var strid = $('#txtid').val();
    	$().SPServices.SPUpdateMultipleListItems({
    		listName : "SCHOOL",
    		CAMLQuery : "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Text'>" + strid + "</Value></Eq></Where></Query>",
    		batchCmd : "Delete",
    		completefunc : function (xData, Status) {
    			if (xData.status == 200) {
    				alert('Deleted Successfully');
    			}
    		}
    	});
    	loadContent();
    }
    
  9. Out put will be like below
    imgDisplay

The below are the operation:

ADD :

  1. Fill the values (Name, Marks) into the text boxes and click on ‘Add’

UPDATE:

  1. Enter ID:
  2. Fill the values (Name, Marks) into the text boxes and click on Update

DELETE:

  1. Enter ID:
  2. Fill the values (Name, Marks) into the text boxes and click on Update

I hope you enjoy.

Vijay

Vijay Bhaskar from Hyderabad. Here in the IT industry for years and during these days I have enjoyed working with Microsoft Technologies such as Office 365, SharePoint 2013/2010, MOSS 2007, Asp.Net, C#.Net and Ajax, jQuery, JSON, ECMA, Angular etc. Currently working for Capgemini and Microsoft certified developer for SharePoint. During this period worked on various concepts like Office Apps, SharePoint Apps ( Provider hosted, SharePoint hosted), Azure, Workflows, Web part development, SSOM, CSOM, JSOM, SPServices, SharePoint Master Pages, SharePoint custom pages, SharePoint on Azure.

2 thoughts on “Get SharePoint list items using SPServices

Leave a Reply to seer and tarotista Cancel reply

Your email address will not be published. Required fields are marked *