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.
apex:actionFunction.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.
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>Note
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.
We've Moved
j