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.

Create View Templates

Templates let you describe an HTML layout within a container HTML page. To define an inline template in your HTML page, you use a <script> tag of type “text/template”. JavaScript code can apply your template to the page design when it instantiates a new HTML page at runtime.

The search-page template is simple. It includes a header, a search field, and a list to hold the search results. At runtime, the search page instantiates the user-list-item template to render the results list. When a customer clicks a list item, the list instantiates the user-page template to show user details.

Add a template script block with an ID set to “search-page”. Place the block within the <body> block after the “content” <div> tag.
1<script id="search-page" type="text/template"> 2</script>

In the new <script> block, define the search page HTML template using Ratchet styles.

1<script id="search-page" type="text/template">
2  <header class="bar-title">
3    <h1 class="title">Users</h1>
4  </header>
5
6  <div class="bar-standard bar-header-secondary">
7    <input type="search" class="search-key" 
8        placeholder="Search"/>
9  </div>
10
11  <div class="content">
12    <ul class="list"></ul>
13  </div>
14</script>

Add a second script block for a user list template.

1<script id="user-list-item" type="text/template">
2</script>

Define the user list template. Notice that this template contains references to the SmallPhotoUrl, FirstName, LastName, and Title fields from the Salesforce user record. References that use the <%= varname %> format are called “free variables” in Ratchet apps.

1<script id="user-list-item" type="text/template">
2  <a href="#users/<%= Id %>" class="pad-right">
3    <img src="<%= SmallPhotoUrl %>" class="small-img" />
4    <div class="details-short">
5      <b><%= FirstName %> <%= LastName %></b><br/>
6      Title<%= Title %>
7    </div>
8  </a>
9</script>

Add a third script block for a user details template.

1<script id="user-page" type="text/template">
2</script>

Add the template body. Notice that this template contains references to the SmallPhotoUrl, FirstName, LastName, and Title fields from the Salesforce user record. References that use the <%= varname %> format in Ratchet apps are called “free variables”.

1<script id="user-page" type="text/template">
2  <header class="bar-title">
3    <a href="#" class="button-prev">Back</a>
4    <h1 class="title">User</h1>
5  </header>
6
7  <footer class="bar-footer">
8    <span id="offlineStatus"></span>
9  </footer>
10
11  <div class="content">
12    <div class="content-padded">
13      <img id="employeePic" src="<%= SmallPhotoUrl %>" 
14         class="large-img" />
15      <div class="details">
16        <b><%= FirstName %> <%= LastName %></b><br/>
17        <%= Id %><br/>
18        <% if (Title) { %><%= Title %><br/><% } %>
19        <% if (City) { %><%= City %><br/><% } %>
20        <% if (MobilePhone) { %> <a 
21           href="tel:<%= MobilePhone %>">
22           <%= MobilePhone %></a><br/><% } %>
23        <% if (Email) { %><a 
24           href="mailto:<%= Email %>">
25           <%= Email %></a><% } %>
26      </div>
27    </div>
28  </div>
29</script>

Mobile SDK Development Guide

Create View Templates