Retrieve Accounts via Remote Objects

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 ?

 

<!– 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“.

These components generate JavaScript model classes, one per sObject in the access specification, which you use to make data access calls directly from your JavaScript code. Notice the use of the jsShorthand attribute, which maps the full Salesforce API name to a simpler, shorter name to use in your JavaScript code. If you plan to package and distribute your code, setting jsShorthand is essential because it eliminates the use of your organization’s namespace in the packaged code. Using the shorthand does all the work.

 

<apex:page sidebar=”false” showHeader=”false” standardStylesheets=”false”>

<!– Remote Objects definition to set accessible sObjects and fields –>

<apex:remoteObjects >

<!–Name the field you like to query–>

<apex:remoteObjectModel name=”Account” jsShorthand=”acc” fields=”Id,Name,BillingState, Phone”/>

</apex:remoteObjects>

<!– JavaScript to make Remote Objects calls –>

<script>

var fetchAccounts = function(){

// Create a new Remote Object

var wh = new SobjectModel.acc();

// Use the Remote Object to query for 10 warehouse records

wh.retrieve({ limit: 10 }, function(err, records, event){

if(err) {

alert(err.message);

}else {

var ul = document.getElementById(“AccountsList”);

records.forEach(function(record) {

// Build the text for a warehouse line item

var whText = record.get(“Name”);

whText += ” — “;

whText += record.get(“Phone”);

// Add the line item to the warehouses list

var li = document.createElement(“li”);

li.appendChild(document.createTextNode(whText));

ul.appendChild(li);

});

}

});

};

</script>

<h1>Retrieve Accounts via Remote Objects</h1>

<p>Accounts:</p>

<ul id=”AccountsList”>

</ul>

<button onclick=”fetchAccounts()”>Fetch Accounts</button>

</apex:page>