Events API

The execution of a Freshdesk app begins with an 'initialize' event that is triggered every time the app is loaded. However, there are other events such a button click or a ticket field update that apps may want to react to. This is made possible using the events framework that is described in this page.

Ticket Page Events

The following events are available to all apps that are located in the ticket details page.

  • onReplyClick
  • onForwardClick
  • onAddNoteClick
  • onSubmitClick
  • onTicketCloseClick
  • onPrevTicketClick
  • onNextTicketClick
  • onPriorityChanged
  • onStatusChanged
  • onSourceChanged
  • onGroupChanged
  • onAgentChanged
  • onTypeChanged
  • onTicketPropertiesUpdated

onReplyClick(callbackFunction) - This API is used to execute a callback function when the user clicks on the reply option either from the header menu or the conversations. The following format is valid for all APIs which have callbackFunction as input.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onReplyClick(this.replyClicked.bind(this)); }, replyClicked: function(e) { // code to be executed when the Reply button is clicked by the user. } } })();
EXPAND ↓

onForwardClick(callbackFunction) - This API is used to execute a callback function when the user clicks on the forward option either from the header menu or the conversations.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onForwardClick(this.fwdClicked.bind(this)); }, fwdClicked: function(e) { // code to be executed when the Forward button is clicked by the user. } } })();
EXPAND ↓

onAddNoteClick(callbackFunction) - This API is used to execute a callback function when the user clicks on the note option either from the header menu or the conversations.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onAddNoteClick(this.noteClicked.bind(this)); }, noteClicked: function(e) { // code to be executed when the Note button is clicked by the user. } } })();
EXPAND ↓

onSubmitClick(callbackFunction, [‘reply’,'forward’,'note’]) - This API is used to execute a callback function when reply/forward/note is submitted based on the parameter. The second parameter is an array with any of the following values - reply, forward, note. In the above example, replySubmitClicked is executed when user clicks on submit after replying and submitClicked is executed after submitting a forward or note.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function() { return { initialize: function() { //app code domHelper.ticket.onSubmitClick(this.replySubmitClicked.bind(this), ['reply']); domHelper.ticket.onSubmitClick(this.submitClicked.bind(this), ['forward', 'note']); }, replySubmitClicked: function(e) { //code to be executed when user clicks on submit button after reply }, submitClicked: function(e) { //code to be executed when user clicks on submit button after forwarding or adding a note } } })();
EXPAND ↓

onTicketCloseClick(callbackFunction) - This API is executed when a ticket is closed by the user from the header menu. This also triggers the callbackFunction of onStatusChanged API if specified.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onTicketCloseClick(this.ticketCloseClick.bind(this)); }, ticketCloseClick: function(e) { // code to be executed when the ticket is closed by the user. } } })();
EXPAND ↓

onPrevTicketClick(callbackFunction) - This API is executed when the user clicks the “Previous Ticket” option in the ticket detail page.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onPrevTicketClick(this.prevTicketClicked.bind(this)); }, prevTicketClicked: function(e) { // code to be executed when the previous ticket button is clicked by the user. } } })();
EXPAND ↓

onNextTicketClick(callbackFunction) - This API is executed when the user clicks the “Next Ticket” option in the ticket detail page.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onNextTicketClick(this.nextTicketClick.bind(this)); }, nextTicketClick: function(e) { // code to be executed when the next ticket button is clicked by the user. } } })();
EXPAND ↓

onPriorityChanged(callbackFunction) - This API is executed when the user changes the priority of the ticket in the ticket properties

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onPriorityChanged(this.priorityChanged.bind(this)); }, priorityChanged: function(e) { // code to be executed when the priority of the ticket is changed. } } })();
EXPAND ↓

onStatusChanged(callbackFunction) - This API is executed when the user changes the status of the ticket in the ticket properties

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onStatusChanged(this.statusChanged.bind(this)); }, statusChanged: function(e) { // code to be executed when the status of the ticket is changed. } } })();
EXPAND ↓

onSourceChanged(callbackFunction) - This API is executed when the user changes the source of the ticket in the ticket properties

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onSourceChanged(this.sourceChanged.bind(this)); }, sourceChanged: function(e) { // code to be executed when the source of the ticket is changed. } } })();
EXPAND ↓

onGroupChanged(callbackFunction) - This API is executed when the user changes the group assigned property of the ticket. When Group property of the ticket is changed, it triggers onAgentChanged and onGroupChanged and executes both the callbacks if specified.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onGroupChanged(this.groupChanged.bind(this)); }, groupChanged: function(e) { // code to be executed when the group assigned to the ticket is changed. } } })();
EXPAND ↓

onAgentChanged(callbackFunction) - This API is executed when the user changes the agent assigned to the ticket

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onAgentChanged(this.agentChanged.bind(this)); }, agentChanged: function(e) { // code to be executed when the agent assigned to the ticket is changed. } } })();
EXPAND ↓

onTypeChanged(callbackFunction) - This API is executed when the user changes the type of the ticket is changed

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onTypeChanged(this.typeChanged.bind(this)); }, typeChanged: function(e) { // code to be executed when the type of the ticket is changed. } } })();
EXPAND ↓

onTicketPropertiesUpdated(callbackFunction) - This API is executed when the user updates the ticket properties.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.ticket.onTicketPropertiesUpdated(this.ticketPropertiesUpdated.bind(this)); }, ticketPropertiesUpdated: function(e) { // code to be executed when the ticket properties are updated. } } })();
EXPAND ↓

New Ticket Page Events

The following events are available to all apps that are located in the new ticket page:

onRequesterChanged(callbackFunction) - This API is executed when the user enters the requester email in the Requester field.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
(function() { return { initialize: function() { //app code domHelper.new_ticket.onRequesterChanged(this.requesterChanged.bind(this)); }, requesterChanged: function(e) { // code to be executed when the requester is entered. } } })();
EXPAND ↓

onPriorityChanged(callbackFunction) - This API is executed when the user changes the ticket’s priority.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
(function() { return { initialize: function() { //app code domHelper.new_ticket.onPriorityChanged(this.priorityChanged.bind(this)); }, priorityChanged: function(e) { // code to be executed when the priority is changed. } } })();
EXPAND ↓

onStatusChanged(callbackFunction) - This API is executed when the user changes the ticket’s status.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
(function() { return { initialize: function() { //app code domHelper.new_ticket.onStatusChanged(this.statusChanged.bind(this)); }, statusChanged: function(e) { // code to be executed when the status is changed. } } })();
EXPAND ↓

New Email Page Events

The following events are available to all apps that are located in the new email page:

onRequesterChanged(callbackFunction) - This API is executed when the user enters the requester email in the To field.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
(function() { return { initialize: function() { //app code domHelper.new_email.onRequesterChanged(this.requesterChanged.bind(this)); }, requesterChanged: function(e) { // code to be executed when the requester is entered. } } })();
EXPAND ↓

onPriorityChanged(callbackFunction) - This API is executed when the user changes the ticket’s priority.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.new_email.onPriorityChanged(this.priorityChanged .bind(this)); }, priorityChanged: function(e) { // code to be executed when the priority is changed. } } })();
EXPAND ↓

onStatusChanged(callbackFunction) - This API is executed when the user changes the ticket’s status.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
(function() { return { initialize: function() { //app code domHelper.new_email.onStatusChanged(this.statusChanged.bind(this)); }, statusChanged: function(e) { //code to be executed when the status is changed. } } })();
EXPAND ↓

In App Events

In app events are events that originate from actions within the app's template. The following events are supported:

  • click
  • change

Note:
In order to use in app events, you’ll need the version 2.0.1 or later of the SDK as well as the corresponding Chrome browser plugin. You can find instructions to get the latest version here.


In app events have to be declared in the app.js file of your app in the format shown in the example below.

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function() { return { events: [ { event: 'click', selector: '#clickbutton', callback: 'clickcb'}, { event: 'change', selector: '#txtarea', callback: 'changeelement'} ], clickcb: function() { alert("button clicked"); }, changeelement : function() { alert("changed"); }, initialize: function() { console.log("My first app!"); } } })();
EXPAND ↓

Take a look at the sample app with In App events for a demonstration of this feature.

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.