💡 Designing Dynamic QuickPicks in Oracle APEX

🚩Introduction 

  • Oracle APEX provides Quick Picks as a convenient way to allow users to populate page items with predefined values using a single click. While static Quick Picks are useful, real-world applications often require these values to be generated dynamically based on business rules, user roles, or underlying data.

  • This blog explores how to implement Dynamic Quick Picks in Oracle APEX page items, enabling developers to build more intelligent, flexible, and user-friendly forms by driving Quick Pick values directly from database queries and runtime logic. 

📑 Why Dynamic Quick Picks Are Needed  

Static Quick Picks in Oracle APEX are useful for simple filtering, but Dynamic Quick Picks become essential when:

  • Filter values must be generated at runtime based on current data, user role, or context

  • Applications require data-driven filters instead of hardcoded values

  • The same Quick Picks must adapt across multiple pages or regions

  • Filter options depend on other selected filters (cascading behavior)

  • Dashboards need frequently changing filter options (e.g., latest periods, statuses, categories)

  • Multi-tenant applications require tenant-specific filter values

  • Users expect relevant, up-to-date shortcuts rather than static predefined choices

  • Maintenance overhead must be reduced by avoiding manual updates to Quick Pick values

Dynamic Quick Picks provide greater flexibility, improve usability, and ensure filters remain accurate, contextual, and scalable—making Oracle APEX applications more responsive to real-world data changes and modern UX expectations. 

👉 Steps to design Dynamic Quickpicks in Oracle APEX PageItems.

We will be designing this quickpicks with dynamic values by using the ajax callback for the dynamic data from the database and with little javascirpt. 

Step 1: 

In the page designer, create a page item and change the type to Text Field (it works for any type). For this tutorial we will be using the Text Field page item.

Step 2: (Optional) 

To configure the static quickpicks, click on the page item and in the properties tab, under the Quick Picks section check the quick picks option and enter the static quick pics display and return value. If you are designing dynamic quickpicks, then uncheck this to avoid extra values.

Step 3: 

 To create the Quick Picks dyanamically, we need to create the container to hold these quick picks created at the runtime, so click on the page item and in the properties under the Help section, in the Inline Help Text paste the code below.

                                            Page Item -> Properties -> Help -> Inline Help Text

  <div id="quickPickContainer"></div>

Step 4: 

Now to generate the dynamic content from database, we will use ajax callback process. So create an ajax callback process. It should return the JSON formatted array of Label - Value Pairs. These labels will be shown as the Quick Picks and on clicking this the associated values will be assigned to the page item.

                       --- AJAX CALLBACK CODE---
DECLARE   l_json CLOB;
  CURSOR c IS     SELECT '5%' AS label, '5' AS value FROM DUAL     UNION ALL     SELECT '10%' AS label, '10' AS value FROM DUAL     UNION ALL     SELECT '15%' AS label, '15' AS value FROM DUAL     UNION ALL     SELECT '25%' AS label, '25' AS value FROM DUAL BEGIN   apex_json.open_object;   apex_json.open_array('output');    FOR quickPicks IN c LOOP      apex_json.open_object;      apex_json.write('label', quickPicks.label);     apex_json.write('value', quickPicks.value);      apex_json.close_object;   END LOOP;    apex_json.close_array; apex_json.close_object; END;

Step 5: 

Once the ajax callback is created, now we will the write the javascript code to call that and show the quickpicks in the page item. The Javascript script should be placed in the Function and Global Variable Declartion section.

                                     Page -> Properties -> Function and Global Variable Declartion 

              ---- Function and Global Variable Declaration ----
var container = $("#quickPickContainer"); //Placeholder for the Quickpics created in //the pageitem inline help dialogapex.server.process("QuickPicks", {   dataType: 'text',   async: false }, {   success: function(pData) {     let val = pData['output'];     val.map((item, index) => {       let picks = (index < (val.length - 1))? item.label + ", " : item.label;   let link = $("<a>").text(picks).attr("href", "#")         .attr("title", item.label).addClass("quick-pick");       link.on("click", function() { // Page Item where the Quick Picks values will be copied         apex.item("P25_INPUT").setFocus();         $("#P25_INPUT").val(item.value);       });       container.append(link);     });   } });

Step 6:

Now save the page and run the application, the page item will show the quickpicks values which is fetched from the ajax callback process and assigned to the placeholder (#quickPickContainer). Using this approach you can generate the quick picks dynamically at the runtime which can be based on any roles, authorisation or any conditions etc.


You can watch the live demo in my youtube channel 👉 Thanigai Solutions

🔥 Conclusion

Thus, implementing Dynamic Quick Picks in Oracle APEX page items can be achieved using standard APEX features and simple SQL or PL/SQL logic, without relying on hardcoded values. By driving Quick Pick entries from database tables or runtime conditions, developers can overcome the limitations of static Quick Picks and deliver more intelligent and adaptable data entry experiences.

This approach enables a flexible, metadata-driven input mechanism that fits well in enterprise forms and configurable applications. It not only improves maintainability by centralizing Quick Pick definitions in the database but also significantly enhances usability, helping users enter accurate data faster while keeping Oracle APEX applications clean, scalable, and easy to maintain.

Comments

Popular posts from this blog

🔍 Extending Smart Search Filter for Multiple Regions

📒Designing Dynamic Inline Help Text