There are times when using JavaScript to get data from SharePoint makes a lot of sense. I played around with retrieving data using search and the Search Results WebPart. This did work well, but it meant I had to do some extra work in order to format the results exactly how I wanted them. So I decided to use the Search REST API and formatted the results exactly how I wanted them. There are several posts that describe retrieving results in this way.
The next part of what I wanted to do involved getting specific results from Lists or Libraries. This article will describe the steps you need to follow to use CAML in your Script Editor WebPart.
Step 1: Make the JQuery files available to your JavaScript. This simply involved copying the js files to a location on your SharePoint environment. I downloaded the latest versions of the JQuery and the SPServices files and placed them here:
/Style%20Library/Scripts/jquery.SPServices-2014.02.min.js /Style%20Library/Scripts/jquery-2.1.4.min.js
In this example I want to pull all the items in a Tasks list and return anything that is due today or is past due. The Caml query that I am using is:
<Query><Where><Leq><FieldRef Name='DueDate' /><Value Type='DateTime'><Today OffsetDays='0' /></Value></Leq></Where></Query>
On the page that you want to display the results, you want to add a Script Editor web part. Add the following code in the script editor:
<script src="/SiteAssets/jquery.SPServices-2014.02.min.js" type="text/javascript"></script>
<script src="/SiteAssets/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/Style%20Library/Scripts/jquery.SPServices-2014.02.min.js" type="text/javascript"></script>
<script src="/Style%20Library/Scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
<div id="ResultDiv">TEST</div>
<script type="text/javascript">
$(document).ready(function () { executeCaml(); });
var InnrHtmlgrp = "";
function executeCaml() {
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'>" +
"<soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
"<listName>Tasks</listName>" +
"<query><Query><Where><Leq><FieldRef Name='DueDate' /><Value Type='DateTime'><Today OffsetDays='0' /></Value></Leq></Where></Query></query>" +
"<viewFields><ViewFields><FieldRef Name='Title' /><FieldRef Name='DueDate' /></ViewFields></viewFields></GetListItems>" +
"</soapenv:Body></soapenv:Envelope>";
$.ajax({
url : _spPageContextInfo.webAbsoluteUrl + "/_vti_bin/lists.asmx",
contentType : "text/xml; charset=\"utf-8\"",
method: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
//success : processResult,
error: onError
});
}
function processResult(xData, status) {
var htmlSource = "<table>";
$(xData.responseXML).find("z\\:row").each(function () {
var guid = $(this).attr("ows_UniqueId");
var title = $(this).attr("ows_Title");
var dueDate = $(this).attr("ows_DueDate");
htmlSource += "<tr><td>" + guid + "</td><td>" + title + "</td><td style=\"color:#bf0000;\">" + dueDate + "</td></tr>";
});
htmlSource += "</table>";
$('#ResultDiv').html(htmlSource);
}
function onError(data, errorStatus, errorMessage) {
alert("error");
alert(errorMessage);
}
</script>
Save the page and if you have Tasks that are past due.