Using the JavaScript Library

When developing Visualforce Mobile pages, you can take advantage of the JavaScript library containing commands that trigger actions in Salesforce Classic, which helps provide a seamless user experience between Visualforce Mobile pages and the native client application.

The actions in the new JavaScript library can be used in any Visualforce page. These commands work on JavaScript-enabled devices that support Visualforce. Currently, these devices include iPhones and BlackBerry smartphones. When using the JavaScript library for pages that display on BlackBerry smartphones, Salesforce recommends that version 4.6 or later of the BlackBerry operating system is installed on the device.

One of the benefits of using the shared JavaScript library is that the commands work on both iPhone and BlackBerry operating systems.

Tip

To call the functions in the library, you need a small amount of JavaScript code. The functions are:

mobileforce.device.sync(): Forces the mobile client application to synchronize with Salesforce, which updates data records on the device.
mobileforce.device.close(): Closes the embedded browser containing the Visualforce page and returns the user to the originating tab or record.
mobileforce.device.syncClose(): Forces the mobile client application to synchronize with Salesforce and closes the embedded browser containing the Visualforce page.
mobileforce.device.getLocation(): Obtains the GPS coordinates of the device's current location.

You can also trigger the sync and close commands using HTML links, which is a good alternative for BlackBerry smartphones that have limited JavaScript support. To use HTML to trigger the commands, include the following string as the value of the href attribute inside an <a> tag:

To force the client to synchronize data, use mobileforce:///sync.
To force the embedded browser to close, use mobileforce:///close.
To force the embedded browser to close and the client to synchronize data, use mobileforce:///sync/close.

Note

In your Visualforce pages, use the following static resource to point to the JavaScript library:

1<script type="application/x-javascript" src="/mobileclient/api/mobileforce.js"></script>

External websites must include the instance name in the src parameter:

1<script type="application/x-javascript" src="http://na1.salesforce.com/mobileclient/api/mobileforce.js"></script>

The following code is an example of a Visualforce page that uses all of the commands available in the JavaScript library:

1swfobject.registerObject("clippy.codeblock-2", "9");<apex:page showheader="false">
2
3<html xmlns="http://www.w3.org/1999/xhtml">
4    <head>
5    <title>Visualforce Mobile Trigger Test</title>
6
7    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
8
9    <!-- Using static resource -->
10    <script type="application/x-javascript" src="/mobileclient/api/mobileforce.js"></script>
11
12    <script>
13    function sync() {
14        mobileforce.device.sync();
15            return false;
16    }
17
18    function doClose() {
19        mobileforce.device.close();
20            return false;
21    }
22
23    function syncClose() {
24        mobileforce.device.syncClose();
25            return false;
26    }
27
28    updateLocation = function(lat,lon) {
29        document.getElementById('lat').value = lat;
30        document.getElementById('lon').value = lon;
31    }
32
33    function getLocation() {
34        mobileforce.device.getLocation(updateLocation);
35        return false;
36    }
37
38    </script>
39    </head>
40<body>
41<h2>Triggers:</h2>
42<p>
43    <a href="#" onclick="return sync();">JS sync</a><br/>
44    <a href="#" onclick="return doClose();">JS close</a><br/>
45    <a href="#" onclick="return syncClose();">JS sync and close</a><br/>
46    <a href="mobileforce:///sync">HTML sync</a><br/>
47    <a href="mobileforce:///close">HTML close</a><br/>
48    <a href="mobileforce:///sync/close">HTML sync and close</a><br/>
49</p>
50
51<h2>Location:</h2>
52
53<p>Latitude: <input type="text" disabled="disabled" id="lat" name="lat" value=""/></p>
54
55<p>Logitude: <input type="text" disabled="disabled" id="lon" name="lon" value=""/></p>
56
57<a href="#" onclick="return getLocation();">Get location</a><br/>
58
59</body>
60</html>
61
62</apex:page>

Visualforce Developer’s Guide

No Results

Using the JavaScript Library