addEventListener

The addEventListener() method allows you to attach event handlers to the brixxbox application or specific controls. When the specified event occurs, the provided function will be executed. This enables dynamic behavior in response to user interactions or system events.

Parameters

1. eventName (string) - The name of the event to listen for (e.g. "onClick", "onRecordSaved")
2. controlId (string, optional) - The ID of the control to attach the event to. If omitted, the event is attached to the application level
3. eventFunction (function) - The callback function to execute when the event fires

Common Events

Application Level Events

• onRecordSaved - Triggered after a record is successfully saved
• onRecordLoaded - Triggered after a record is loaded and displayed
• onRecordNew - Triggered after a new record is created
• onRecordSave - Triggered before a record is saved (can be canceled)
• onRecordDelete - Triggered before a record is deleted (can be canceled)
• onRecordDeleted - Triggered after a record has been deleted

Control Level Events

• onClick - Triggered when a control is clicked
• onChange - Triggered when a control's value changes
• onFocus - Triggered when a control receives focus
• onBlur - Triggered when a control loses focus
• onRowCreated - Triggered for each row when a grid is populated
• onSelectionChanged - Triggered when a selection in a grid changes

Example Usages

Application Level Event

// Display a message after a record is saved
app.addEventListener("onRecordSaved", function(eventArgs) {
   app.showInfoMessage("Success", "Record saved successfully");
});

Button Click Event

// React to a button click
app.addEventListener("onClick", "saveButton", function(eventArgs) {
   // Execute custom logic before the standard save
   const customer = app.getFieldValue("customerName");
   app.setFieldValue("lastEditedBy", window.userName);
   app.setFieldValue("lastEditDate", new Date());
});

Form Field Change Event

// React to changes in a dropdown selection
app.addEventListener("onChange", "countrySelector", function(eventArgs) {
   const selectedCountry = app.getFieldValue("countrySelector");
   
   if (selectedCountry === "DE") {
      app.setVisibility("vatNumberField", true);
   } else {
      app.setVisibility("vatNumberField", false);
   }
});

Grid Row Creation

// Add styling to grid rows based on their values
app.addEventListener("onRowCreated", "invoicesGrid", function(eventArgs) {
   const status = eventArgs.details.data.status;
   
   if (status === "Overdue") {
      app.addClassToGridRowCell(eventArgs, "status", "bg-danger text-white");
   } else if (status === "Paid") {
      app.addClassToGridRowCell(eventArgs, "status", "bg-success text-white");
   }
});

Notes

• Event names should include the "on" prefix when registering (e.g., "onClick", not "click")
• The eventArgs parameter provides context about the event that occurred
• For control-specific events, eventArgs.controlId contains the ID of the control
• For grid events, eventArgs.details contains information about the grid row or cell
• You can register multiple handlers for the same event
• Return false from event functions like onRecordSave to cancel the default behavior