by Karanraj Sankaranarayanan, March 2015

Visualforce Remote Objects are proxy objects that allow basic DML operation on sObjects directly from JavaScript. Without writing any controller class we can retrieve the data and perform DML operations in a single Visualforce page itself. So you can ask me, “If I perform a DML operation from JavaScript, will it count towards API request limits?” I would answer a big NO. Visualforce Remote Objects calls don't count towards API request limits.

Visualforce Remote Objects is one of the most efficient methods to quickly add simple data operations in a Visualforce page or when working with any JavaScript libraries. In this article, I'll show you how to build a single page application using Visualforce Remote Objects, which will perform CRUD operations in a Visualforce page without writing a single line of Apex code. First, let’s take a look into the key functionality of Visualforce Remote Objects.


Access Definitions

First, let’s examine the remote object components. The Access definition will create a JavaScript proxy object, which is used to perform DML operations. Here are the elements used in the Visualforce page.

  1. <apex:remoteObjects> - This component will generate a model in JavaScript that you can use for basic create, select, update, and delete operations in the client-side JavaScript. Use this component in the Visualforce page along with the <apex:remoteObjectModel> and <apex:remoteObjectField> components.
  2. <apex:remoteObjectModel> - This component is used to define an sObject and its fields to make them accessible using Visualforce Remote Objects. This also allows you to define a JavaScript shorthand name to use in your JavaScript instead of using a full API name of the object.
  3. <apex:remoteObjectModel> - This component is used to define the fields for the loaded sObject. You can also define fields in the <apex:remoteObjectmodel> component, but this component helps you define the JavaScript shorthand name for the fields to access instead of using the full API name of the fields.
<apex:remoteObjects >
<apex:remoteObjectModel name="Contact" jsShorthand="cont" fields="Name,Id,FirstName,LastName,Phone,Email,Title,AccountId">
</apex:remoteObjectModel>
</apex:remoteObjects>


Data Access Function

This section includes JavaScript to select, create, update, and delete records for the proxy objects that we created in Step 1. Let’s take a look into the actions one by one.


Initiate Remote Object in JavaScript

Initially, we have to instantiate the remote object in JavaScript. This is common for all of our DML operation methods. ‘cont’ is jsShorthand for our remote object Contact:

var ct= new SObjectModel.cont();


Retrieve Records

The retrieve() method on the remote object instance will fetch the records from remote objects. This method accepts two arguments: Criteria(where conditions) and Callback function(we need to process the retrieved records either to store or display in the page):

RemoteObjectModel.retrieve({criteria}, callback_function)

On the page load we will call the function fetchContact() in our code, which will retrieve the contact records. The fields that are mentioned in the <apex:remoteobjectmodel> will be fetched.

function fetchContact(){
var ct= new SObjectModel.cont();
ct.retrieve({
where:{
Name: { like:$('#search').val()+'%'}
},
limit: 100
},function(err, records){
//logic to display/store records
}
}


Create Records

The Create() method on remote object instances will allow us to insert new records. Field values are set by passing in a JSON string with values for the fields. This create method accepts two arguments:

RemoteObjectModel.create({field_values}, callback_function)

For example, when the user clicks Save, it will call the function CreateContact(), which will get the user the entered value from the form and assign it to the field.

//Function to Create Contact record
function Createcontact(){
 	var createCon = new SObjectModel.cont({
	FirstName : $('#inputFirstName').val(),
           LastName : $('#inputLastName').val(),
          Title : $('#inputTitle').val(),
          Phone : $('#inputPhone').val(),
         Email : $('#inputEmail').val()
      });
  createCon.create();
} 


Update Records

The update() method on remote object instances will allow us to update records. The update() method supports three arguments that are all optional. You can update one or more records based on the arguments you are passing:

RemoteObjectModel.update([record_ids], {field_values}, callback_function)

When a user clicks Update in the page, it will invoke the UpdateContact() JavaScript method. Apart from the user-entered values, we need the record ID to update records.

//Function to Update Contact record
function Updatecontact(){
		 var updateCon = new SObjectModel.cont({
                        ID : $('#CId').val(), 
 		 FirstName : $('#inputFirstName').val(),
                        LastName : $('#inputLastName').val(),
                       Title : $('#inputTitle').val(),
                       Phone : $('#inputPhone').val(),
                       Email : $('#inputEmail').val()
  	});
              updateCon.update();
} 


Delete Records

Similar to Create and Update operations, the del() method on remote object instances will allow us to delete records. The del() method supports two arguments:

RemoteObjectModel.update([record_ids],callback_function)

The del() method supports deleting more than one record by passing an array of record IDs in the argument.

//Function to Delete contact record
var id = $jQuery('#contactId').val();
var ct = new RemoteObjectModel.Contact();
ct.del(id);


Contacts.png


In our example we used bootstrap and jQuery for the responsive UI design of the page. You can either download the file and keep it as the static resource of your org, or refer to it in the Visualforce page. For simplicity, I have directly linked the CSS and JavaScript files using the Link and Script tags.

<!-- Boostrap and jQuery file --> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

The complete source code of the page is available here.


Remote Objects Limits

  • You can retrieve a maximum of 100 rows in a single request. To display more rows, submit additional requests by using the OFFSET query parameter.
  • Setting the rendered attribute to false on Remote Objects components disables the generation of the JavaScript for those Remote Objects.


Summary

We have now created a single page app in a Visualforce page using Visualforce Remote Objects components, which perform retrieve, create, update, and delete operations on Remote Objects without a single line of Apex code, and without making any API calls. Comments and questions are welcome.

About the Author

Karanraj Sankaranarayanan is working as a Salesforce Consultant at HCL Technologies and also Organiser of Chennai Salesforce Developer group. You can reach him on twitter @karanrajs