Organizing Complex Pages With Tabs
When an APEX page has many regions, displaying them all at once overwhelms the user and slows page rendering. The Region Display Selector component lets users switch between regions using tabs or buttons, showing only one region at a time. This is ideal for detail pages with distinct sections like Overview, History, Documents, and Settings.
Setting Up a Region Display Selector
Add a Region Display Selector region to your page. Then for each content region you want to include as a tab, set these properties:
In the content region’s Server-side Condition section, no condition is needed because the Region Display Selector handles visibility client-side. In the region’s Appearance section, set “Region Display Selector” to Yes. Set the “Title” property to the text you want to appear on the tab.
The Region Display Selector automatically creates a tab bar with one tab per participating region. Clicking a tab shows that region and hides the others, all without a page reload.
Default Selected Tab
By default, the first region is selected. To change this, set the default tab through a Dynamic Action on page load that triggers a click on the desired tab, or use the Region Display Selector’s “Include Show All” option which adds an “All” tab that displays all regions simultaneously.
Alternative: Sub Regions With Template Options
For simpler tabbed layouts, you can use a parent region with the “Tabs Container” template and place sub-regions inside it. Each sub-region becomes a tab. This approach is more integrated with the page designer and works well for 2 to 5 tabs of similar size:
-- Parent region: Template = "Tabs Container"
-- Sub-region 1: Title = "Details"
-- Sub-region 2: Title = "Line Items"
-- Sub-region 3: Title = "Attachments"Performance Benefit
The Region Display Selector hides regions using CSS, not by preventing their rendering. All regions are rendered on page load and then hidden. For regions with expensive queries, this means all queries run even if the user never views that tab. To optimize, use Lazy Loading on heavy regions: set the region’s “Lazy Loading” property to Yes, and the region’s content will only be fetched from the server when the user first clicks its tab.
Remembering the Selected Tab
By default, the tab selection resets to the first tab on every page load. To remember the user’s last selected tab, store the selected tab index in a hidden page item using a Dynamic Action that fires on tab change, and restore it on page load. This creates a seamless experience for users who frequently switch between detail tabs.