App Lifecycle Events

To help the app refresh its data at the right time, the parent application will emit an app.activated() event. The timing of the app.activated() event differs depending on the app’s location. The app should register to listen for an app.activated event when the page containing the app is loaded for the first time, which is denoted by the app.initialized() event.


App.initialized()

This method is called when the page containing the app is loaded for the first time. On success, it returns the client object. This object can then be used to register for the app.activated and app.deactivated events. Since the app renders within an iframe, all communication (Data API, Interface API, Events API) between the app and the parent page occurs through the client object.

template.html Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
app.initialized().then( function(client) { //If successful, register the app activated and deactivated event callback. client.events.on("app.activated", onAppActivated); client.events.on("app.deactivated", onAppDeactivated); }, function(error) { //If unsuccessful console.log(); } );

Unless you are building an app that is completely isolated (independent of the data on the page), the core logic of the app should not be within the app.initialized() callback. It should be within the app.activated() callback to ensure that the app can react whenever the ticket or contact context changes. For example, in the ticket details page, when you navigate from one ticket to another, app.activated() is triggered and the corresponding callback will be executed.

App.activated()

This event is triggered when the app is brought into scope. When this happens depends on the location of the app as shown below:

Location When the event is triggered?
Ticket Sidebar, Contact Sidebar, Change Sidebar, Ticket Requester Info Apps in these locations are collapsed when the page is loaded. When the app icon is clicked for the first time to show the app, the app.activated event will be triggered. If you are on the same page, subsequent hiding/showing will not trigger any events.
Ticket Background The app.activated event will be triggered after app.initialized once the page has loaded.
Ticket Top Navigation The app.activated event will be triggered every time the user clicks the app’s icon.

template.html

Copied Copy
1
2
3
4
5
client.events.on("app.activated", onAppActivated); function onAppActivated() { console.log("App Activated"); }
App.deactivated()

This event is triggered when the app is brought into scope.

template.html Copied Copy
1
2
3
4
5
client.events.on("app.deactivated", onAppDeactivated); function onAppDeactivated() { console.log("App Deactivated"); }

Log in with your Freshservice account

Enter your helpdesk URL to proceed to login

Proceed

By clicking "Proceed", you agree to our Terms of Use.