Visualforce Remote Objects

Salesforce launched Visualforce Remote Objects with Spring’14 release.

Note: This feature is currently available as developer preview.

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 thru an example

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

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

<apex:page>

    <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 !!

Image

About these ads

Tagged: , , , ,

One thought on “Visualforce Remote Objects

  1. SutoCom March 14, 2014 at 6:53 am Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: