VB: Custom Events

DISCLAIMER: The views expressed in this story are my own and do not necessarily reflect the views of Oracle.

Overview

This article describes how to create and utilize custom events in Oracle Visual Builder. Custom events can be defined in a page, flow, or application and can be used in various ways such as:

• Trigger an action chain via custom event from another action chain or JS function
• Navigate between flows in your application

Pages → Flows → Application

• Pages can access custom events at page (self), flow, and application level.
• Flows can access custom events at flow (self), and application level.
• Application can access custom events at application (self) level.

For this example, we will create a custom event at the page level that will be triggered from both an action chain and JS function.

Setup

Custom Event

• Create a custom event at the page level called pageEvent with a payload containing parameter message as show below.

• Create an action chain called pageEventActionChain with a variable message (string) as show below. This action chain will fire a notification to show the input message.

• Create an event listener for the event pageEvent that triggers the action chain pageEventActionChain as show below. Be sure to map the message parameter from custom event to the message parameter in action chain.

JS Function

• Copy the following into JS file.

define([], function() {
'use strict';
var eventHelper;
var PageModule = function PageModule(context) {
eventHelper = context.getEventHelper();
};
PageModule.prototype.triggerCustomEvent = function() {
// Do something here
// Trigger custom event
eventHelper.fireCustomEvent('pageEvent', {message: "Page custom event triggered from JS Function."});
};
return PageModule;
});

Action Chains

• Create an action chain called triggerEventActionChain that fires the pageEvent. Be sure to set pass value for message parameter.

• Create an action chain called triggerEventJSFunctionActionChain that calls the JS function triggerCustomEvent.

Action Chains

• Add the following HTML with two buttons. One button will trigger the action chain triggerEventActionChain and the other button will trigger action chain triggerEventJSFunctionActionChain.

<div class="oj-flex oj-sm-flex-direction-column oj-sm-align-items-flex-start">
<oj-button class="oj-button-lg" on-oj-action="[[$listeners.ojButtonOjAction]]">Page Custom Event (Action Chain)</oj-button>
<oj-button class="oj-button-lg" on-oj-action="[[$listeners.ojButtonOjAction2]]">Page Custom Event (JS Function)</oj-button>
</div>

Test

• Run the application. Click on buttons and notifications should be displayed (triggered via custom event).

References

Oracle Visual Builder — Custom Events