1.Overview

This document explains about how to create dynamic quick picks for page items in Oracle Apex.

2.Technologies and Tools Used

The following technology has been used to dynamic quick picks in Oracle APEX,

  • Oracle Apex
  • Javascript
  • SQL

3.Use Case

  • 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.

Recent Posts

Start typing and press Enter to search