App Lifecycle Methods

The Freshdesk web interface is built as a single-page application. Unlike a traditional web application, a single-page app does not reload the entire page when the context is changed; it modifies only the relevant sections. For example, if you are on a ticket page and you navigate to a new ticket, only certain sections of the page are reloaded.

To enable an app to refresh its data at the appropriate time, the parent application emits an app.activated() method. The method timing differs based on the app’s location. When the page that contains the app is loaded for the first time (identified by the app.initialized() method), the app needs to register to listen for the app.activated() method.

Note: Apps that are installed in the ticket_attachment or ticket_conversation_editor location are initialized every time the ticket editor is opened.

app.initialized()

The method is triggered when the page that contains the app is loaded for the first time. On success, it returns the client object that is used to register for the app.activated() and app.deactivated() methods. As the app renders within an IFrame, all communication (through Data methods, Interface methods, Events methods) between the app and parent page occurs through the client object.

app.js

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 method callback. client.events.on("app.activated", onAppActivated); client.events.on("app.deactivated", onAppDeactivated); }, function(error) { //If unsuccessful console.log(); } );
EXPAND ↓

Unless you are building an app that is completely isolated (independent of the data on the page), ensure that the core logic of the app is not within the app.initialized() callback. Place the logic within the app.activated() callback, to ensure that the app can react when the parent application communicates. For example, when a user clicks on your app from the app tray, app.activated() is triggered and the corresponding callback is run.

app.activated()

The method is triggered when the app comes into scope and the method timing differs based on the location of the app.

Location When is the method triggered?
Ticket Sidebar or Contact Sidebar When a user clicks the app icon for the first time to open the app (apps are in a minimized state when the page loads).
Ticket Requester Info When the page loads.
Full Page Apps, Ticket Top Navigation, Ticket Conversation Editor and Attachment When a user clicks the app icon.
Global CTI When the page loads.

Note: The app.activated() method is triggered and the corresponding callback is executed when you navigate from one ticket to another on the Ticket Details page.

app.js

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

The method is triggered when the app goes out of scope. The app.deactivated method can be used to clean stale data. For apps on the Ticket Details and Contact Details pages, the method is triggered when a user moves from one ticket or contact to the next.

app.js

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