Using Salesforce RemoteObjects with JSRender : Create a stateless Table

Salesforce has just released RemoteObjects and its really promising. You can now do lot more by just writing a page and without any need of a controller.

RemoteObjects now lets you do DML, Query etc just using the Javascript and to add they are not even counted against the limit. Lets see how can we use the same to create a stateless Pageblock table.

Ingredients 

• Jquery : For DOM Manipulation
• JSRender : For templating
• Some styling

Jquery

Jquery is a very popular DOM manipulation library and if you are into JS you probably don't need any introduction of the same. Jquery in this DEMO does the job of DOM manipulation like picking up templates, changing DOM etc.

JSRender

JSRender is not so popular templating engine which is successor of JQuery Templates. Lot of things have changed from JQuery Templates and they are now much more easier to use than ever. I have been preferring JSRender because they need very less code and are easier to use and understand.

Styling

To give our table a familiar look of PageBlockTable we will have to borrow some styling for Salesforce.

Styling from Salesforce

The Page

	<apex:page >
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
	<apex:includeScript value="https://rawgithub.com/BorisMoore/jsrender/master/jsrender.min.js"/>
	<apex:remoteObjects >
	<!--Name the field you like to query-->
	<apex:remoteObjectModel name="Contact" jsShorthand="con" fields="Id,Name,FirstName,LastName,Phone,Email"/>
	</apex:remoteObjects>
	<script>
	//function to invoke the retreive call to query records
	function getContacts(callback){
	var data = new SObjectModel.con();
	data.retrieve({ limit: 100 } ,function(err, result){
	//if failure
	if(err){
	alert(err.message);
	}
	else {
	callback(result);
	}
	});
	}
	//function to extract object from the remote object result
	function extractObjects(result) {
	var objects = [];
	for(var i =0; i < result.length; i++){
	objects.push(result[i]._props);
	}
	return objects;
	}
	//on document ready call query and render the template
	$(function(){
	getContacts(function(result){
	var contacts = extractObjects(result);
	//render html
	var html = $("#contactTableRowTmpl").render(contacts);
	//replace the table body with rendered html
	$("#contactTableBody").html(html);
	});
	})
	</script>
	<!-- JS Render Template -->
	<script id="contactTableRowTmpl" type="text/x-jsrender">
	<tr class="dataRow" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
	<td class="dataCell">{{>Name}}</td>
	<td class="dataCell">{{>FirstName}}</td>
	<td class="dataCell">{{>LastName}}</td>
	<td class="dataCell">{{>Phone}}</td>
	<td class="dataCell">{{>Email}}</td>
	</tr>
	</script>
	<apex:pageBlock >
	<!-- Borrow some styling from Pageblock table -->
	<table class="list" border="0" cellpadding="0" cellspacing="0">
	<thead class="rich-table-thead">
	<tr class="headerRow ">
	<th class="headerRow">Name</th>
	<th class="headerRow">FirstName</th>
	<th class="headerRow">LastName</th>
	<th class="headerRow">Phone</th>
	<th class="headerRow">Email</th>
	</tr>
	</thead>
	<tbody id="contactTableBody">
	</tbody>
	</table>
	</apex:pageBlock>
	</apex:page>

view raw RemoteObjects.page hosted with ❤ by GitHub

The end result

Whats Advantage ?

• Almost zero viewstate
• Pretty fast loading time and refresh
• Suitable for mobiles and large pages

Project Link & Live Demo : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000Dshlu