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.

  1. Add a template script block with an ID set to “search-page”. Place the block within the <body> block after the “content” <div> tag.

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

  3. Add a second script block for a user list template.

  4. 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.

  5. Add a third script block for a user details template.

  6. 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”.