Creating and Using Event listeners in Oracle APEX

What are Event Listeners?

Event listeners are the JavaScript code waiting to be executed as soon as the associated event gets triggered from the UI (e.g. User click on button or URL).

When to use custom Event Listeners?

1. (On client side) You want to execute a JavaScript Code when user clicks on your custom created Button or URL.

2. (optional) You also need to pass values from that button or URL to the JavaScript code you want to execute.

3. You are not able to achieve this using Dynamic Action or It’s getting too complex that way.

How to Create?

Event Listeners can be created by putting below code in page header attribute named “Execute when page loads”.

apex.jQuery(window).on('theme42ready', () => { // This line ensures that Theme42ready has loaded completely before proceeding
    var contextObjectName = apex.actions.createContext("ContextGroupName",$("#ContextElementID")); //creating a context to eliminate conflicts
    contextObjectName.add([
					{
						name : 'event-name',
						Label : 'Event Label',
						action: (event, element, args) => {
							var var1 = args.j_event_passed_value_1;
							//-------my code ------
							//--AJAX Call
						}
						 
					},
					{
                        //multiple event listeners can be added to the list
                        name : 'event-two',
                        Label : 'Event Two',
                        action : (event, element, args) => {
                            var var1 = args.j_event_passed_value_1;
                            //--------my code -----
                    }
    ]);
};

How to call (use)?

1. Using Button action

   <button 
       type="button" 
       title="Button Title" 
       data-action="action-name?j_event_passed_value_1=value1&j_event_passed_value_2=value2"
   > Text inside button </button>
   

2. Using Hyper-Link anchor tag

   <a 
       href="#action$action-name?j_event_passed_value_1=value_1&j_event_passed_value_2=value_2"
   > Link Text </a>
   

   You can also put #action$action-name?jevent_passed_value_1=value_1 in place of URL of declaratively created button after setting the button behavior to Redirect to a page in same application.