The Freshworks_crm web interface is built as a single-page application. Unlike traditional web applications, a single-page app does not reload the entire page when the context is changed; it modifies only the relevant sections.
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.

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, and Events methods) between the app and parent page occurs through the client object.
The client (client.context) object returned on app initialization, contains the productContext object that specifies the name of the product and URL of the business account on which the app is being installed. You can use the client.context.productContext.name and client.context.productContext.url attributes to perform product specific actions such as rendering a product specific installation page.

Sample productContext

1
2
3
4
productContext:{
    url:"https://sample.myfreshworks.com/crm",
   name:"freshworks_crm"
  }

app.js

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. Place the logic within the app.activated() callback to ensure that the app can react when the parent application communicates. For example, on the Contact Details page, when you navigate from one contact to another, 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.

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

app.js

1
2
3
4
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 and can be used to clean stale data. In addition, this method is triggered when an agent moves from one module entity to the next and from one module page to the next.

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