A Simple Example of Remote Objects

This short example demonstrates the two pieces of functionality you need to implement to use 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.

1<apex:page>
2    
3    <!-- Remote Objects definition to set accessible sObjects and fields -->
4    <apex:remoteObjects >
5        <apex:remoteObjectModel name="Warehouse__c" jsShorthand="Warehouse" 
6            fields="Name,Id">
7            <apex:remoteObjectField name="Phone__c" jsShorthand="Phone"/>
8        </apex:remoteObjectModel>
9    </apex:remoteObjects>
10
11    <!-- JavaScript to make Remote Objects calls -->
12    <script>
13        var fetchWarehouses = function(){
14            // Create a new Remote Object
15            var wh = new SObjectModel.Warehouse();
16            
17            // Use the Remote Object to query for 10 warehouse records
18            wh.retrieve({ limit: 10 }, function(err, records, event){
19                if(err) {
20                    alert(err.message);
21                }
22                else {
23                    var ul = document.getElementById("warehousesList");
24                    records.forEach(function(record) {
25                        // Build the text for a warehouse line item
26                        var whText = record.get("Name");
27                        whText += " -- ";
28                        whText += record.get("Phone");
29                        
30                        // Add the line item to the warehouses list
31                        var li = document.createElement("li");
32                        li.appendChild(document.createTextNode(whText));
33                        ul.appendChild(li);
34                    });
35                }
36            });
37        };
38    </script>
39
40    <h1>Retrieve Warehouses via Remote Objects</h1>
41
42    <p>Warehouses:</p>
43
44    <ul id="warehousesList">
45    </ul>
46    <button onclick="fetchWarehouses()">Retrieve Warehouses</button>
47
48</apex:page>

Notice something 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.

1<apex:remoteObjects >
2    <apex:remoteObjectModel name="Warehouse__c" jsShorthand="Warehouse" fields="Name,Id">
3        <apex:remoteObjectField name="Phone__c" jsShorthand="Phone"/>
4    </apex:remoteObjectModel>
5</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 maps the full Salesforce API name to a simpler, shorter name to use in your JavaScript code. If you plan to package and distribute your code, setting jsShorthand is essential 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 that are generated by the access definition components to retrieve a set of records for display on the page.

1<!-- JavaScript to make Remote Objects calls -->
2<script>
3    var fetchWarehouses = function(){
4        // Create a new Remote Object
5        var wh = new SObjectModel.Warehouse();
6        
7        // Use the Remote Object to query for 10 warehouse records
8        wh.retrieve({ limit: 10 }, function(err, records, event){
9            if(err) {
10                alert(err.message);
11            }
12            else {
13                var ul = document.getElementById("warehousesList");
14                records.forEach(function(record) {
15                    // Build the text for a warehouse line item
16                    var whText = record.get("Name");
17                    whText += " -- ";
18                    whText += record.get("Phone");
19                    
20                    // Add the line item to the warehouses list
21                    var li = document.createElement("li");
22                    li.appendChild(document.createTextNode(whText));
23                    ul.appendChild(li);
24                });
25            }
26        });
27    };
28</script>

The first line of the function creates a 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. Following this best practice decouples your JavaScript code from the specifics of your organization namespace, sObject and field names, and so on, and 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 arguments: a simple query specifier and an anonymous function to handle the results. The function is standard JavaScript. It iterates over the results and creates list items to append to the list of warehouses on the page.

The page body is static HTML.

1<h1>Retrieve Warehouses via Remote Objects</h1>
2
3<p>Warehouses:</p>
4
5<ul id="warehousesList">
6</ul>
7<button onclick="fetchWarehouses()">Retrieve Warehouses</button>

Your code adds results to the warehousesList list. When the page loads, the list is empty. Clicking the button fires the JavaScript function that was defined earlier, which performs the query and adds the results.

Visualforce Developer’s Guide

A Simple Example of Remote Objects