Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Edit the Application HTML File

To create your app’s basic structure, define an empty HTML page that contains references, links, and code infrastructure.

From the www folder, open UserSearch.html in your code editor and delete all its contents.

Delete the contents and add the following basic structure:

1<!DOCTYPE html>
2<html>
3  <head>
4  </head>
5  <body>
6  </body>
7</html>

In the <head> element:

Specify that the page title is “Users”.
1<title>Users</title>

Turn off scaling to make the page look like an app rather than a web page.

1<meta name="viewport" content="width=device-width, initial-scale=1.0,
2    maximum-scale=1.0, user-scalable=no;" />

Provide a mobile “look” by adding links to the styles.css and ratchet.css files.

1<link rel="stylesheet" href="css/styles.css"/>
2<link rel="stylesheet" href="css/ratchet.css"/>

Now let’s start adding content to the body. In the <body> block, add an empty div tag, with ID set to “content”, to contain the app’s generated UI.
1<body> 2<div id="content"></div>

Include the necessary JavaScript files.

1<script src="js/jquery.min.js"></script>
2<script src="js/underscore-min.js"></script>
3<script src="js/backbone-min.js"></script>
4<script src="cordova.js"></script>
5<script src="js/force.js"></script>
6<script src="js/force+promise.js"></script>
7<script src="js/mobilesync.js"></script>
8<script src="js/fastclick.js"></script>
9<script src="js/stackrouter.js"></script>
10<script src="js/auth.js"></script>

Example

Here’s the complete application to this point.

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Users</title>
5    <meta name="viewport" content="width=device-width, 
6      initial-scale=1.0, maximum-scale=1.0; 
7      user-scalable=no" />
8    <link rel="stylesheet" href="css/styles.css"/>
9    <link rel="stylesheet" href="css/ratchet.css"/>
10  </head>
11  <body>
12    <div id="content"></div>
13    <script src="js/jquery.min.js"></script>
14    <script src="js/underscore-min.js"></script>
15    <script src="js/backbone-min.js"></script>
16    <script src="cordova.js"></script>
17    <script src="js/force.js"></script>
18    <script src="js/force+promise.js"></script>
19    <script src="js/mobilesync.js"></script>
20    <script src="js/fastclick.js"></script>
21    <script src="js/stackrouter.js"></script>
22    <script src="js/auth.js"></script>
23  </body>
24</html>

Mobile SDK Development Guide

Edit the Application HTML File

Example