Tip: Delay App Loading Until All Data is Ready

The app.activated event is fired when the user opens the apps drawer or navigates to a ticket with the apps drawer open. Because the Zendesk agent interface loads data asynchronously from an HTTP API, it's possible that the ticket data won't be available when the app is activated. The following code will keep your app in a "loading" state until the specified data is available, at which point it will transition to the "welcome" state:

{ initialState: 'loading',

events: { 'app.activated': 'welcomeIfDataReady', 'ticket.subject.changed': 'welcomeIfDataReady', 'ticket.requester.email.changed': 'welcomeIfDataReady' },

welcomeIfDataReady: function() { var ticketSubject = this.ticket().subject(); if ( ticketSubject == null ) { return; }

var requesterEmail = this.ticket().requester().email(); if ( requesterEmail == null ) { return; } this.switchTo('welcome', { ticketSubject: ticketSubject, requesterEmail: requesterEmail }); } }


  • 0



    initialState: 'loading', 

    have any effect actually? In this example.




  • 0

    If you set an initialState on an App, the app will transition to that template when it first loads. For more information, see the Templates docs.

  • 0

    Okay, thanks.

     For more information, see the  Templates docs.

    No mention of "initialState" there though.

  • 0
  • 0


    I'd like my app to behave differently on activation depending on whether a custom_field is filled or not.

    Problem is I don't know if the field is empty or just not loaded yet. Do you have an idea how i could?



  • 0

    Karim: that one is going to be tricky with the current framework behavior. The problem is that if you use a custom\_field\_12345.changed callback to trigger your behavior, it will only ever fire if the field is filled in. Would it be possible to perform the not-filled-in behavior at first, then switch when (and if) the field is populated?

    We do want to change the framework to delay app.activated until all the data is ready, but we don't have an ETA for that change yet.

  • 0

    "perform the not-filled-in behavior at first, then switch when (and if) the field is populated"

    Thanks. This is how I'll do it for now.

  • 0

    The ticket events don't seem to be working for us.  The 'app.activated' works fine and some DOM events work fine as well, the ticket events never seem to fire.  For example,

    events: { 'app.activated': 'renderPage', 'ticket.requester.id.changed': 'renderPage', 'ticket.subject.changed': 'renderPage' },

    It never calls renderPage when the ticket is done loading.  Any ideas?

  • 0

    I'm having the same problem as Gee.  My code is as follows:

        events: {
          'app.activated': 'waitForData',
          'ticket.requester.email.changed': 'waitForData'
        }, //end events

        waitForData: function() {
          if (debug) console.log('app activated');
          var requesterEmail = this.ticket().requester().email();
          if ( requesterEmail == null ) {
            if (debug) console.log('waiting for data');
          if (debug) console.log('changing');
          this.switchTo('init', {
            requesterEmail: requesterEmail

    The last thing my web console prints is 'waiting for data.'  I know the requester email data is loaded at some point because I can print it to the console using events in other apps (such as when a custom field value changes).  I can only assume that the 'ticket.requester.email.changed' event is not registering.  Any ideas?

  • 0

    Yes, the problem is that you're asking for this.ticket().requester().email() , but the Requester is null until the data is ready. This causes a null-pointer exception, which stops the app from loading. We will fix the framework to delay loading apps until all the data is ready, but for now you'll have to guard against this problem.

  • 0

    Thanks James.  I'll just combine this with my other event detection app for now.

  • 0

    Is there a ballpark timeline on when we can expect to see the changes made delay the triggering of app.activated?

  • 0

    we are working on this as we speak. expect some news soon !

  • 0

    Hi James,

    We still have this problem. Wouldn't be better to have a different event like 'data.loaded'?

  • 0

    Hi Mathieu

    We are actually working on this "bug" right now, so i'll have some good news soon hopefully! i'll be sure to update this thread

  • 0

    when can we expect any news?

  • 0

    Hi KK

    Hopefully this should go out next week, i'll make sure to update this thread when it does!


  • 0

    Hi KK

    The app.activated behavior is now fixed, we will load all fields and their values for system fields (standard zendesk fields like assignee, CCs, type, priority etc...) and then fire app.activated.

    After that the custom fields will load. 

    Hope this helps


  • 0

    Hi Maxime,

    This partially helps. Why not to fire app.activated after ALL fields & values are loaded (custom fields included)?

    By the way I noticed recently that "this.ticket().collaborators()[0].role()" looks not aways loaded (?). It looks like I have to open the user page to see its role (or run a specific AJAX request). Any idea why I got that?


Please sign in to leave a comment.