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