Build your first Support app - Part 2: Designing the user interface Follow

Comments

31 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

    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

    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

  • Avatar
    Feather Osborn

  • Avatar
    Joseph May

    Thanks for pointing that out, Feather! Fixed.

  • Avatar
    Joe Paulsen

    Sorry to sound like an utter noob here. I am trying to integrate this with a react framework and I really just can't follow how to get this running, what the goals are, etc. I've created the app in my react framework, and incorporated the script in my HTML file. Every time I try to run the zat server and go to the URL It gives me a Sinatra error. Is there any information on how to get this running in react? The docs are very thorough but I am utterly confused by everything.

  • Avatar
    Joseph May

    Hi Joe-


    Thanks for writing in. May I ask you please share what the error being thrown by Sinatra is? We don't have documentation specific to using Reactjs in your application, but the error should be a good place to start troubleshooting.

  • Avatar
    Joe Paulsen

    Basically it says:


    Sinatra doesn't know this ditty.


    Try this:


    # in Library/Ruby/Gems/2.3.0/gems/zendesk_apps_tools-2.8.3/lib/zendesk_apps_tools/server.rb
    
    class ZendeskAppsTools::Server
    get '/' do
    "Hello World"
    end
    end

  • Avatar
    Heather Cook

    Hi Team,


    I am on to "Testing the app". When I try to run the zat server, I don't get the same message as stated in this article. I seem to be getting an error. Could this be due to my orginsation's network?


  • Avatar
    Joseph May

    Hi Heather-


    That looks like the Sinatra web server is running correctly on port 4567 with no error. The message used in this article may be dated, so it's best to follow that output there. Is it possible you didn't allow unsafe scripts in your browser?


    @Joe- I am going to create a ticket for your issue, please be on the lookout for it.

  • Avatar
    Heather Cook

    Thanks Joseph! I still get the encoding warning, but I am able to carry on with the steps.


    Out of interest in the "cleaning up the default code" section, why do we create the main.js file? What benefit does that bring?

  • Avatar
    Joseph May

    Hey Heather-


    Charles touches on that in his doc:


    Clean up the default code, which includes deleting the "Hello, World!" heading and moving the JavaScript to another file


    As far as benefits, serving HTML and JS separately has the advantage that a client can cache the JS for faster load times, for one.

  • Avatar
    Jamie Vaughn

    How can I configure the app to use a logo-small.svg? Is svg supported in a zaf app?

     

  • Avatar
    villu

    I like to develop the app in Pure Javascript code, Is that correct or compulsory to use Templates ? 

  • Avatar
    Bryan Flynn

    Hi villu. Yes, you can use straight JavaScript. Using a template engine is described here because they can be helpful but they are definitely not necessary.

    Apps live in an iframe, so you can stick with just JS or bring in other libraries of your choosing.

    Related, know that the var client = ZAFClient.init() object that's mentioned is what connects your app code to the parent Zendesk Support product. You need to maintain that client object to perform operations back to the main product (such as client.invoke, client.get, client.set, etc).

    Templates help you reload part of the page without reloading the entire page. If you reload the entire page you may lose the 'client' object that was originally initialized with underlying query parameters from the framework. Watch for that.

  • Avatar
    Reagan Helms

    When I try to run the server, I get an error included below:

     

    Any thoughts? I feel like I might have left something running, but I'm not seeing any processes when I look.

  • Avatar
    Bryan Flynn

    Hi Reagan. This is typically caused from having more than one 'zat server' running -- the error "port is in use" towards the bottom is the typical message.

    I would look for another terminal window or terminal tab that's open and still has the Zendesk server running and kill it using Ctrl+C

    While the above should solve the issue, if you are still running into the error you can use this more drastic method of killing the process:

    lsof -i -n -P | grep 4567
    >>>>
    ruby      <PROCESS ID> loaner   11u  IPv6 0x4ef3298a8396ef6b      0t0  TCP [::1]:4567 (LISTEN)
    <<<<
    kill -9 <PROCESS ID>
     
  • Avatar
    Reagan Helms

    Hi Bryan,

    No dice. I had one of our ops guys look at it, and he confirmed that there's nothing running that he can see. When I run the method that you posted, there's nothing that comes back. He's having me try on another machine just to confirm that there's nothing weird going on, but if you think of anything else that it could be, I'm all ears.

  • Avatar
    Reagan Helms

    Okay, so it worked on another machine with no problems. I've completely uninstalled everything and reinstalled on my machine, still nothing. Guess I'll have to keep cracking at it.

  • Avatar
    Jason Littrell

    Hey Reagan. The standard `lsof` command will only check the processes for the current user. If you have sudo access, you can try this to see if any other users on your machine have processes running on that port:

    sudo lsof -i :4567

    If you find something and want to kill the process, you'll need to use sudo for that command as well:

    sudo kill -9 <PID>
  • Avatar
    Reagan Helms

    We "figured it out." Apparently my computer doesn't like to use localhost. We had to use

    zat server --bind 0.0.0.0

    to get it to work. They're going to look at my hosts file later to see what's up. Up and running for now!

  • Avatar
    Jessie - Community Manager

    Thanks for helping out, Jason!

    Reagan, thanks for letting us know you got it working!

  • Avatar
    joshua moreno

    Hi there,

    I need to load a HTML file with an ajax request, I'm using  zat client with the function client.request or $.ajax but always returns forbidden. The HTML file is located in the app files in a sub directory. I generated a Bearer token inside Zendesk and setted it in a Authorization Header but it's still not working.

    Someone knows how to do that?

    Thanks,

    Regards,

Please sign in to leave a comment.

Powered by Zendesk