I'm typing these notes up here because I really pushed the boundaries of my, if I'm honest limited, knowledge of Sharepoint development.
The Problem
The client I was dealing with at work was looking to have a Year Planner view of a Tasks List. This isn't something you can do out of the box, so I was stumped!
The Solution
SPServices To The Rescue!
The jQuery Library for SharePoint Web Services is a great way to access Sharepoint Data in JSON format without having to worry about Visual Studio or Sharepoint Designer.
Ok down to the nitty-gritty. To reference the SPServices Library you can do the following:
<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Reference SPServices on cdnjs (Cloudflare) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.2/jquery.SPServices-0.7.2.min.js"></script>
You basically edit your Sharepoint Page and add a Script Editor App. Then click Edit Snippet with the Script Editor in Edit Mode and add your JavaScript code in there
As with most JQuery malarchy we start with document.ready
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var tasks = GetTasks();
});
function GetTasks(){
// JSON ObjectArray container
var tasks = [];
//The Web Service method we are calling, to read list items we use 'GetListItems'
var method = "GetListItems";
//The display name of the list we are reading data from
var list = "{YOUR LIST NAME HERE e.g. Tasks}";
var fieldsToRead = "<ViewFields><FieldRef Name='Title' /><FieldRef Name='AssignedTo' /></ViewFields>";
// CAML Query var query = "<Query>" +
"<Where>>" +
"<Neq>" +
"<FieldRef Name='ID'/><Value Type='Number'>0</Value>" +
"</Neq>" +
"</Where>" +
"<OrderBy>" +
"<FieldRef Name='Title'/>" +
"</OrderBy>" +
"</Query>";
//Here is our SPServices Call where we pass in the variables that we set above
$().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() {
//get the title field
var name = ($(this).attr("ows_Title"));
// which site?
var site = ($(this).attr("ows_Site"));
//who's it assinged to?
var person = ($(this).attr("ows_AssignedTo"));
person = person.replace(/^\d+;#/,"");
// week number ?
var completed = ( $(this).attr("ows_Checkmark") );
completed = completed.replace(/boolean;#/,"");
// overdue ?
var overdue = ( $(this).attr("ows_Overdue") );
tasksJSON.push({
name: name,
person: person,
site: site,
completed: completed,
overdue: overdue
});
});
}
});
return tasksJSON;
}
