This page is a work in progress!

Insert an empty div

<div id="tasksDiv"></div>

Add the following Javascript to your page by using a Script Editor or Content Editor Web Part, SharePoint Designer or similar tool

// Declare outside of the ajax call to be able to read the data for testing, should be removed in production
var debugResult;

// Build the command
var command = 	{
	Type: "SELECT",
	List: "Tasks",
	Fields: "Title, PercentComplete, DueDate, StartDate"

// Send the command
	type: "GET",
	contentType: "application/json",
	data: { command: JSON.stringify(command)},
	url: "/camelot/jsonapi.svc/Items",
	success: function (data) {
		// Decode and store the result in a variable
		var result = $.parseJSON(data.d);
		debugResult = result;
	error: function (xhr, textStatus, errorThrown) {
		$("#tasksDiv").html('<p>' + errorThrown + '</p>');

function render(result) {
	// Store rows in variable (simpler to code, better performance)
	var rows = result.List.Content.Row;

	// Create structure
	var $ul = $(document.createElement('ul'));

	for (var row=0;row<rows.length;row++)
		var $li = $(document.createElement('li'));
		var $taskName = $(document.createElement('label'));
		$taskName.html('Task name: <strong>' + rows[row].Title + '</strong>');
		// Add other data
		var $subUl = $(document.createElement('ul'));
		var $liPC = $(document.createElement('li'));
		$liPC.html('Percent Complete: ' + parseFloat(rows[row].PercentComplete) * 100 + ' %');
		var $liSD = $(document.createElement('li'));
		$liSD.html('Start Date: ' + rows[row].StartDate);
		var $liDD = $(document.createElement('li'));
		$liDD.html('Due Date: ' + rows[row].DueDate);


Expected result

The expected result is a very simple view with the actual items

Last edited Jan 3, 2013 at 10:05 PM by Bendsoft, version 4


No comments yet.