Accessing Salesforce Data: Controllers vs. APIs

In an HTML5 app, you can access Salesforce data two ways.

  • By using JavaScript remoting to invoke your Apex controller.

  • By accessing the Salesforce API with force.js.

Apex supports the following two means of invoking Apex controller methods from JavaScript:

Both techniques use an AJAX request to invoke Apex controller methods directly from JavaScript. The JavaScript code must be hosted on a Visualforce page.

In comparison to apex:actionFunction, JavaScript remoting offers several advantages.

  • It offers greater flexibility and better performance than apex:actionFunction.
  • It supports parameters and return types in the Apex controller method, with automatic mapping between Apex and JavaScript types.
  • It uses an asynchronous processing model with callbacks.
  • Unlike apex:actionFunction, the AJAX request does not include the view state for the Visualforce page. This results in a faster round trip.

Compared to apex:actionFunction, however, JavaScript remoting requires you to write more code.

The following example inserts JavaScript code in a <script> tag on the Visualforce page. This code calls the invokeAction() method on the Visualforce remoting manager object. It passes invokeAction() the metadata needed to call a function named getItemId() on the Apex controller object objName. Because invokeAction() runs asynchronously, the code also defines a callback function to process the value returned from getItemId(). In the Apex controller, the @RemoteAction annotation exposes the getItemId() function to external JavaScript code.

See https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_classes_annotation_RemoteAction.htm to learn more about @RemoteAction annotations.

The following sample code queries Salesforce records from Apex by using the the cordova.js and force.js libraries. To add these resources to your Apex page:

  1. Create an archive file, such as a ZIP file, that contains cordova.js, force.js, and any other static resources your project requires.
  2. In Salesforce, upload the archive file via Your Name | App Setup | Develop | Static Resources.

The sample code uses an instance of the force.js library to log in to Salesforce. It then calls the force.query() method to process a SOQL query. The query callback function displays the Name fields returned by the query as HTML in an object with ID “contacts”. At the end of the Apex page, the HTML5 content defines the contacts element as a simple <ul> tag.

  • Using the REST API—even from a Visualforce page—consumes API calls.
  • Salesforce API calls made through a Mobile SDK container or through a Cordova webview do not require proxy services. Cordova webviews disable same-origin policy, so you can make API calls directly. This exemption applies to all Mobile SDK hybrid and native apps.

You can use the Mobile Sync in HTML5 apps. Just include the required JavaScript libraries as static resources. Take advantage of the model and routing features. Offline access is disabled for this use case. See Using Mobile Sync to Access Salesforce Objects.

Read these articles for tips on using HTML5 with Salesforce Platform offline.