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
$.ajax({
	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);
		render(result);
		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>');
		$li.append($taskName);	
		
		// Add other data
		var $subUl = $(document.createElement('ul'));
		var $liPC = $(document.createElement('li'));
		$liPC.html('Percent Complete: ' + parseFloat(rows[row].PercentComplete) * 100 + ' %');
		$subUl.append($liPC);
		
		var $liSD = $(document.createElement('li'));
		$liSD.html('Start Date: ' + rows[row].StartDate);
		$subUl.append($liSD);
		
		var $liDD = $(document.createElement('li'));
		$liDD.html('Due Date: ' + rows[row].DueDate);
		$subUl.append($liDD);
	
		$li.append($subUl);	
		
		$ul.append($li);
	}

	$("#tasksDiv").append($ul);
}

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

Comments

No comments yet.