Get List Items using SPServices in Office 365 Sharepoint 2013 Online

InfoPath alternatives for form designing SharePoint

We had requirement to have Tools Menu display icon and respective icon for office 365 projects.

#rightmenu is the DIV which is specified in master page. Please find the below code for the same. I hope below code will be useful.

Before that you can check out below useful articles:
– Enable Site and Web Features CSOM Powershell Script Office 365 Sharepoint 2013

– Continuous Crawl in SharePoint 2013 search

– Show SharePoint Survey Friendly message using jQuery

Create .js file and place the below code and provide the .js file reference in master page or content editor webpart wherever you want to use the code.

$(‘#rightmenu’).on(‘click’, function(){
$(‘#rightmenu table’).fadeToggle();


var method = “GetListItems”;
var list = “TestList”;
var fieldsToRead = “<ViewFields>” +
“<FieldRef Name=’Title’ />” +
“<FieldRef Name=’LinkClm’ />” +
“<FieldRef Name=’IconClm’ />” +
“<FieldRef Name=’PositionClm’ />” +
“<FieldRef Name=’OrderClm’ />” +

var query = “<Query>” +
“<Where>” +
“<Neq>” +
“<FieldRef Name=’ID’/><Value Type=’Number’>0</Value>” +
“</Neq>” +
“</Where>” +
“<OrderBy>” +
“<FieldRef Name=’OrderClm’ Ascending=’TRUE’/>” +
“</OrderBy>” +


operation: method,
async: false, //if you set this to true, you may get faster performance, but your order may not be accurate.
listName: list,
CAMLViewFields: fieldsToRead,
CAMLQuery: query,
//this basically means “do the following code when the call is complete”
completefunc: function (xData, Status) {
//this code iterates through every row of data returned from the web service call
$(xData.responseXML).SPFilterNode(“z:row”).each(function() {

var name = ($(this).attr(“ows_Title”));
var link = ($(this).attr(“ows_Link”)).split(“,”)[0];
var iconURL = ($(this).attr(“ows_Icon”)).split(“,”)[0];
var position=($(this).attr(“ows_Position”));

AddRowToTable(name,link,iconURL,position );

function AddRowToTable(name,link,iconURL,position)

var max = 2;
var tr = $(“#rightmenu table tr:last”);
if(!tr.length || tr.find(“td”).length >= max)
$(“#rightmenu table”).append(“<tr>”);
$(“#rightmenu table tr:last”).append(“<td><a href='” + link + “‘ target=’_blank’><img src='” + iconURL+ “‘></a></td>”);

/*if(position === “Left”)
$(“#LeftDIV”).append(“<tr align=’middle’>” +”<td><a href='” + link + “‘ target=’_blank’><img src='” + iconURL+ “‘></a></td>” +”</tr>”);
if(position === “Right”)
$(“#RightDIV”).append(“<tr align=’middle’>” +”<td><a href='” + link + “‘ target=’_blank’><img src='” + iconURL+ “‘></a></td>” +


Similar SharePoint 2013 Tutorials

About Sambita Rath

I have 9 years of exprience into SharePoint implementation, architecture, Administrator, development and Training.Designing Information Architecture in SharePoint 2007, 2010,2013 and Office 365.

View all posts by Sambita Rath →

Leave a Reply