Overview
This document explains about how to create custom shortcuts for Interactive report fields in Oracle Apex.
Technologies and Tools Used
The following technology has been used to create filed shortcuts in Oracle APEX,
Use Case
- It improves the user experience (UX) while dealing with the large amount of records from the database.
- Any custom actions (DML, API fetch) added to this shortcuts menu which will improve the page performance.
- It will reduce the number of web elements (buttons) to be added in the page for triggering different actions.
Steps with Screenshot
Steps to be followed,
Step 1: Create a new page with the Interactive report region and set static ID as “IR_SC”.
Step 2: Set the static id for the particular column(EMAIL) where the shortcut menu need to be added in the report.
Step 3: Paste the following code in Page level function and global variable declaration editor.
Code:
const cIS = ‘custom-ir-sh’;
$(‘body’).append(`<div id=”${cIS}”></div>`);
const $menu = $(`#${cIS}`);
let clickedEmail;
let clickedId;
const menuItems = [
{
type: ‘action’,
label: ‘Copy email to clipboard’,
icon: ‘fa fa-user’,
action: () => {
navigator.clipboard.writeText(clickedEmail);
apex.message.alert(`Copied ${clickedEmail}!`);
},
},
{
type: ‘action’,
label: ‘Delete Row’,
icon: ‘fa fa-trash’,
action: () => {
apex.event.trigger(‘#IR_SC’, ‘delete’, clickedId);
},
}
];
$(`#IR_SC`).on(‘contextmenu’, ‘tr’, (e) => {
e.preventDefault();
const clickTarget = e.currentTarget;
clickedEmail = $(clickTarget).find(‘td[headers=”MAIL”]’).text();
clickedId=$(clickTarget).find(‘td[headers=”ID”‘).text();
});
In the above code two shortcut actions has been invoked,to copy the text to clipboard and execute dml operation on the table.
Step 4: Create hidden page item and custom dynamic action to trigger DML operation based on the shortcut mouse event.
Output:
Conclusion:
This is all about how to create custom shortcuts for interactive reports, which will help to improve page performance and better user experience(UX) for end users. We can do further customization by adding additional actions in the above java script code and maintaining as global function in the application.
