Building your first Zendesk app - Part 2: Designing the user interface Follow

Comments

10 comments

  • Avatar
    Eduardo Pereira dos Santos

    Is there any reason to not put my scripts tags in the head of my iframe.html?

  • Avatar
    Chris Moran (Edited )

    Hello Charles,

    Wonderful tutorial. I really like how not only instructive you are at every step, but also how you explain the whys and the hows - I've never used Handlbars.js up until now and I found it extremely useful of you to explain what the {{tags}} do!

    Could you please specify (if there is a reason) as to why the script tags are in the body and not in the head in iframel.html?

    Also, I have managed to complete this tutorial with no problems, however my app's 'name' shows 'Local App' in the browser but my manifest file shows 'Requester X-Ray' - any idea what the problem could be?

    Thanks

    Chris

  • Avatar
    Charles Nadeau

    Glad the tutorial is helpful, Chris. The reason the script tags are just before the closing body tag is that it can help improve the render time of the page (in the case, the iframe content). The browser stops rendering the page while any JS libraries are being downloaded. With large JS libraries, it could make a difference to the user experience. See this blog post on the Yahoo Developer Network for more info.

    As for "Local App" showing up in the browser, do you mean the heading of the app displayed in the sidebar?

     

  • Avatar
    Charles Nadeau

    Ok, I updated my ZAT gem and I see what you mean about "Local App" showing up in the header of the app. In fact, the 'name' property in manifest.json isn't used at all at this point. There's an open ticket with the framework engineering team to investigate the issue.

  • Avatar
    Allen Sallinger

    After testing the app on both firefox and chrome while enabling the loading of unsafe scripts I am still unable to see the app running while in zendesk.

    Has anyone else had any similar troubles and/or found a solution?

  • Avatar
    Alex Edelstein

    Allen, I'm running into the same problem. Have not found a solution. I suspect that the big rev they did a week or two ago broke this.

  • Avatar
    Jason Littrell

    Instead of doing a hard refresh or clearing the cache after making changes to your app, you can just disable the cache while you have your browser's developer tools open. With that setting enabled, you only need to click the "Reload all apps" button in Zendesk. I usually have the dev tools open anyway, but it's also pretty easy to shrink them down or pop them out to another window if they're in your way.

    Here are the instructions on how to enable the setting in Chrome and Firefox.

    Chrome

    1. Open the developer tools (command + option + i on Mac; ctrl + shift + i on Windows).
    2. Select "Settings" from the dev tools menu or press F1.
    3. On the Preferences tab under "Network", check "Disable cache (while DevTools is open)".

    Firefox

    1. Open the developer toolbox (command + option + i on Mac; ctrl + shift + i on Windows).
    2. Click the gear icon to go to the toolbox options or press F1.
    3. Under "Advanced settings",  check "Disable HTTP Cache (when toolbox is open)".
  • Avatar
    Alex Rojo

    I'm following the tutorial but when I test under Chrome I get this message at Javascript Console:

    Uncaught ReferenceError: $ is not defined
    at main.js:1

  • Avatar
    Alex Rojo

    Forgot it, I didn't include "

      <script src="https://cdn.jsdelivr.net/jquery/3.0.0/jquery.min.js"></script>".....
    
  • Avatar
    Dev API (Edited )

    hello Charles hope you're doing well, i was just reading this article to create my new app(Zendesk App) and this article is helping me a lot for getting done my part.

    I just want to confirm if i create Application on my local instance (Localhost in my local machine) . Will it work with my domain which is created by zendesk on live server i just getting confused. 
    Can you please help me out with this issue !

    With Best 
    Gaurav

Please sign in to leave a comment.

Powered by Zendesk