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,
- 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.
- After app initialization,
- Use the client reference, subscribe to <Event name> and register a callback method to be executed when the event occurs.
- 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 name | Event trigger |
---|---|
cti.triggerDialer | When a user clicks the phone number that is displayed on any of the following pages of the product UI:
|
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 name | Event trigger |
---|---|
Click events | |
ticket.propertiesLoaded | When the ticket properties are loaded. |
ticket.replyClick | When a user clicks the Reply button. |
ticket.forwardClick | When a user clicks the Forward button. |
ticket.notesClick | When a user clicks the Add note button. |
ticket.submitClick | When a user clicks the Send button after selecting one of these options - Reply/Forward/Add Note. |
ticket.closeTicketClick | When a user clicks the Close button. |
ticket.previousTicketClick | When a user clicks the Back icon. |
ticket.nextTicketClick | When a user clicks the Forward icon button. |
ticket.taskAdded | When a user clicks the Add task button. |
ticket.startTimer | When a user clicks the Start Timer button. |
ticket.stopTimer | When a user clicks the Stop Timer button. |
ticket.updateTimer | When a user clicks the Update Timer button. |
ticket.deleteTimer | When a user clicks the Delete Time Entry button. |
Change events | |
ticket.priorityChanged | When a user changes the priority of a ticket. |
ticket.statusChanged | When a user changes the status of a ticket. |
ticket.groupChanged | When a user changes the group to which a ticket is assigned. |
ticket.agentChanged | When a user changes the agent to whom the ticket is assigned. |
ticket.typeChanged | When a user changes the type in the ticket properties. |
ticket.urgencyChanged | When a user changes the urgency of a ticket in the ticket properties. |
ticket.impactChanged | When a user changes the impact of a ticket in the ticket properties. |
ticket.departmentChanged | When a user changes the department of a ticket in the ticket properties. |
ticket.categoryChanged | When a user changes the category of a ticket in the ticket properties. |
ticket.subCategoryChanged | When a user changes the sub-category of a ticket in the ticket properties. |
ticket.itemChanged | When a user changes the category item of a ticket in the ticket properties. |
ticket.propertiesUpdated | When a user updates any ticket property and clicks the Update button on the Ticket details page. |
ticket.assetAssociated | When a user associates an asset to a ticket. |
ticket.problemAssociated | When a user associates a problem to a ticket. |
ticket.changeAssociated | When a user associates a change to a ticket |
ticket.childticketAssociated | When a user adds a child ticket to a ticket. |
New ticket page events
Event name | Event trigger |
---|---|
Change events | |
ticket.priorityChanged | When a user changes the priority of a ticket. |
ticket.statusChanged | When a user changes the status of a ticket. |
ticket.groupChanged | When a user changes the group to which a ticket is assigned. |
ticket.agentChanged | When a user changes the agent to whom the ticket is assigned. |
ticket.urgencyChanged | When a user changes the urgency of a ticket in the ticket properties. |
ticket.impactChanged | When a user changes the impact of a ticket in the ticket properties. |
ticket.departmentChanged | When a user changes the department of a ticket in the ticket properties. |
ticket.categoryChanged | When a user changes the category of a ticket in the ticket properties. |
ticket.subCategoryChanged | When a user changes the sub-category of a ticket in the ticket properties. |
ticket.itemChanged | When a user changes the category item of a ticket in the ticket properties. |
ticket.requesterChanged | When a user changes/adds the requester to a ticket. |
ticket.subjectChanged | When 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.