Define Events in Your App UI

An event occurs when something happens in your App UI. 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 available for an App UI 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: Module Function Event Helper Start an Action Chain By Firing a Custom Event	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 Studio 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. Other predefined events include: `vbNotification`: Triggered by the Fire Notification action to display a notification message in the browser. `vbDataProviderNotification`: Triggered by data providers to notify users of catastrophic errors that may occur when something goes wrong during an implicit fetch. `vbResourceChanged`: Triggered when an application has been updated to notify the user that they need to refresh to view the updated application.	Create an event listener for a lifecycle event in the Event Listeners editor. See Start an Action Chain From a Lifecycle Event.

Events in fragments work much the same as within a page, flow, or application—however, not all events supported within a page, flow, or application scope are available within a fragment. See Define Actions and Events in Fragments.