Define Events in Your Application

An event occurs when something happens in your application. Some examples are when a page loads (lifecycle event), a button is clicked (component event), and when a variable's value changes (variable event). An event's type depends on how it is triggered; for example, a button or a menu would trigger a component event.

How you define events and event listeners depends on the type and scope of the event. This table describes the types of events and how you can define them:
Type of Event Description How to Define
Component events

An event associated with a UI component in a page, including those in dynamic components. It’s possible to choose which event the component triggers, but available events will depend on the component. For example, an event like ojAction is available to a button but not to an input text field.

Define a component's event and event listener in the component's Properties pane in the Page Designer. See Start an Action Chain From a Component.

Variable events

An event specific to a variable that occurs when the value stored in the variable changes. The only available variable event is onValueChanged.

Define a variable's event and event listener in the Variables editor. See Start an Action Chain When a Variable Changes.

Custom events
A user-defined event to start an action chain. It can be triggered by a Fire Event action in an action chain, or by using an event helper's fireCustomEvent() method in a module function (JavaScript function). See:

Create a custom event in the Action Chains editor or in the Events editor, then create an event listener for your custom event in the Event Listeners editor. See Start an Action Chain By Firing a Custom Event.

Tip:

You can also create an event listener for a custom event directly from the Events editor. Simply right-click a custom event in the Events editor and click Create Event Listener to create an event listener, called (eventId)Listener, in the same scope as your event.
Lifecycle events

Predefined events that are automatically triggered during a page’s lifecycle:

  • vbBeforeEnter is triggered before navigating to a page.
  • vbEnter is triggered when all flow or page variables have been initialized.
  • vbBeforeExit is triggered before leaving a page.

    The vbBeforeExit event optionally allows navigation to be canceled (say, when a page has unsaved changes) by returning an object with the property cancelled set to true. When using the browser (back or forward button), the event's payload is an object containing default parameter values. See the vbBeforeExit description in the Oracle Visual Builder Page Model Reference.

  • vbExit is triggered before leaving a flow or page.
  • vbAfterNavigate is triggered when navigation to the page is complete.

You can associate action chains with these events to augment a page or flow's default lifecycle. For example, if you want to initialize some component variables when a page opens, you can create an event listener in your artifact that listens for the vbEnter event, then set the event listener to trigger an action chain that assigns values to the component's variables.

Create an event listener for a lifecycle event in the Event Listeners editor. See Start an Action Chain From a Lifecycle Event.