What is Visualforce Remote Objects.?

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.

·         Spring’14 Visualforce Remote Objects Introduction

·         Visualforce Remote Objects “” Pilot – Release Notes

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>

Posted in: @RemoteAction,<apex:remoteObjectField>,<apex:remoteObjectModel>,<apex:remoteObjects>,apex,Java Script Remoting,jsShorthand,Salesforce,Visualforce Pages,Visualforce Remote Objects