Event Types

When using apps, several things might happen. For example, when the app is “clicked” in Deskpro a message is sent to the app to say that the app is now shown to the user. These messages, or events, are useful when designing apps and can tell your code to do certain things, like act upon data passed at a particular time. Here’s a brief overview of events passed to apps:

• READY – when the app is loaded in Deskpro, but not necessarily seen by the user

• SHOW – when the app is shown to the user, like when the user clicks on the app

• CHANGE – when data passed to the app changes, e.g. when the ticket user is changed

• TARGET_ACTION - when a target action is clicked or actioned

• ELEMENT - when an app element event is received

Already you can see how these events might be useful. For example, when the app is READY you might want to load data from an API before the app is actually shown to the user – like a preload behaviour.

Contexts

When each of these events are sent to the app, some information about where the app is placed in Deskpro is passed along with the event. E.g. if the app is in the ticket sidebar, details of the ticket are passed; like the ticket ID or primary user. This data is called a “context”. App contexts also contain an object representing setting values that are not backend only.

Listening to Events

You can listen to events using listeners defined using the useDeskproAppEvents() hook. Here's an example listening to all events that Deskpro might send:

import { 
  Context, 
  TargetAction, 
  useDeskproAppEvents,
} from "@deskpro/app-sdk";

export const MyComponent = () => {

  useDeskproAppEvents({
    onReady: (context: Context) => {
      console.log("ON_READY", context.data, context.settings);
    },
    onShow: (context: Context) => {
      console.log("ON_SHOW", context.data, context.settings);
    },
    onChange: (context: Context) => {
      console.log("ON_CHANGE", context.data, context.settings);
    },
    onTargetAction: (action: TargetAction) => {
      console.log("ON_TARGET_ACTION", action.name, action.type, action.context);
    },
    onElementEvent: (id: string, type: string, payload: AppElementPayload) => {
      console.log("ON_APP_ELEMENT", id, type, payload);
    },
  });

  // ...
};
 copy