Visualforce Remote Objects: A light weight mobile friendly page with SOQL in SFDC and SF1

A simple yet robust VF page with remote objects(another way for front end SOQL) involved. This is a POC page I had worked upon and code is given below.

Sample code can be found in the SF Dev site. Additionally I tried adding criteria to the QUERY and applying result to DOM showing up on page.

Working with JS is always a fun guys!

VF PAGE: Demo Here

	<apex:page sidebar="false" showHeader="false" standardStylesheets="false">
	<apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" />
	<apex:remoteObjects >
	<!--Name the field you like to query-->
	<apex:remoteObjectModel name="Account" jsShorthand="acc" fields="Id,Name,Type,Phone" />
	</apex:remoteObjects>
	<!-- now address you field with shorthand -->
	<script>
	function clearList()
	{
	if (!$('#cList').empty())
	{
	//if non-empty then clear list before every call
	$('#cList').empty();
	}
	}
	var DML = function()
	{
	//clear old list beforehand
	clearList();
	//Instantiate a reference
	var data = new SObjectModel.acc();
	//process the data received in return
	data.retrieve(
	{
	where:
	{
	Phone:
	{
	like: '%%'
	}
	},
	limit: 20
	}, function(err, records)
	{
	//if failure
	if (err) alert(err.message);
	else
	{
	populate(records);
	}
	});
	//Method to Pouplate Records
	function populate(records)
	{
	var ul = document.getElementById("cList");
	records.forEach(function(record)
	{
	// Build the text for a warehouse line item
	var toAdd = record.get("Name");
	// Add the line item to the warehouses list
	var rule = document.createElement("br");
	var li = document.createElement("li");
	li.appendChild(document.createTextNode(toAdd));
	ul.appendChild(li);
	ul.appendChild(rule);
	});
	}
	}
	</script>
	<div class="jumbotron">
	<br/>
	<div class="wrapper">
	<!-- Telephone: <input type="tel" name="usrtel"/><br/> -->
	<p> <button class="btn btn-success btn-lg" onclick="DML()"> <span class="glyphicon glyphicon-star">
	</span>Pull Accounts</button>
	</p>
	</div>
	</div>
	<span class="glyphicon glyphicon-list"></span> Accounts:
	<div class="wrapper">
	<ul class="list-inline" id="cList">
	</ul>
	</div>
	</apex:page>

view raw Visualforce Remote Objects.htm hosted with ❤ by GitHub