APEX Region Display Selector Focus

Sometimes, small layout details can make a big difference in user experience. If you’re using Region Display Selectors (RDS) in Oracle APEX and want a cleaner, more dynamic interface when switching between regions, this post is for you.

Problem

When working with the Region Display Selector (RDS) region type in Oracle APEX using the “View Single Region” mode, it’s relatively straightforward to ensure that each region occupies the full width of the page. You just need to enable the “Start New Row” layout option on all regions. This way, only one region is displayed at a time, and it spans all 12 columns of the layout grid.

However, things start to get tricky when you need to enable the “Include ‘Show All’” option inside the RDS Attributes. Once this is enabled, a new behavior comes into play: APEX now allows users to toggle between individual regions and the option to view all regions simultaneously. If you keep the “Start New Row” option enabled on all regions, all of them will be stacked vertically in the “Show All” mode→consuming unnecessary space.

To fix this, your first instinct might be to disable the “Start New Row” layout option on Regions 2 and 3. Doing so does allow regions to appear side by side when “Show All” is selected, leveraging APEX’s grid system as expected.

But here’s the problem: When a user selects just one specific region (instead of “Show All”), it doesn’t span the full width. That happens because all other regions are still rendered in the DOM (just hidden). That’s why the selected one stays confined to the space it would have had if the others were visible.

Solution

To solve this, I developed a simple but effective Dynamic Action with JavaScript that dynamically adjusts the selected region’s column span:

• When a specific region is selected, it expands to fill all 12 columns.

• When “Show All” is selected, the regions revert to their default layout, displayed side by side.

This gives us the best of both worlds:

• A focused view when working with a single region

• A clean, organized layout when viewing all regions at once

Implementation

1. Set Static IDs

For each region involved, go to its definition, and under the Advanced section:

• Assign a unique Static ID.

• Enable the Region Display Selector for the regions you want to be selectable through the RDS.

2. Create a Dynamic Action

• Name: RDS_FOCUS

• Event: Click

• Selection Type: jQuery Selector

• jQuery Selector: #{YOUR_RDS_STATIC_ID} .apex-rds .apex-rds-item a

• Action: Execute Javascript Code

  • Code:

// List of region Static IDs included in the RDS.
const regions = ['region1', 'region2', 'region3'];

// Store the original classes of each region's parent element (only on first run).
if (!window.parentOriginalClasses) {
    window.parentOriginalClasses = {};

    regions.forEach(id => {
        const el = $('#' + id);
        if (el.length) {
            const parent = el.parent();
            window.parentOriginalClasses[id] = parent.attr('class') || '';
        }
    });
}

// Get the selected region's ID from the clicked RDS link.
const href = $(this.triggeringElement).attr('href');
if (!href) return;
const regionId = href.replace('#', '');

// Reset all regions to their original layout state.
regions.forEach(id => {
    const el = $('#' + id);
    if (el.length) {
        const parent = el.parent();
        const originalClasses = window.parentOriginalClasses[id];

        // Restore original parent classes.
        if (originalClasses) {
            parent.attr('class', originalClasses);
        }

        // (Optional) Show the region header again.
        el.removeClass('t-Region--removeHeader');
    }
});

// If a specific region is selected (not SHOW_ALL), expand it to full width.
if (regionId !== 'SHOW_ALL' && regions.includes(regionId)) {
    const el = $('#' + regionId);
    if (el.length) {
        const parent = el.parent();

        // Clear any existing classes from the parent.
        parent.removeClass();

        // Apply full-width classes to make it span 12 columns.
        parent.addClass('col col-12 apex-col-auto col-start col-end');

        // (Optional) Hide the region header for a cleaner look.
        el.addClass('t-Region--removeHeader');
    }
}

Conclusion

With this simple JavaScript adjustment, we can significantly enhance the usability of the Region Display Selector in Oracle APEX by dynamically adapting the layout based on the selected option. This ensures a smoother user experience whether viewing a single region or all regions at once.

If you’re using RDS in your applications, this solution can be a great addition to improve the overall interface and usability.

Thanks for reading! I hope this solution helps streamline your APEX projects. 🚀 Feel free to share your thoughts or improvements in the comments. 👊