How do I Use tabs to display regions

 

Introduction
Using tabs to display regions in Oracle APEX is an effective way to organize content on a single page without overwhelming the user. Tabs allow multiple regions to share the same space while only one is visible at a time, improving the layout and making it easier to navigate complex information. Oracle APEX provides built-in support for tabbed interfaces using standard templates and region display selectors, making it easy to implement clean, user-friendly designs.

To use tabs for displaying regions in Oracle APEX, follow these steps:

1. Create the Page and Regions

   • Open your APEX application in Page Designer.

   • On the desired page, create multiple regions that you want to display as separate tabs. These could be reports, charts, forms, or any other region types.

   • Give each region a clear and descriptive title. These titles will become the tab labels.

2. Set the Region Display Selector

   • In the Region Position setting, choose a location that supports tab containers, such as Region Display Selector (e.g., Body (3 regions) or Content Body depending on your theme).

   • For each region you want to include in the tab set, set the Region Display Selector attribute (under the Layout section) to Yes.

   • Make sure that each tabbed region shares the same parent container (e.g., all under the same region or column) for consistent tab behavior.

3. Customize the Tab Appearance (Optional)

   • If needed, you can customize the look and feel of the tabs using Template Options or by applying a different theme style.

   • You may also use dynamic actions or JavaScript to control which tab opens by default or based on user interactions.

4. Test the Page

   • Run the page.

   • You should see your region titles displayed as tabs. Clicking each tab should show the associated content while hiding the others.

5. Optional Enhancements

   • Use authorization schemes or conditions to show or hide specific tabs based on user roles.

   • Add icons or styling to tab headers for a more polished appearance.

   • Use APEX Page Items or JavaScript to programmatically set the active tab if needed. 

 

 

Using Tabs to Display Regions in Oracle APEX

Tabs are a useful way to organize content in Oracle APEX, allowing users to navigate between different sections without reloading the page. By implementing tabs, multiple regions can be displayed dynamically, improving usability and reducing clutter.

This tutorial explains how to create and configure tabs to show and hide regions dynamically.

Step 1: Creating the Regions for the Tabs

1. Open your APEX application and navigate to the page where you want to add tabs.

2. In the Page Designer, create multiple Static Content Regions that will be displayed in different tabs.

3. Give each region a meaningful Title and Static ID (for example, tab_region_1, tab_region_2).

4. Make sure all regions are inside the same Parent Region to maintain structure.

Step 2: Creating the Tab Container

1. In Page Designer, create a new Static Content Region to act as the tab container.

2. Inside this region, add a List or Buttons to act as the tabs.

3. Assign Static IDs to the tabs, such as tab_1, tab_2, etc.

4. If using Buttons, create one for each tab and style them appropriately.

Example static HTML for tabs inside the container region:

<ul class="my-tabs">

  <li><a href="javascript:void(0);" onclick="showTab(1)">Tab 1</a></li>

  <li><a href="javascript:void(0);" onclick="showTab(2)">Tab 2</a></li>

  <li><a href="javascript:void(0);" onclick="showTab(3)">Tab 3</a></li>

</ul>

Each <a> tag triggers a JavaScript function to show the corresponding region.

Step 3: Adding JavaScript to Show/Hide Regions

In Page Designer, add the following JavaScript code in the Execute When Page Loads section to control tab switching:

function showTab(tabNumber) {

    // Hide all regions first

    $("[id^=tab_region_]").hide();

    // Show the selected region

    $("#tab_region_" + tabNumber).show();

    // Update active tab styling

    $(".my-tabs li").removeClass("active");

    $(".my-tabs li:nth-child(" + tabNumber + ")").addClass("active");

}

This function hides all tab regions and then displays the selected one while updating the tab styling.

 

Step 4: Setting the Initial Tab Display

By default, all regions will be visible unless manually hidden.

1. In Page Designer, navigate to each tab region and set Server-Side Condition to Never (if using Dynamic Actions to control visibility).

2. Alternatively, add this JavaScript in Execute When Page Loads:

$("[id^=tab_region_]").hide();

$("#tab_region_1").show();

$(".my-tabs li:first-child").addClass("active");

This ensures that only the first tab's content is displayed when the page loads.

---

Step 5: Styling the Tabs with CSS

To enhance the appearance, add custom CSS. In Shared Components > CSS, add:

.my-tabs {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    border-bottom: 2px solid #ccc;

}

.my-tabs li {

    padding: 10px 20px;

    cursor: pointer;

    background: #f1f1f1;

    margin-right: 5px;

}

.my-tabs li.active {

    background: #0077cc;

    color: white;

    font-weight: bold;

}

This styles the tabs with a clickable UI and highlights the active tab.

Step 6: Using Dynamic Actions Instead of JavaScript

If you prefer Dynamic Actions over JavaScript:

1. Create a Dynamic Action on each tab button.

2. Set the action to Hide all tab regions.

3. Add another action to Show the corresponding region when the tab is clicked.

4. Optionally, add a Set Style action to highlight the active tab.

This approach requires no manual JavaScript coding but functions similarly.

Best Practices

• Keep tab names short and clear for easy navigation.

• If the page has multiple tab sections, use unique IDs for each group.

• Use Session State if you need to retain the selected tab across page reloads.

• Test on different screen sizes to ensure the tabs remain usable on mobile devices.

Using tabs in Oracle APEX allows for better organization of content without overwhelming users with too much information at once. Whether using JavaScript or Dynamic Actions, tabs provide a seamless way to switch between regions dynamically while maintaining an efficient layout.

EXAMPLE:

Step 1 – Add a Region display selector

Step 2 – Add one or more regions to the body

Step 3 – Set the Tab Region’s attributes as follows:

Step 4- Set the “Advanced” area of all of the regions as follows:

The tabs should display as follows: 

Conclusion
Tabs are a powerful feature in Oracle APEX that help you organize multiple content sections efficiently within the same page space. By using region display selectors and proper region layout, you can create a smooth, intuitive tabbed interface that enhances user navigation and improves overall application usability. Whether displaying reports, forms, or dynamic content, implementing tabs brings clarity and structure to complex pages in your APEX applications.