Introduction
Tab regions in Oracle APEX help organize content by grouping related sections, reducing visual clutter, and improving user navigation. Used effectively, tabs can improve usability, performance, and user satisfaction.
This post will discuss some nuances about tab regions in APEX and the things I look out for.
Creating Tab Regions in APEX
Creating a tab container is straightforward: Create a region, assign the ‘Tabs Container’ template, and any regions placed beneath it become tabs.
There are four options you can tweak under Template Options:
Remember Active Tab - This one is key, if you check this, when a page is refreshed, APEX automatically shows the most recent tab after the refresh.
Layout, Tab Style, and Tabs Size - These options are all related to the visual appearance of tabs. Modify them to reflect the appearance you want for your tabs.
Static IDs
I recommend adding Static IDs to the Tab Container region and all Tab regions. This will allow you to reference them from JavaScript, which we will discuss later in the post.
Enable Lazy Loading
If a tab region is based on a Classic Report, IR, IG, or Template Component, then I suggest enabling ‘Lazy Loading’ for infrequently used tab regions. This prevents the report in that region from running until the user clicks/activates the tab. This can significantly improve page load times for pages with multiple tabs.
🚀
For a page with four reports, Lazy Loading can significantly reduce the initial page load.
Tab Content and Ordering
Break the content of tabs into logical groups of fields. e.g., for a sales order page, place all customer information in a single tab.
Tab Ordering
Sequence tabs logically so that users can easily follow the flow as they move from tab to tab.
Number of Tabs
Try to keep the number of tabs to five or fewer. Any more than that becomes difficult for users to navigate.
Tab Appearance and Customization
Template for Tab Regions
I like to use the ‘Blank with Attributes’ region template for tab regions. This prevents the region title from showing up at the start of the tab, which overloads the UI (if you ask me).
Adding Icons to Tabs
You can add icons to tabs using the appropriate CSS classes in the region ‘Title’ as follows:
<span class="fa fa-search u-padding-right-sm" aria-hidden="true"></span>Search
CSS - Changing Tab Color
Now that the APEX Universal Theme supports CSS variables, changing the color of tabs is easy. Adding the following CSS to the page level Inline CSS will change the active tab color to the primary color for the current Theme Style:
:root {
--ut-tabs-item-active-text-color: var(--ut-palette-primary-contrast);
--ut-tabs-item-active-background-color: var(--ut-palette-primary);
--ut-tabs-item-active-highlight-color: var(--ut-palette-primary);
}
Using the above CSS, I get this:
instead of this:
💡
Using CSS variables and Universal Theme classes allows your Apps to automatically adjust when you switch to a different theme or to changes to the Universal Theme delivered by Oracle.
Sometimes it is helpful to perform an action when a tab is clicked (or activated).
💡
APEX emits a custom JavaScript event, atabsactivate, whenever a tab is clicked/activated. This allows developers to hook into tab actions programmatically.
Example
The below Dynamic Action shows a message with the static ID of the active Tab:
- In this case, the
atabsactivate custom event is fired when a tab is clicked for the region called ‘Tab Container’. It is also fired on page load.
JavaScript Explanation
The JavaScript code first gets the currently active tab. I have assigned the static is cn-tabs-container to the Tab Region ‘Tab Container’.
It then strips out the href for the currently active tab which looks like this:
<a href="#SR_cn-search" class="t-Tabs-link" role="tab" aria-selected="true" aria-controls="SR_cn-search">
<span><span class="fa fa-search u-padding-right-sm" aria-hidden="true"></span>Search</span>
</a>
- Finally it gets the static ID of the active tab from the href. In this case the static ID for the Search Tab Region is called
cn-search.
Here is the complete code:
var active = apex.region("cn-tabs-container").widget().aTabs("getActive"),
href = active.href,
staticID = href.replace(/^#SR_/, "");
apex.message.showPageSuccess( "You clicked the " + staticID + " Tab");
💡
The atabsactivate event is also fired when the Tab Region is instantiated after a page load.
Result
When you click a tab, the Static ID of the tab region is displayed.
Known Issues and Workarounds
As of APEX 24.2, there is a bug in APEX that causes the apex.item( "TBD" ).setFocus() JavaScript API to not work if there is a tab region on the page. Details can be found in this APEX Forum Post. As you can see from the post, using the atabsactivate event allows us to set the focus on a specific field after the tab region has been activated.
We can modify our previous JavaScript to set the focus on a particular item when a tab is activated. In this case, we set the focus to the search field when the search tab is clicked; otherwise, we set the focus on the question field.
var active = apex.region("cn-tabs-container").widget().aTabs("getActive"),
href = active.href,
staticID = href.replace(/^#SR_/, "");
if (staticID === 'cn-search') {
apex.item( "P2_SEARCH" ).setFocus();
} else {
apex.item( "P2_QUESTION" ).setFocus();
}
Conclusion
Tab regions in Oracle APEX are a powerful tool for organizing complex UIs, but they require careful setup to deliver the best user experience. By thoughtfully configuring tab containers, leveraging lazy loading, using static IDs, and enhancing with CSS and JavaScript, you can create interfaces that are performant, intuitive, and visually consistent.
