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

Comments

14 comments

  • Avatar
    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.

  • Avatar
    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.

  • Avatar
    Bhushan Sakate

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


     

  • Avatar
    Jessie - Community Manager

    Hey Bhushan!


    Can you give more details about what's happening?

  • Avatar
    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>

  • Avatar
    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.


     

  • Avatar
    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

  • Avatar
    Jessie - Community Manager

    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.

  • Avatar
    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

  • Avatar
    Jessie - Community Manager

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

  • Avatar
    Heather Cook

    Hi Jessie,


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


    Thank you


    Heather

  • Avatar
    Jessie - Community Manager

    Fantastic! Maybe it was just a caching issue.

  • Avatar
    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?

  • Avatar
    Charles Nadeau (Edited )

    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

     

Please sign in to leave a comment.

Powered by Zendesk