This document explains about how to create dynamic quick picks for page items in Oracle Apex.
The following technology has been used to dynamic quick picks in Oracle APEX,
- Oracle Apex
- Javascript
- SQL
- It improves the user experience (UX),while entering data in the form regions.
- Any custom links (navigation,help text,cascading text) added as quick picks which will eliminate the rendering time of the building block.
- It will reduce the number of events need to incorporated with the page items for dynamic data population.
4.Steps with Screenshot
Steps to be followed,
Step 1: Create a new page with the static region and set static ID as “datePickers”.
Step 2: Create page items (P74_START_DATE, P74_END_DATE,P74_DURATION-HIDDEN) with quick link labels and attributes.
Step 3: Paste the following code in Page level function and global variable declaration editor.
Code:
let dateContainer$=$(‘#P74_END_TIME_CONTAINER .t-Form-inputContainer col col-10 .apex-quick-picks’);
const setQuickPicks=(duration)=>{
$s(“P74_DURATION”,duration);
apex.event.trigger(‘#datePickers’,’set-end-time’);
}
dateContainer$.find(‘.cc_picks’).each((ind,el)=>{
el.setAttribute(“href”, `javascript:setQuickPicks(${el.innerText
.replace(/(\s+)minutes/,””)
.replace(/(\s+)hour$/,””)
.replace(/(\s+)hours$/,””)
});`)
});
Step 4: Create dynamic action on custom event and map it to Quick pick links with server side PLSQL code.
Code:
BEGIN
SELECT CASE
WHEN TO_NUMBER(:P74_DURATION) IN (1,2) THEN
TO_CHAR((TO_DATE(:P74_START_TIME,’DD-MON-YYYY HH:MIPM’))+(TO_NUMBER(:P74_DURATION)*60/1440),’DD-MON-YYYY HH:MIPM’)
ELSE
TO_CHAR((TO_DATE(:P74_START_TIME,’DD-MON-YYYY HH:MIPM’))+(TO_NUMBER(:P74_DURATION)/1440),’DD-MON-YYYY HH:MIPM’)
END
INTO :P74_END_TIME
FROM DUAL;
END;
Output:
Conclusion:
This is all about how to create dynamic quick picks for page items ,which will help to improve page performance and better user experience(UX) for end users. We can do further customization by adding additional custom events in the above java script code and maintaining as global function in the application.
