Using Visualforce Remote Objects in JavaScript

The JavaScript models that are generated by the Remote Objects components provide a JavaScript API to create functions for your app that read and save values back to Salesforce. Use the base model that is created by the <apex:remoteObjects> component to instantiate specific models for corresponding sObjects. Then use the specific models to perform actions on their sObjects, such as retrieving, creating, updating, and deleting.

The base model for your Remote Objects is created by the <apex:remoteObjects> component. The base model provides a pseudonamespace for Remote Objects that you create with it. By default the base model is named SObjectModel, but you can set the name by using the jsNamespace attribute. Use different base models to group related Remote Objects along functional or package lines. For example:

1<apex:remoteObjects jsNamespace="MyCorpModels">
2    <apex:remoteObjectModel name="Contact" fields="FirstName,LastName"/>
3</apex:remoteObjects>
4<apex:remoteObjects jsNamespace="TrackerModels">
5    <apex:remoteObjectModel name="Shipment__c" fields="Id,TrackNum__c"/>
6</apex:remoteObjects>

Specific Models

You don’t normally create a base model yourself but instead use the generated base model as a factory for creating specific models. For example, with the above declaration, instantiate a Contact model in JavaScript like this:

1var ct = new MyCorpModels.Contact();

Note that ct is a JavaScript model for the Contact object, not a specific Contact record.

ct represents a specific object, Contact, and provides a connection between your page’s JavaScript and the Salesforce service. ct can be used to perform the basic “CRUD” operations—create, read, update, and delete—on contact objects in the database.

In the following sections, examples are based on the following Remote Objects declaration, which uses all three Remote Objects components and shows how to add a custom field, Notes__c, with a “shorthand” name to make accessing it in JavaScript more natural.

1<apex:remoteObjects jsNamespace="RemoteObjectModel">
2    <apex:remoteObjectModel name="Contact" fields="Id,FirstName,LastName,Phone">
3        <apex:remoteObjectField name="Notes__c" jsShorthand="Notes"/>
4    </apex:remoteObjectModel>
5</apex:remoteObjects>

This declaration enables you to access five fields on Contact records.

Instantiating Models and Accessing Fields

Instantiate a model with or without field values set, depending on your intent. Generally, you’ll set fields when you want to write changes to the database and omit fields when you’re just reading. Field values are set by passing in a JSON string with values for the fields to set on the new model.

To create a model without fields set, create it with an empty parameters list.

1var ct = new RemoteObjectModel.Contact();

To instantiate a model with fields set, typically to create a new record, pass in an object that contains field name and value pairs. For example:

1var ct = new RemoteObjectModel.Contact({ 
2    FirstName: "Aldo",
3    LastName: "Michaels", 
4    Phone: "(415) 555-1212"
5});

Remote Objects models use basic get() and set() methods to retrieve and set field values. For example:

1var ct = new RemoteObjectModel.Contact({ FirstName: "Aldo" });
2ct.get('FirstName');  // 'Aldo'
3ct.get('Phone'); // <undefined>
4ct.set('FirstName', 'Benedict');
5ct.set('Phone', '(415) 555-1212');

There’s no functional difference between setting field values with a properties list in the constructor and setting field values with set().

Visualforce Developer Guide

Using Visualforce Remote Objects in JavaScript

Specific Models

Instantiating Models and Accessing Fields