Get List Items using SPServices in Office 365 SharePoint 2013 Online

This SharePoint Online tutorial explains how to retrieve list items using SPServices in SharePoint 2013 Online Office 365.

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

If you are new to SPServices in SharePoint 2013 Online, read an article on Work with SPServices in SharePoint 2013/2016/Online.

#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.

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’ />” +

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

$().SPServices({

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”));
//alert($(this).attr(“ows_Position”));

AddRowToTable(name,link,iconURL,position );

});
}
});
});
function AddRowToTable(name,link,iconURL,position)
{

var max = 2;
$(document).ready(function(){
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>” +
“</tr>”);
}*/

}

You may like following SPServices SharePoint 2013/2010 tutorials:

• Converting the complex dropdown to a simple dropdown using SPServices in SharePoint 2010
• Fields Autocomplete for SharePoint 2010 using jQuery SPServices
• Read list or document library items using jQuery SPServices in SharePoint 2013
• SharePoint Online Add Update Delete Item from List using SPServices
• SharePoint 2013 Online GetListItems using SPServices
• SharePoint 2013 Online Retrieve Current user details using SPServices
• Show hide div based on user permission using SPServices in SharePoint 2013
• Query User Profile Service for Multiple Users in SharePoint Using SPServices
• Autocomplete feature in SharePoint 2013 list column using SPServices in SharePoint 2013
• Export selected record to excel in SharePoint 2013 using JavaScript client object model and SPServices
• Converting the complex dropdown to a simple dropdown using SPServices in SharePoint 2010
• SharePoint 2013 Populate Manager name using SPServices

Hope this SharePoint SPServices tutorial help you to retrieve list items using SPServices in SharePoint 2013 Online.

Thanks,
Sambita