Visualforce Remote Objects

Salesforce launched Visualforce Remote Objects with Spring’14 release.

Visualforce remote objects are proxy objects that you can use to perform DML operations on Saleforce objects and these do not counts towards API limits.

    Benefits of using Remote Objects:

  1. No need to use controllers or extensions.
  2. Reduces the need for @RemoteAction methods in an Apex controller or extension.
  3. No test classes.

Let’s go through an example

In this example I have tried to search accounts based on their type.

First of all we need to define about the object we are going to use.

< apex:remoteObjects >
    < apex:remoteObjectModel name="Account" fields="Name" jsShorthand="ac" >
       < apex:remoteObjectField name="Type" jsShorthand="ty">
       < /apex:remoteObjectField >
    < /apex:remoteObjectModel >
< /apex:remoteObjects >

Here, < apex:remoteObjects > tag is used to define the block were we will include everything related to Remote Objects.

This < apex:remoteObjectModel name="Account" fields="Name" jsShorthand="ac" > is being used to define the object on which the DML operations will be performed. Attribute name is used to hold the API name of the Object, fields attribute holds the fields you want to perform DML upon and jsShorthand is the shorthand notation for the object that you can use with the javaScript.

< apex:remoteObjectField name="Type" jsShorthand="ty" > </apex:remoteObjectField > is being used to refer the fields if you additionally want to add some conditions in your DML operation.

Let’s go on the javaScript code

< script type="text/javaScript" >
 function retrieveAccount(){
   clear();
//calling clear method to clear the existing records if shown in table
    var t = document.getElementById("srch").value; //getting the value from input box
    var acc = new SObjectModel.Account(); // this defines the object on which we going to perform operations

// the below code will retrieve the 100 records from account object where Type field of the record is equal to the type defined in input box on page and will display records as part of a table.

   var acnt = acc.retrieve({where: {ty: {eq: t }},limit : 100},
      function(err,records){
        if(err){
         alert("Encountered Error"+err.message);
                    }
        else{
            records.forEach(
                function(record){
                  var name = record.get("Name");
                   var row = document.createElement("tr");
                   row.appendChild(document.createTextNode(name));
                  var table = document.getElementById("accountTable");
                   table.appendChild(row);
                                               }
                                     );
                 }
                                     }
                                     });
                                     }
function clear(){
// clear function to clear the existing records on page.
document.getElementById("accountTable").innerHTML = "";
                           }
< /script >

Enter account type here:<input id="srch"></input> <!--Input box -->

<button onclick="retrieveAccount()">Search</button> <!--button which on click will javaScript method retrieveAccount -->

<table id="accountTable" border="1" cellspacing="10"> </table> <!--table that will hold records--> </apex:page>

Now you can take a look at the functionality, this feature also works on Salesforce1 !!

Visualforce Remote object Image