Build your first Support app - Part 3: Creating and inserting templates

Have more questions? Submit a request

22 Comments

  • Haroon Haider

    Nice tutorial Charles. One observation though, I am confused as to what the logic is in the javascript to determine if the requester_data was not found, so then it can display the error_data.


    So basically even if you did not comment out the showInfo(); function call it would still display the error message, as far as I have tested.

    0
  • Charles Nadeau

    Hi Haroon, 


    This tutorial only describes how to display the info and error templates. The next tutorial describes the logic that determines what template to display -- info or error? See https://help.zendesk.com/hc/en-us/articles/229489148.

    0
  • Bhushan Sakate

    The showInfo() and showError() functions r  not working in my App.


     

    0
  • Jessie Schutz

    Hey Bhushan!


    Can you give more details about what's happening?

    0
  • David

    The showInfo() and showError() functions are not displaying in my App. I've deleted the code and even copied it exactly from the tutorial twice and it still isn't working. Here is my code. Only the App Title, Logo and Report Bug link are showing. 



    main.js

    function() {
    var client = ZAFClient.init();
    client.invoke('resize', { width: '100%', height: '20px' });
    showInfo();
    showError();
    };



    function showInfo() {
    var requester_data = {
    'name': 'Jane Doe',
    'tags': ['tag1', 'tag2'],
    'created_at': 'November 20, 2014',
    'last_login_at': 'June 27, 2016'
    };


    var source = $("#requester-template").html();
    var template = Handlebars.compile(source);
    var html = template(requester_data);
    $("#content").html(html);
    }


    function showError() {
    var error_data = {
    'status': 404,
    'statusText': 'Not found'
    };
    var source = $("#error-template").html();
    var template = Handlebars.compile(source);
    var html = template(error_data);
    $("#content").html(html);
    }







    main.css


    .data {
    color: #363;
    padding-left: 6px;
    }


    #content td {
    font-size: 12px;
    padding-top: 2px;
    }







    iframe.html

    <html>
    <head>
    <meta charset="utf-8">



    <link href="https://cdn.jsdelivr.net/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">
    </head>
    <body>
    <div id="content"></div>



    <footer>
    <a href="https://mysite.github.io/support" target="_blank">Report bugs</a>
    </footer>
    <script id="requester-template" type="text/x-handlebars-template">
    <table>
    <tr>
    <td>Customer:</td>
    <td class="data">{{name}}</td>
    </tr>
    {{#if tags}}
    <tr>
    <td>Tags:</td>
    <td class="data">{{#each tags}}{{this}} {{/each}}</td>
    </tr>
    {{/if}}
    <tr>
    <td>Added:</td>
    <td class="data">{{created_at}}</td>
    </tr>
    <tr>
    <td>Last signed in:</td>
    <td class="data">{{last_login_at}}</td>
    </tr>
    </table>
    </script>


    <script id="error-template" type="text/x-handlebars-template">
    <p>{{status}} - {{statusText}} error. Please report a bug at the link below.</p>
    </script>

    <script src="https://cdn.jsdelivr.net/handlebarsjs/4.0.8/handlebars.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
    <script type="text/javascript" src="main.js"></script>


    </body>
    </html>

    0
  • Charles Nadeau

    Hey David,


    Code looks okay, though I notice you set the height of your app to 20px:


    client.invoke('resize', { width: '100%', height: '20px' });

    Try 120 or 160.


    Also make sure to selectively comment out the show functions to test each one separately. Example:


    $(function() {
    
    var client = ZAFClient.init();
    client.invoke('resize', { width: '100%', height: '120px' });
    // showInfo();
    showError();
    });

    Hope this helps.


     

    0
  • Marc Evangelista

    I had the same problem, that showInfo and showError is not working. In my case the solution was to change the browser, use firefox instead of chrome

    0
  • Jessie Schutz

    Hey Marc!


    I'm glad you figured out a way to make it work! Out of curiosity, are you running the most recent version of Chrome? I'm kind of surprised it didn't work.

    0
  • Heather Cook

    Hi Team,


    I am on the step just making the text look better.


    I have managed everything else, but the text won't change. I've been copying all the code exactly as the tutorial and then just adding in comments for my reference.


    How can I get help on this?


    Thank you,


    Heather

    0
  • Jessie Schutz

    Hey Heather! Let me see if I can find someone to help with this. Stand by!

    0
  • Heather Cook

    Hi Jessie,


    Thanks for the response, but it has now just resolved itself...


    Thank you


    Heather

    0
  • Jessie Schutz

    Fantastic! Maybe it was just a caching issue.

    0
  • Krzy Hamer

    Hi i want to use zendesk garden css.
    I get stylesheet directly from:
    https://assets.zendesk.com/apps/sdk-assets/css/2/zendesk_garden.css

    But not all css showcased on https://garden.zendesk.com/css-components/tags/ is included - for eg. tags are missing.

    This file is official and should have all the css classes available on zendesk garden docs page, right?

    0
  • Charles Nadeau

    Hi Krzy,

    All the Zendesk Garden CSS classes (and now React components) are now available on JSDelivr and npm.

    See https://www.jsdelivr.com/?query=zendeskgarden. The jsDelivr files are npm packages that can also be installed from npm. See https://www.npmjs.com/search?q=zendeskgarden.

    I'll add the latest info to this article.

    Thanks.

    Update: Added it to the "Adding styles" section in the second part of the series - https://develop.zendesk.com/hc/en-us/articles/360001074808#topic_zsq_g3d_kw

     

    0
  • Madhav Attili

    Hi All,

    Even I am facing this issue, the app isn't executing the ShowInfo() in my case its display();

    I have tried in incognito and even in multiple browsers

    here's  my code

     

    main.js

    <script>
      // Initialise the Zendesk JavaScript API client
      // https://developer.zendesk.com/apps/docs/apps-v2
      $(function() {
        var client = ZAFClient.init();
        client.invoke('resize', { width: '100%', height: '160px' });
        display();
      });

      function display() {

        var req_data = {
          'name' : 'Yadava1'
          'tags' : ['co-admin','support']
          'created_at' : 'Nov 26,2018'
          'last_login_at' : 'Just now'
        };

        var scr = $(#requester-template).html();
        var template = Handlebars.compile(scr);
        var html = template(req_data);
        $("#content").html(html);

      }

    </script>

     

    iframe.html

    <html>
    <head>
      <meta charset="utf-8">
      <!-- http://garden.zendesk.com -->
      <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-bedrock@7.0" type="text/css"> -->



    <link href="https://cdn.jsdelivr.net/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">



    </head>
    <body>
      <div id= "content">

      </div>
      <footer>
      <a href="https://mysite.github.io/support" target="_blank">Report bugs</a>
    </footer>

    <script id="requester-template" type="text/x-handlebars-template">
        <table>
        <tr>
          <td>Customer:</td>
          <td class="data">{{name}}</td>
        </tr>
        {{#if tags}}
        <tr>
          <td>Tags:</td>
          <td class="data">{{#each tags}}{{this}} {{/each}}</td>
        </tr>
      {{/if}}
        <tr>
          <td>Added:</td>
          <td class  = "data">{{created_at}}</td>
        </tr>
        <tr>
          <td>Last signed in:</td>
          <td class = "data">{{last_login_at}}</td>
        </tr>
        </table>
    </script>
      <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>


      <script src="https://cdn.jsdelivr.net/handlebarsjs/4.0.8/handlebars.min.js"></script>
    <script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
      <script type="text/javascript" src="main.js"></script>



    </body>
    </html>

     

    main.css

     

    footer {
      font-size: 15px;
      padding-top: 20px;
    }
    .data{
      color: red;
      padding-left: 6px;
    }
    #content td {
        font-size: 12px;
        padding-top: 2px;
    }

     

    Let me know if I have some glitch in this

    0
  • Bryan Flynn

    Hi Madhav. You have a number of syntax errors in main.js that need fixing:

    1. main.js is a JavaScript file, so even though you're including it via an HTML file, it shouldn't have HTML <script> tags

    2.  var scr = $(#requester-template).html(); is referencing an element, so #requester-template needs to be in quotes

    3. JavaScript objects need to have their attributes separated by commas, so look at the req_data object and see how it's defined

    The final test code you have should look something like this:

    $(function() {
      var client = ZAFClient.init();
      client.invoke('resize', {
        width: '100%',
        height: '160px'
      });
      display();
    });

    function display() {

      var req_data = {
        'name': 'Yadava1',
        'tags': ['co-admin', 'support'],
        'created_at': 'Nov 26,2018',
        'last_login_at': 'Just now'
      };

      var scr = $("#requester-template").html();
      var template = Handlebars.compile(scr);
      var html = template(req_data);
      $("#content").html(html);

    }

    Hope this helps!

    0
  • ATA

    I am having a problem getting the javascript functions to work, and also for the stylesheet to be used.  I get the following in the Chrome console:

    Refused to apply style from 'http://localhost:4567/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.


    GET http://localhost:4567/main.js net::ERR_ABORTED 404 (Not Found)

    Both files are in the same folder as iframe.html, so why won't those URLs work?

    0
  • Pat

    Hello, I'm following this tutorial. But I can't get it work.

    It shows only the footer. Error from web console says: TypeError: client.invoke is not a function

    iframe.html

    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link href="main.css" rel="stylesheet">
    <link rel="shortcut icon" href="">
    </head>
    <body>


    <div id="content"></div>


    <footer>
    <a href="https://mysite.github.io/support" target="_blank">Report bugs</a>
    </footer>
    <script id="requester-template" type="text/x-handlebars-template">
    <table>
    <tr>
    <td>Customer:</td>
    <td class="data">{{name}}</td>
    </tr>
    {{#if tags}}
    <tr>
    <td>Tags:</td>
    <td class="data">{{#each tags}}{{this}} {{/each}}</td>
    </tr>
    {{/if}}
    <tr>
    <td>Added:</td>
    <td class="data">{{created_at}}</td>
    </tr>
    <tr>
    <td>Last signed in:</td>
    <td class="data">{{last_login_at}}</td>
    </tr>
    </table>
    </script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.0/handlebars.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
    <script type = "text/javascript" src="main.js"></script>
    </body>
    </html>

     

    main.js



    $(function() {
    var client = ZAFClient.init();
    client.invoke('resize', { width: '100%', height: '160px' });
    showInfo();
    });

    function showInfo() {

    var req_data = {
    'name': 'Yadava1',
    'tags': ['co-admin', 'support'],
    'created_at': 'Nov 26,2018',
    'last_login_at': 'Just now'
    };

    var scr = $("#requester-template").html();
    var template = Handlebars.compile(scr);
    var html = template(req_data);
    $("#content").html(html);

    }
    1
  • Yonatan Becker

    Hi,

    I am also getting the issue where it only shows the footer,  is it possible to add the complete text for each file so that we can compare our own files to them?

    0
  • Amie B

    Hi There,

    I'm a complete novice at this and it's my first attempt so please be kind. So far I've been able to follow the guides successfully, however I've now come to a sticking point because the guide isn't very clear.

    I've attached a screenshot of where i'm up too as per the highlight in the image.

    It makes no sense to me. "Add your new showInfo() function after the anonymous function" - does that mean I just paste this text under the self invoking function from the step 2 above as Pat has done in his code from 2 comments ago above?? or does it go in a different file? it's not very clear. 

    Can you please confirm?

     

     

    I would also like to request that you show the complete text for each file or have them avail as a download so we can compare our own files against them to find where we went wrong (if we did) etc. It would be super helpful. :)

    0
  • Charles Nadeau

    Yes, it goes after the self-invoking function, which is anonymous because it's not named. I agree it's confusing so I replaced all instances of "anonymous function" with "self-invoking function" to be consistent.

    Making the app's completed source code available is on our list of things to do.

    0
  • Aunggoon Klongpithak

    Hey I would like to start design the wireframe design using XD or Sketch can the team provide me the File for style guide?

    0

Please sign in to leave a comment.

Powered by Zendesk