App Lifecycle Events

The new Freshdesk web interface is built as a single-page application. In contrast to a traditional web application, single-page apps do not reload the entire page when the context is changed, only relevant sections are modified. For example, if you are already on a ticket page and you navigate to a new ticket, only certain sections of the page are reloaded.

For an app to refresh its data at the right time, the parent application will emit an app.activated() event. The event timing 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.

Note:
Apps that reside in the ticket_attachment or ticket_conversation_editor location will be initialized every time the ticket editor is opened.

app.initialized()

This method is invoked when the page containing the app is loaded for the first time. On success, it returns the client object which can be used to register for the app.activated and app.deactivated events. As the app renders within an IFrame, all communication (Data API, Interface API, Events API) between the app and 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(); } );
EXPAND ↓

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, on the Ticket Details page, when you navigate from one ticket to another, app.activated() is triggered and the corresponding callback is executed.

app.activated()

This event is triggered when the app is brought into scope, and the timing differs based on the location of the app.

Location When the event is triggered
Ticket Sidebar or Contact Sidebar Apps in the Ticket and Contact sidebars are in a minimized state when the page is loaded. When you click the app icon for the first time to display the app, the app.activated event is triggered.
Ticket Requester Info Apps in this location are displayed when the page is loaded. So, the app.activated event is triggered once the page loads.
Full Page Apps, Global CTI, Ticket Top Navigation, Ticket Conversation Editor and Attachment The app.activated event is triggered every time a 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 taken out of scope. In addition, the app.deactivated event can be used to clean stale data. For apps on the Ticket Details and Contact Details pages, this event is triggered when the agent moves from one ticket or contact to the next.

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 Freshdesk account

Enter your helpdesk URL to proceed to login

Proceed

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