Events before & after

Events are certain actions that take place on the page, such as a user clicking on a ticket field, an element in your app or even a AJAX call succeeding or failing.

Before: Defining events

In this widget, click events are defined to handle dynamically displaying data selection options in the user interface. For example, the following code snippet shows or hides the group multi-select field when the bulkcheck checkbox is clicked.

$j("#bulkcheck").click(function(){
  if ($j("#bulkcheck").is(":checked")) {
    $j(".bulkcreate").show("fast");
  } else {
    $j(".bulkcreate").hide("fast");
  }
});

Here you see how the HTML element classes and IDs defined in the section above are used.
In the next example, you can see how you can define a function that can be executed via the onclick event.

Remember that in the user interface HTML we defined above, we included this line of code to run when the Create Children Tickets button is clicked:

<input type='button' value='Create Children Tickets' onclick='attempt_children();'>

This function creates child tickets and assigns them to groups and then reflects that in the user interface.

// ==============================================================
// BULK CREATE NEW CHILD TICKETS AND ASSIGN TO GROUPS
// SETUP DATA AND CALL FUNCTIONS TO CREATE TICKETS, UPDATE UI
// ==============================================================
attempt_children = function() {
  $j(''+ prjField +'').val('Project-{{ticket.id}}');
  $j.each(groupListArray, function(index, objectValue){
    var rootTicket = {};
    rootTicket.ticket = {};
    //rootTicket.ticket.subject = $j('#ticket_title').text();
    rootTicket.ticket.subject = $j('#ticket_title').text() + ' - Sub-ticket of {{ticket.id}}';
      rootTicket.ticket['description'] = $j('#bulkTicketDesc').val();
      rootTicket.ticket.requester_name = '{{current_user.name}}';
      rootTicket.ticket.requester_email = '{{current_user.email}}';
      rootTicket.ticket.external_id = 'Project-{{ticket.id}}';
      rootTicket.ticket.additional_tags = 'project_{{ticket.id}}
      project_child';rootTicket.ticket.group_id = objectValue;
      rootTicket.ticket.fields = customFieldID;

      childCall = JSON.stringify(rootTicket);

      var apiCall = {};
      apiCall.ticket = {};
      apiCall.ticket.external_id = 'Project-{{ticket.id}}';
      apiCall.ticket.additional_tags = 'project_parent project_{{ticket.id}}';
      call = JSON.stringify(apiCall);     ticketTagField.addEntry('project_parent');
      ticketTagField.addEntry('project_{{ticket.id}}');
      apiCall.ticket.fields = customFieldID;
      create_children(childCall);
      do_update('{{ticket.id}}', call);
  });
}

After: Defining events

You can define functions to run when the App finishes loading or when other events occur. In the following code example, an API call object and its status are used to specify an event, and a function is called (or can be defined) to perform an action.

This widget is driven by the user interacting with the interface, such as click events and submit events. This App specifies events and the functions to run on each event. When the widget first loads, it makes an API call to see if the current ticket is a project ticket. This is performed automatically because the widget code is in an anonymous self executing function. In this App, this is performed by attaching this function to the “app.activated'” event.

This widget performs other API calls if needed, and if successful, those call functions to process the data for use in the display. In this App, a successful API call is an event, and the associated function is called to process the data.

The following code is an example of defining events and attaching a function to run:

events: {
// THIS FIRES WHEN THE APP IS FINISHED LOADING
  'app.activated': 'getProjectData',

// WHEN getGroups FINISHES, PROCESS THE DATA
  processGroups'getGroups.done': 'processGroups',

// WHEN getAgents FINISHES, PROCESS THE DATA
  processAgents'getAgents.done': 'processAgents'
},