Forums/Community/Zendesk Apps

Tip: Delay App Loading Until All Data is Ready

James Rosen
posted this on September 16, 2012 12:43

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
    });
  }
}
 

Comments

User photo
Alexander Steshenko

Hello, 

Does

initialState: 'loading', 

have any effect actually? In this example.

 

Thanks,

Alex.

January 08, 2013 03:10
User photo
James Rosen
Zendesk

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.

January 08, 2013 09:25
User photo
Alexander Steshenko

Okay, thanks.

>> For more information, see the Templates docs.

No mention of "initialState" there though.

January 08, 2013 09:36
User photo
James Rosen
Zendesk
January 14, 2013 10:09
User photo
Karim Dibo

Hi,

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?

Thanks

Karim

January 16, 2013 05:25
User photo
James Rosen
Zendesk

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.

January 16, 2013 09:40
User photo
Karim Dibo

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

January 17, 2013 02:48
User photo
Gee C
listia

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?

January 28, 2013 18:13
User photo
Kristine
renesasit

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');
        return;
      }
      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?

February 12, 2013 09:13
User photo
James Rosen
Zendesk

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.

February 12, 2013 09:16
User photo
Kristine
renesasit

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

February 12, 2013 09:23
User photo
John Hanlon
oc

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

April 26, 2013 09:58
User photo
Maxime
Product Manager

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

April 26, 2013 10:02
User photo
Matthieu Gross

Hi James,

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

May 17, 2013 08:09
User photo
Maxime
Product Manager

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

May 18, 2013 19:05
User photo
KK
lesarion

when can we expect any news?

June 27, 2013 05:04
User photo
Maxime
Product Manager

Hi KK

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

Max

June 27, 2013 08:53
User photo
Maxime
Product Manager

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

Maxime

August 09, 2013 16:36
User photo
Matthieu Gross

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?

 

September 20, 2013 05:23