In the previous tutorials in the series, you created the starter files for an app named Learn about Sell and modified the HTML file that's iframed into the deal interface in Zendesk Sell. The HTML file so far displays only the title and footer of your app. In this tutorial, you'll create templates to display a button which will retrieve Help Center articles about deals, and display the deal card name.

Templates are typically the building blocks of an app's user interface. They define different states, or views, for an application. For example, one template can contain an HTML form for entering search terms, and another template can dynamically list the search results.

This tutorial covers the following tasks:

  1. Adding a templating engine
  2. Creating a template to display a button
  3. Inserting the button template in your app
  4. Creating a template to display the deal card name
  5. Inserting the deal card name template in your app

This tutorial is part of a series on building a Zendesk app:

Adding a templating engine

You can use any templating engine and whatever version you like with your apps. For this project, you will use Handlebars.js, one of the most popular templating libraries.

  • Import the Handlebars library in your app by inserting the following <script> tag in iframe.html before the <script> tag that references your main.js file:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handlebars.min.js"></script>

Creating a template to display a button

Based on the design requirements in Planning the app, the template should display a Get docs button:

In Handlebars, you can define templates by including them in <script> tags.

To create the template

  1. Open your iframe.html file and add the following <script> tag before all the other <script> tags:

    <script id="get-docs-btn-template" type="text/x-handlebars-template"><button type="button" id="get-btn" class="c-btn.c-btn--sm">Get docs</button></script>

    The script tag defines a template consisting of a Get docs button.

  2. Style the form elements by adding the following rules to the main.css file you created in the assets folder in the previous tutorial:

    h2 {font-size: 13px;font-weight: 700;color: #144a75;padding: 12px 0 6px 0;line-height: 18px;font-family: Graphik, Helvetica, Arial, sans-serif;}
    #get-btn {margin: 10px 2px 10px 2px;font-size: 11px;color: #2f3941;background: #f6f7f8;border: 0.5px solid #ced3d9;}
  3. Save the iframe.html and main.css files.

If you reload the app in your browser, it doesn't change because you haven't inserted the template in the HTML yet. The next step is to insert the template and then confirm that it works.

Inserting the button template in your app

You insert templates into an element of your choice in the document. You add a <div> tag in your HTML file for inserting templates at runtime. Only one template at a time can be inserted, but you can switch to a different template. For example, you can start by displaying the splash page and then switch to another page after the user clicks a button.

To insert the button template in your app

  1. In iframe.html file, add the following <div> tag after the <h2> tag, but before the <footer> tag:

    <div id="content"></div>
  2. In main.js, add the following function call (highlighted) after the resize statement in the self-invoking function:

    $(function () {var client = ZAFClient.init();client.invoke("resize", { width: "100%", height: "180px" });showGetDocsButton();});
  3. Add your new showGetDocsButton() function definition after the self-invoking function:

    function showGetDocsButton() {var source = $("#get-docs-btn-template").html();var template = Handlebars.compile(source);$("#content").html(template());}

    The first statement in the function references the <script> tag in iframe.html that contains the template. The second statement compiles the template. The third line generates the HTML from the template and uses it to set the HTML content of your <div> tag from step 1.

  4. Save both files and reload the Sell app in your browser. If your ZAT server is not already started, see "Testing the app" in part 2 of this series for instructions. Handlebars sets the HTML content of the <div id="content"> tag in the iframe.html file:

Creating a template to display the deal card name

Next, you'll create another template to display the deal card name in the app window.

To create the template

  • In the iframe.html file, add the following handlebars template:

    <script id="deal-name-template" type="text/x-handlebars-template"><div class="u-zeta"><h3>{{name}}</h3></div></script>

The handlebar template name "deal-name-template" contains a {{name}} expression which is replaced by a value supplied in a function's data object, which is defined in the next section.

Inserting the deal card name template in the app

You'll create a <div> tag in your HTML file and insert a function in main.js, so the deal name template is inserted at runtime.

To insert the deal name template in your app

  1. In iframe.html file, add the following <div> tag before the <div> content tag:

    <div id="deal-name"></div>
  2. In the main.js file, insert the following function:

    function dealCardName(deal_name) {var data = { name: deal_name };var source = $("#deal-name-template").html();var template = Handlebars.compile(source);var html = template(data);$("#deal-name").html(html);}

    The first statement defines the "data" variable with the "name" property and value with the assigned "deal_name" variable. The second statement references the <script> tag in iframe.html that contains the "deal-name-template" handlebar template. The third statement compiles the template. The function generates the HTML from the template, and uses it to display content in the div element named "deal-name".

    The "deal_name" variable is assigned from an API response to retrieve the deal name. You'll set it up in the next tutorial, so the deal card name is displayed in the app. For now, we'll replace it with placeholder text so the template is visible in the app.

  3. In the dealCardName() function, for the data variable, replace deal_name with "Deal name placeholder":

    var data = { name: **"Deal name placeholder"** };

  4. Save the files, and reload the app.

If you're moving to the next tutorial, you can leave the ZAT server running. If you're done for this session, you can shut down the server by switching to your command-line interface and pressing Control+C.

In this tutorial, you created templates to display a button and a placeholder for the deal card name. You also learned how to insert the templates into your app. In the next tutorial, you learn how to get and display articles from the Sell API. Continue to Part 4 - Getting data.