Mobile SDK Development Guide
jAccessing 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.
Using JavaScript Remoting to Invoke Your Apex Controller
- 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.
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.
1//Visualforce page code
2<script type="text/javascript">
3 Visualforce.remoting.Manager.invokeAction(
4 '{!$RemoteAction.MyController.getItemId}',
5 objName,
6 function(result, event){
7 //process response here
8 },
9 {escape: true}
10 );
11<script>
12
13//Apex Controller code
14
15@RemoteAction
16global static String getItemId(String objectName) { ... }See https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_classes_annotation_RemoteAction.htm to learn more about @RemoteAction annotations.
Accessing the Salesforce API with Force.js
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:
- Create an archive file, such as a ZIP file, that contains cordova.js, force.js, and any other static resources your project requires.
- In Salesforce, upload the archive file via .
1<apex:page docType="html-5.0" sidebar="false" showHeader="false"
2 contentType="text/html" applyHtmlTag="false" applyBodyTag="false"
3 standardStylesheets="false" cache="true">
4<html>
5 <head>
6 <meta charset="utf-8"></meta>
7 <meta name="viewport"
8 content="initial-scale=1, maximum-scale=1, user-scalable=no"></meta>
9
10 <apex:includeScript value="{!URLFOR($Resource.Easy,
11 'cordova/cordova.js')}"
12 <apex:includeScript value="{!URLFOR($Resource.Easy,
13 'libs/force.js')}" />
14 <script>
15(function() {
16 /* Do login */
17 force.login(
18 function() {
19 console.log("Auth succeeded");
20 showContactsList();
21 },
22 function(error) {
23 console.log("Auth failed: " + error);
24 }
25 );
26
27 /* This method will render a list of contacts from current salesforce org */
28 var showContactsList = function() {
29
30 fetchRecords(function(data) {
31 var contacts = data.records;
32
33 var listItemsHtml = '';
34 for (var i=0; i < contacts.length; i++) {
35 listItemsHtml += ('<li class="table-view-cell"><
36 div class="media-body">' + contacts[i].Name + '</div></li>');
37 }
38
39 document.querySelector('#contacts').innerHTML = listItemsHtml;
40 })
41 }
42
43 /* This method will fetch a list of contact records from salesforce.
44 Just change the soql query to fetch another sobject. */
45 var fetchRecords = function (successHandler) {
46 var soql = 'SELECT Id, Name FROM Contact LIMIT 10';
47 force.query(soql, successHandler, function(error) {
48 alert('Failed to fetch contacts: ' + error);
49 });
50 };
51
52})();
53 </script>
54 </head>
55 <body>
56
57 <header>
58 <h1>Hello, Visualforce!</h1>
59 </header>
60
61 <!-- Placeholder to add Contacts list -->
62
63 <ul id="contacts">
64 </ul>
65
66 <p>Welcome to Mobile SDK.</p>
67 </body>
68</html>
69
70</apex:page>Additional Options
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.
Salesforce Developer Marketing provides developer mobile packs that can help you get a quick start with HTML5 apps.