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

Have more questions? Submit a request

38 Comments

  • Eduardo Pereira dos Santos
    Comment actions Permalink

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

    1
  • Chris Moran
    Comment actions Permalink

    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

    0
  • Charles Nadeau
    Comment actions Permalink

    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?


     

    0
  • Charles Nadeau
    Comment actions Permalink

    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.

    0
  • Allen Sallinger
    Comment actions Permalink

    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?

    3
  • Alex Edelstein
    Comment actions Permalink

    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.

    1
  • Jason Littrell
    Comment actions Permalink

    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)".

    0
  • Dev API
    Comment actions Permalink

    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

    0
  • Joe Paulsen
    Comment actions Permalink

    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.

    0
  • Joseph May
    Comment actions Permalink

    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.

    0
  • Joe Paulsen
    Comment actions Permalink

    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

    0
  • Heather Cook
    Comment actions Permalink

    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?


    0
  • Joseph May
    Comment actions Permalink

    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.

    0
  • Heather Cook
    Comment actions Permalink

    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?

    0
  • Joseph May
    Comment actions Permalink

    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.

    0
  • Jamie Vaughn
    Comment actions Permalink

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

     

    1
  • villu
    Comment actions Permalink

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

    0
  • Bryan Flynn
    Comment actions Permalink

    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.

    0
  • Reagan Helms
    Comment actions Permalink

    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.

    0
  • Bryan Flynn
    Comment actions Permalink

    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>
     
    0
  • Reagan Helms
    Comment actions Permalink

    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.

    0
  • Reagan Helms
    Comment actions Permalink

    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.

    0
  • Jason Littrell
    Comment actions Permalink

    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>
    0
  • Reagan Helms
    Comment actions Permalink

    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!

    0
  • Jessie Schutz
    Comment actions Permalink

    Thanks for helping out, Jason!

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

    0
  • joshua moreno
    Comment actions Permalink

    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,

    0
  • Bryan Flynn
    Comment actions Permalink

    Hi Joshua. Would you mind reposting this along with more details on the use case over on the Apps community board? It will get more attention from other customers who maybe faced the same issue.

    https://develop.zendesk.com/hc/en-us/community/topics/360000018808-Apps-framework

    In the new post can you share why you want to read the file? Is it to get to its contents for some sort of further processing? Or since it's an HTML file do you want to actually display it? Thanks for the added info.

    0
  • Tracy Scobba
    Comment actions Permalink

    I cannot figure out how to modify my html, js, etc files on my Windows 10 PC with Ubuntu. I'm a complete coding newbie and am struggling with how to do this.

    0
  • Joseph May
    Comment actions Permalink

    Hey Tracy-

    That's ok, we all started somewhere! Is it possible to provide some more details on what's happening?

    0
  • Tracy Scobba
    Comment actions Permalink

    I get to the "Cleaning up the default code" section but don't know how to open and modify the html file from my Linux subsystem folder... Can I move these files to my C drive so that I can use Microsoft tools to modify them? Is there a way in ZAT to point to files in a different directory?

    0

Please sign in to leave a comment.

Powered by Zendesk