How do I Use tabs to display regions

 In Oracle APEX, using tabs to display different regions within a single page provides an effective way to organize content and enhance user experience. Tabs allow developers to group related information into separate views while keeping the interface clean and easy to navigate. Each tab can contain one or more regions, such as forms, reports, charts, or static content, and users can switch between them without reloading the page. This is especially useful for displaying detailed data about a record or separating user inputs from outputs within a single form.

In Oracle APEX, using tabs to display regions is an effective method for organizing content on a single page. Tabs allow multiple regions to be displayed conditionally, one at a time, based on the selected tab. This improves user experience by keeping the interface clean and structured, especially when working with complex forms or reports. Each tab can host different region types such as Classic Reports, Interactive Grids, Charts, or Static Content.

To implement tabs in Oracle APEX, begin by opening the Page Designer for the desired page. From the Layout pane, right-click the Content Body or any appropriate layout position, then choose Create Region. In the Region properties, set the Region Display Selector attribute to Yes if you want the user to toggle between regions using a region selector. Alternatively, you can use a Tabs Container as the Parent Region if you want classic tab behavior. To do this, create a parent region with the Region Type set to Tabs Container. Under this container, create multiple Sub Regions, each representing a tab.

Each sub-region you define will automatically appear as a tab. You can label each tab by setting the Title of the sub-region. These tabs will automatically show only one region at a time, and Oracle APEX handles the switching logic using client-side rendering without a full page reload.

Optionally, if you want to control tab visibility based on conditions or user roles, you can configure Server-side Conditions or Authorization Schemes on each sub-region.

To customize the appearance or layout of the tabs, you can apply CSS Classes or modify templates used in the region display. APEX also allows for dynamic actions that can be triggered based on which tab is active, enabling advanced interactivity across regions.

Using tabs to display regions helps present related data sets in an organized manner without overwhelming the user with too much information at once. It provides flexibility, keeps the page structure concise, and supports modular application design that aligns with user workflows.

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: 

Using tabbed regions in Oracle APEX improves the usability of your applications by reducing visual clutter and logically grouping content. With just a few configuration steps in Page Designer, you can create dynamic, user-friendly layouts that streamline data interaction and improve productivity. Whether you're building administrative dashboards or user-facing forms, tabbed interfaces make your APEX applications more organized and intuitive.