What is Visualforce Remote Objects.?
One of the exciting
feature of Spring14 release is introduction of “Visualforce Remote Objects”.
You can say its actually replacement of JavaScript Remoting.
Why do we need “Visualforce Remote Objects” when we already have
“JavaScript Remoting” ?
Well, here are few advantages of “Visualforce
Remote Objects” :
1. No need to write Controllers, Everything can be done in
Visualforce only.
2. As @RemoteAction annotated methods needs to be
static so you had to take special precaution as it didn’t supported Viewstate.
This hurdle is completely removed now.
3. No need to write Test Class now, as no Controller is involved.
4. Not counted against API call
How to start with this ?
At time of writing this article, This feature is under Pilot
release. So, you have to contact Salesforce support to enable it in your
Organization.
Visualforce code Sample :
<!-- This Demo will assume Querying Account Object -->
<apex:remoteObjects>
<apex:remoteObjectModel name="Account"
jsShorthand="getActs" fields="Name,Id">
<apex:remoteObjectField
name="ClientType__c" jsShorthand="cType">
</apex:remoteObjectModel>
</apex:remoteObjects>
you can
see in above code, few new Visualforce tags are introduced like “remoteObjectModel” and “remoteObjectField“.
jsShorthand attribute
defines shortcut that can be used inside your JavaScript code. Now, we don’t
have to write annoying object or field name ending with “__c” or namespace
name. This will keep our code tidy.
Javascript code Sample :
//Create new Remote Object Reference
var src = new SObjectModel.getActs();
//Use Remote Object to query 5 records
src.retrieve({
limit : 10,
where : {
cType :{
eq : 'Banking'
}
}
} ,
function(err,records){
if(err == null)
{
//Process returned "records" to display in Visualforce code.
}
} );
In above
code, we are calling retrieve() method of Javascript object SObjectModel.
Once you get records, you can process it in your javascript. Other than retrieve() , you can perform all CRUD operations
on object.
You can see below articles
also on same topic.
Let test this features quickly on our
own, by designing a visualforce page. Here I have designed a page that
pulls up ten accounts from Salesforce solely by using JavaScript Remote Objects
(see picture below)
Just copy-paste the code in your org
to test this by yourself. I am querying Accounts (standard object) and using
bootstrap CDN (check what is bootstrap and cdn go to bootstrap site to style the page. At the moment, I
wrote retrieve() operation that pulls ten records, soon ill update the code
will perform all sort of DML operation mentioned in the documentation.
Test on Salesforce 1 : this works like charm on
Salesforce 1
<apex:page
sidebar="false" showHeader="false"
standardStylesheets="false">
<apex:includeScript
value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"/>
<link
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
rel="stylesheet" media="screen"/>
<style>
.wrapper
{
text-align : center;
}
</style>
<!-- lets query Salesforce Contact using
remoting objects -->
<!--Lets add up Amount field on Contact
objects here using shorthand amt-->
<apex:remoteObjects >
<!--Name the field you like to
query-->
<apex:remoteObjectModel
name="Account" jsShorthand="acc"
fields="Id,Name,BillingState, 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({ limit: 10 }
,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">
<h1>Retrieve Contacts via Remote
Objects</h1>
<p>via Remote Objects</p>
<a href="#"
class="list-group-item active">
<h4
class="list-group-item-heading">What is Remote Object?</h4>
<p
class="list-group-item-text">Visualforce Remote Objects are proxy
objects that allow basic DML operations on sObjects directly from JavaScript.
Remote Objects take some of the complexity out of JavaScript remoting, by
reducing the need for @RemoteAction methods in an Apex controller or extension.
Like JavaScript remoting, <br/> Remote Objects calls don’t count towards
API request limits.</p>
</a>
<br/>
<div class="wrapper">
<p> <button class="btn btn-success btn-lg"
onclick="DML()"> <span class="glyphicon
glyphicon-star"></span>Pull
Accounts</button>
</p>
</div>
</div>
<a href="#"
class="list-group-item active">
<span class="glyphicon
glyphicon-list"></span> Accounts:
</a>
<div class="wrapper">
<ul class="list-inline"
id="cList">
</ul>
</div>
</apex:page>
