Skip to main content

Dynamic Enable/Disable Quick Picks Based on Item in APEX

Oracle APEX items allow Quick Picks, but they are usually static.

In real-world business scenarios, we often need:

Quick Picks generated dynamically

Quick Picks styled for better UI

Quick Picks controlled based on another item’s value

Enable/Disable logic driven by business rules

In this article, I’ll explain how I implemented dynamic quick picks for one date item based on another date item.

🎯 Scenario

We have two Date Pickers:

P5_DATE1

P5_DATE2

For P5_DATE2, I created two custom quick picks:

1️ Current Month – 1st date

2️ Next Month – 1st date

🧩 Business Logic

Based on the value selected in P5_DATE1:

If user selects 1st day of current month

✅ Enable "Current Month – 1st"

❌ Disable "Next Month – 1st"

If user selects any other date

❌ Disable "Current Month – 1st"

✅ Enable "Next Month – 1st"

Step 1: Add Custom Quick Picks in DATE2 (Post Text)

In P5_DATE2 → Post Text:

<span class="apex-quick-picks custom-quick-picks">

    <a href="javascript:setMonthFirst('P5_DATE2',0)" id="cq1">

        Current Month - 1st

    </a>

    <a href="javascript:setMonthFirst('P5_DATE2',1)" id="cq2">

        Next Month - 1st

    </a>

</span>

Note: The “Show Quick Picks” attribute must be enabled for the Quick Picks to be displayed beneath the page item.

We manually control quick picks instead of relying on default APEX quick pick definitions.

Step 2: UI Styling (CSS)

.custom-quick-picks {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.custom-quick-picks a {
    display: inline-block;
    padding: 8px 14px;
    background-color: #f3f4f6;
    color: #1f2937;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    transition: all 0.3s ease;
}

.custom-quick-picks a:hover {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.custom-quick-picks a:active {
    transform: scale(0.95);
}

Step 3: JavaScript Function to Set Date

This function sets the first day of the month dynamically.

function setMonthFirst(item, offset){
    var d = new Date();
    var first = new Date(d.getFullYear(), d.getMonth() + offset, 1);

    apex.item(item).setValue(
        apex.date.format(first, "MM/DD/YYYY")
    );
}

offset = 0 → Current month first day
offset = 1 → Next month first day

Step 4: Core Logic – Enable / Disable Based on DATE1

Create a Dynamic Action:

Event → Change
Item → P5_DATE1
True Action → Execute JavaScript Code

var selectedDate = apex.item("P5_DATE1").getValue();

if (!selectedDate) {
    $("#cq1, #cq2").css({
        "pointer-events": "auto",
        "opacity": "1",
        "color": "#000"
    });
    return;
}

var selDate = new Date(selectedDate);
var currFirstDay = apex.date.firstOfMonth(new Date());

var isCurrMonthFirst =
    selDate.getTime() === currFirstDay.getTime();

if (isCurrMonthFirst) {

    $("#cq1").css({
        "pointer-events": "auto",
        "opacity": "1",
        "color": "#000"
    });

    $("#cq2").css({
        "pointer-events": "none",
        "opacity": "0.5",
        "color": "#999"
    });

} else {

    $("#cq1").css({
        "pointer-events": "none",
        "opacity": "0.5",
        "color": "#999"
    });

    $("#cq2").css({
        "pointer-events": "auto",
        "opacity": "1",
        "color": "#000"
    });
}

Comments

Post a Comment

Popular posts from this blog

APEX - Tip: Fix Floating Label Issue

Oracle APEX's Universal Theme provides a modern and clean user experience through features like floating (above) labels for page items.  These floating labels work seamlessly when users manually enter data, automatically moving the label above the field on focus or input.  However, a common UI issue appears when page item values are set Dynamically the label and the value overlap, resulting in a broken and confusing user interface. once the user focuses the affected item even once, the label immediately corrects itself and displays properly. When an issue is reported, several values are populated based on a single user input, causing the UI to appear misaligned and confusing for the end user. Here, I'll share a few tips to fix this issue. For example, employee details are populated based on the Employee name. In this case, the first True Action is used to set the values, and in the second True Action, paste the following code setTimeout(function () {   $("#P29_EMAIL,#P29_...
Post a Comment
Read more

Building a Custom Debug Package for Oracle APEX Using PL/SQL

While developing Oracle APEX applications, debugging page processes and backend PL/SQL logic can be challenging—especially when values are lost between processes or execution flow is unclear.  Although DBMS_OUTPUT is useful, it doesn’t work well inside APEX runtime. To solve this, I built a custom PL/SQL debug Package that logs execution flow and variable values into a database table.  This approach helps trace exactly where the code reached, what values were passed, and whether a block executed or not - even inside page-level processes and packaged procedures Why a Custom Debug Package? Works seamlessly inside Oracle APEX page processes Persists debug information even after session ends Helps trace execution flow Captures runtime values Can be turned ON/OFF dynamically Does not interrupt business logic The Package consists of:- Debug Table                         -  Stores debug messages Sequence ...
Post a Comment
Read more

Oracle APEX UI Tip: Display Page Title Next to the APEX Logo

In most Oracle APEX applications, every page has a Page Title displayed at the top. While useful, this title occupies vertical space, especially in apps where screen real estate matters (dashboards, reports, dense forms). So the goal is simple: Show the page title near the APEX logo instead of consuming page content space. This keeps the UI clean, professional, and consistent across all pages. Instead of placing the page title inside the page body:         ✅ Fetch the current page title dynamically         ✅ Display it right after the APEX logo         ✅ Do it globally, so it works for every page All of this is achieved using:         ✅ Global Page (Page 0)         ✅ One Dynamic Action         ✅ PL/SQL + JavaScript Simple, effective, and reusable. 1️⃣ Create a Global Page Item On Page 0 (Global Page), create a hidden item:      P0_PAGE_TITLE This item wi...
Post a Comment
Read more