Use events method

Front-end events are actions on the product UI, such as button clicks and changes/updates to the UI field values. Events method is an interface that the developer platform provides, to enable your app to react to front-end events.

To enable your app to react to front-end events, in the app.js file,

  1. Subscribe to the app.initialized event, through an event listener. When the app is initialized, the parent application passes a client reference to the app.
  2. After app initialization,
    1. Use the client reference, subscribe to <Event name> and register a callback method to be executed when the event occurs.
    2. Define the callback method.

When the event occurs, a payload is passed to the callback method. Let us call this payload event. event.type returns the name of the event. The event.helper.getData() helper method returns a JSON object that contains information pertaining to the event. Your app logic can process this data into meaningful results.

Front-end events are of the following types: Click events, Change events, Intercept events.

Currently, for this module, only Click events and Change events are supported.

Click events

These events occur when a user clicks a button or link on the page. The event.helper.getData() method returns an empty JSON for most of these events, the only exception being timer events.

Change events

These events occur when a user changes the value of a field on the UI.

Note:User need not submit the modified value for the event listeners to pick up the event and execute the callback; merely changing the values is sufficient for the event trigger.

The event.helper.getData() method returns a JSON that contains the old and new values of the changed field.

Common event

If your app is built to be deployed on the cti_sidebar placeholder, the app can react to the cti.triggerDialer event when the corresponding event trigger occurs.

Event nameEvent trigger
cti.triggerDialerWhen a user clicks the phone number that is displayed on any of the following pages of the product UI:
  • Ticket details page > Requester Information widget
  • Requester details page

cti.triggerDialer

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to user clicks such as the click on a call icon or phone number, on the UI.

Ticket details page events

Event nameEvent trigger
Click events
ticket.propertiesLoadedWhen the ticket properties are loaded.
ticket.replyClickWhen a user clicks the Reply button.
ticket.forwardClickWhen a user clicks the Forward button.
ticket.notesClickWhen a user clicks the Add note button.
ticket.submitClickWhen a user clicks the Send button after selecting one of these options - Reply/Forward/Add Note.
ticket.closeTicketClickWhen a user clicks the Close button.
ticket.previousTicketClickWhen a user clicks the Back icon.
ticket.nextTicketClickWhen a user clicks the Forward icon button.
ticket.taskAddedWhen a user clicks the Add task button.
ticket.startTimerWhen a user clicks the Start Timer button.
ticket.stopTimerWhen a user clicks the Stop Timer button.
ticket.updateTimerWhen a user clicks the Update Timer button.
ticket.deleteTimerWhen a user clicks the Delete Time Entry button.
Change events
ticket.priorityChangedWhen a user changes the priority of a ticket.
ticket.statusChangedWhen a user changes the status of a ticket.
ticket.groupChangedWhen a user changes the group to which a ticket is assigned.
ticket.agentChangedWhen a user changes the agent to whom the ticket is assigned.
ticket.typeChangedWhen a user changes the type in the ticket properties.
ticket.urgencyChangedWhen a user changes the urgency of a ticket in the ticket properties.
ticket.impactChangedWhen a user changes the impact of a ticket in the ticket properties.
ticket.departmentChangedWhen a user changes the department of a ticket in the ticket properties.
ticket.categoryChangedWhen a user changes the category of a ticket in the ticket properties.
ticket.subCategoryChangedWhen a user changes the sub-category of a ticket in the ticket properties.
ticket.itemChangedWhen a user changes the category item of a ticket in the ticket properties.
ticket.propertiesUpdatedWhen a user updates any ticket property and clicks the Update button on the Ticket details page.
ticket.assetAssociatedWhen a user associates an asset to a ticket.
ticket.problemAssociatedWhen a user associates a problem to a ticket.
ticket.changeAssociatedWhen a user associates a change to a ticket
ticket.childticketAssociatedWhen a user adds a child ticket to a ticket.

New ticket page events

Event nameEvent trigger
Change events
ticket.priorityChangedWhen a user changes the priority of a ticket.
ticket.statusChangedWhen a user changes the status of a ticket.
ticket.groupChangedWhen a user changes the group to which a ticket is assigned.
ticket.agentChangedWhen a user changes the agent to whom the ticket is assigned.
ticket.urgencyChangedWhen a user changes the urgency of a ticket in the ticket properties.
ticket.impactChangedWhen a user changes the impact of a ticket in the ticket properties.
ticket.departmentChangedWhen a user changes the department of a ticket in the ticket properties.
ticket.categoryChangedWhen a user changes the category of a ticket in the ticket properties.
ticket.subCategoryChangedWhen a user changes the sub-category of a ticket in the ticket properties.
ticket.itemChangedWhen a user changes the category item of a ticket in the ticket properties.
ticket.requesterChangedWhen a user changes/adds the requester to a ticket.
ticket.subjectChangedWhen a user changes the subject of a ticket.

Event and payload descriptions

ticket.propertiesLoaded

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when ticket properties are loaded. This event is needed when the code uses ticket interface APIs along with ticket_background location.

ticket.replyClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Reply button of a ticket.

ticket.forwardClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Forward button of a ticket.

ticket.notesClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Add note button of a ticket.

ticket.submitClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Send button of a ticket after selecting one of these options - Reply/Forward/Add Note.

ticket.closeTicketClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Close button located on the top navigation bar of the Ticket Details page.

ticket.previousTicketClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Back icon located at the top right of the Ticket Details page.

ticket.nextTicketClick

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Forward icon located at the top right of the Ticket Details page.

ticket.taskAdded

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Add task button.

ticket.startTimer

Use the sample code shown on the right pane > Sample code tab, to enable your app to react when a user clicks the Start Timer button to start the timer from the TIME ENTRIES widget. It is also triggered when the user adds a time entry and clicks the Save button.

ticket.stopTimer

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to a user's click on the Stop button to stop a running timer.

ticket.updateTimer

Use the sample code shown on the right pane > Sample code tab, to enable your app to react to a user's click on the UPDATE button to update an existing time entry.

ticket.deleteTimer

The event is triggered when a user deletes an existing time entry. Use the sample code shown on the right pane > Sample code tab, to enable your app to react to a user's click on the Delete button to delete an existing time entry.

ticket.priorityChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the priority of a ticket in the ticket properties.

ticket.statusChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the status of a ticket in the ticket properties.

ticket.groupChanged

Use the sample code shown on the right pane to enable your app to react twhen a user changes the group assigned to a ticket in the ticket properties.

ticket.agentChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the agent assigned to a ticket in the ticket properties.

ticket.typeChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the type of a ticket in the ticket properties.

ticket.urgencyChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the urgency of a ticket in the ticket properties.

ticket.impactChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the impact of a ticket in the ticket properties.

ticket.departmentChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the department of a ticket in the ticket properties.

ticket.categoryChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the category of a ticket in the ticket properties.

ticket.subCategoryChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the sub-category of a ticket in the ticket properties.

ticket.itemChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the category item of a ticket in the ticket properties.

ticket.propertiesUpdated

Use the sample code shown on the right pane to enable your app to react when a user updates any ticket property and clicks the UPDATE button located on the Ticket Details page.

ticket.assetAssociated

Use the sample code shown on the right pane to enable your app to react when a user associates an asset to a ticket.

ticket.problemAssociated

Use the sample code shown on the right pane to enable your app to react when a user associates a problem to a ticket.

ticket.changeAssociated

Use the sample code shown on the right pane to enable your app to react when a user associates a change to a ticket.

ticket.childticketAssociated

Use the sample code shown on the right pane to enable your app to react when a user adds a child ticket to a ticket.

ticket.requesterChanged

Use the sample code shown on the right pane to enable your app to react when a user changes/adds the requester to a ticket.

ticket.subjectChanged

Use the sample code shown on the right pane to enable your app to react when a user changes the subject of a ticket.