Visualforce Remote Objects—Developer Preview

JavaScript remoting is a popular, powerful, and efficient method for building web apps with Visualforce, especially for creating pages for use in Salesforce1, or working with JavaScript libraries like jQuery or AngularJS. 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, Remote Objects calls don’t count towards API request limits.
Note

Note

Remote Objects is currently available as a Developer Preview.

Using Visualforce Remote Objects consists of two parts:
  • Access definitions, written in Visualforce using the new Remote Objects components. These components generate a set of JavaScript proxy objects that you can use in the next step.
  • Data access functions, written in JavaScript. These functions use the proxy objects made available by the access definitions to perform create, select, update, and delete operations on your data.
Your page then uses the data access functions to respond to user interaction, including form submissions or controls changes, or in response to timers, or pretty much anything you can write in JavaScript.

Remote Objects Example

This short example shows the two elements of using Remote Objects. This Visualforce page retrieves a list of 10 warehouse records and displays them on the page, in response to the user clicking the Retrieve Warehouses button.
<apex:page>
    
    <!-- Remote Objects definition to set accessible sObjects and fields -->
    <apex:remoteObjects >
      <apex:remoteObjectModel name="Warehouse__c" jsShorthand="Warehouse" fields="Name,Id">
            <apex:remoteObjectField name="Phone__c" jsShorthand="Phone"/>
        </apex:remoteObjectModel>
    </apex:remoteObjects>

    <!-- JavaScript to make Remote Objects calls -->
    <script>
        fetchWarehouses = function(){
            // Create a new Remote Object
            var wh = new SObjectModel.Warehouse();
            
            // Use the Remote Object to query for 10 warehouse records
            wh.retrieve({ limit: 10 }, function(err, records){
                if(err) alert(err.message);
                else {
                    var ul = document.getElementById("warehousesList");
                    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 Warehouses via Remote Objects</h1>

    <p>Warehouses:</p>

    <ul id="warehousesList">
    </ul>
    <button onclick="fetchWarehouses()">Retrieve Warehouses</button>

</apex:page>
Notice something very unusual about this page—there is no controller or controller extension. All of the data access is handled by the Remote Objects components.
The first part of this example is the Remote Objects components that specify which objects and fields to make accessible on the page.
<apex:remoteObjects >
    <apex:remoteObjectModel name="Warehouse__c" jsShorthand="Warehouse" fields="Name,Id">
        <apex:remoteObjectField name="Phone__c" jsShorthand="Phone"/>
    </apex:remoteObjectModel>
</apex:remoteObjects>
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 creates a “mapping” between the full Salesforce API name, and a simpler, shorter name to use in your JavaScript code. Setting jsShorthand is essential if you plan to package and distribute your code, because it eliminates the use of your organization’s namespace in the packaged code. Using the shorthand does all the work.
The second part of this example is a JavaScript function that uses the models generated by the access definition components to retrieve a set of records for display on the page.
<!-- JavaScript to make Remote Objects calls -->
<script>
    fetchWarehouses = function(){
        // Create a new Remote Object
        var wh = new SObjectModel.Warehouse();
        
        // Use the Remote Object to query for 10 warehouse records
        wh.retrieve({ limit: 10 }, function(err, records){
            if(err) alert(err.message);
            else {
                var ul = document.getElementById("warehousesList");
                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>
The first line of the function creates a new Warehouse object from the model; notice that the call that creates it uses the jsShorthand for the sObject, instead of the full API name of the object. This is a best practice: it decouples your JavaScript code from the specifics of your organization namespace, sObject and field names, and so on. It also makes your code more succinct and clear.

The second line uses the new Warehouse object, wh, to perform a query for Warehouse records. The call provides two things as arguments: a simple query specifier, and an anonymous function to handle the results. The function itself is standard JavaScript; it simply iterates over the results, and creates list items to append to the list of warehouses on the page.

Finally, the page body is static HTML.
<h1>Retrieve Warehouses via Remote Objects</h1>

<p>Warehouses:</p>

<ul id="warehousesList">
</ul>
<button onclick="fetchWarehouses()">Retrieve Warehouses</button>
The empty list serves as an element into which the results can be added. When the page first loads, the list is empty. Clicking the button fires the JavaScript function defined earlier, which performs the query and adds the results.

Finally, compare this sample to the example at the end of Geolocation Compound Fields, which does approximately the same thing. This sample uses basic JavaScript only, while the other uses jQuery, which makes for an interesting stylistic contrast. It’s also worth noting that, unlike the other sample, this one isn’t subject to API call limits.

Although Remote Objects supports only create, select, update, and delete operations, it’s quite flexible in how it does so. See “Using Remote Objects in JavaScript” in the Visualforce Developer’s Guide for much more detail.