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.

How do I Create pop up modal pages

 

Introduction
Creating pop-up modal pages in Oracle APEX is an effective way to display additional information, forms, or interactive content without navigating away from the current page. Modal dialogs improve user experience by keeping context intact and allowing users to complete tasks quickly within a focused interface. Understanding how to build and configure modal pages is essential for designing modern, responsive APEX applications.

In Oracle APEX, creating pop-up modal pages allows you to display content such as forms, reports, or messages in a dialog window that overlays the current page. This approach keeps users focused by preventing full page reloads and maintaining context. Modal pages are widely used for quick data entry, confirmations, or detailed views without navigating away from the main interface.

Here is a detailed guide on how to create pop-up modal pages in Oracle APEX:

Step 1: Create a New Page of Type Modal Dialog

• In your APEX application, go to the App Builder and create a new page.

• Choose Modal Dialog as the page type.

• This page will automatically have a modal dialog template and layout optimized for pop-ups.

• Configure the page attributes like title and breadcrumbs as needed.

Step 2: Design the Modal Page Content

• Add the necessary page items (e.g., form fields, buttons) or regions (e.g., reports) to the modal dialog page.

• Keep the content concise since modals are best for focused tasks.

• Design validation and processing logic just like for any standard page.

Step 3: Configure Modal Page Settings

• In the modal page properties, set the Dialog Width and Dialog Height to control the size of the pop-up.

• You can specify pixel values or percentages.

• Optionally configure the Dialog Title Bar and buttons like Close or Cancel.

Step 4: Create a Button or Link to Open the Modal

• On the calling (parent) page, add a button or a link to open the modal dialog.

• Set the button or link’s action to Redirect to Page in Modal Dialog.

• Specify the modal page number you created.

• Optionally pass any required parameters via page items or request values.

Step 5: Passing Data Between Pages (Optional)

• Use page items to pass values from the parent page to the modal page via Set Items in the modal dialog link or button.

• Similarly, the modal page can pass values back to the parent page using page items and JavaScript events after submission.

Step 6: Handle Modal Page Processing and Close Behavior

• Define processing logic (such as inserting or updating data) in the modal page as usual.

• After processing, configure the modal page to close and optionally refresh the parent page or specific regions using dynamic actions.

• Use Dialog Closed dynamic actions on the parent page to react to modal dialog closing (e.g., refresh reports or display messages).

Step 7: Test the Modal Dialog

• Run your application.

• Click the button or link to open the modal page.

• Verify the modal content loads correctly.

• Complete any actions in the modal and confirm it closes and updates the parent page as expected.

Additional Tips

• Use modals for short, focused interactions to avoid overwhelming users.

• Keep modal dialogs responsive and avoid overly large content.

• Take advantage of APEX’s built-in modal dialog templates for consistent styling.

• Use Dynamic Actions and JavaScript to enhance modal behavior when needed.

Creating pop-up modal pages in Oracle APEX enhances your applications by enabling focused, efficient user interactions without losing context. By following best practices to design, open, and manage modal dialogs, you can build modern, user-friendly interfaces that streamline workflows and improve overall usability. Mastery of modal pages is a valuable skill for any Oracle APEX developer aiming to deliver polished and professional applications.

 

Creating Popup Modal Pages in Oracle APEX

A popup modal page in Oracle APEX is a great way to display additional content without navigating away from the current page. Modal dialogs can be used for data entry forms, confirmation messages, reports, or any interactive content.

This tutorial explains how to create and use modal popup pages effectively in APEX, including configuring attributes, opening them with buttons, passing values, and closing them dynamically.

Step 1: Creating a Modal Page

1. Go to Shared Components and create a new Popup Modal Page or create a new standard page and later configure it as a modal.

2. When prompted for a page type, choose Modal Dialog.

3. Set the Dialog Width and Height to define how large the modal will be. APEX allows fixed dimensions or responsive percentages.

4. Under Navigation, make sure the page is Dialog Mode: Modal Dialog.

5. Click Next and follow the standard APEX page creation process.

Step 2: Adding Content to the Modal Page

Once the modal page is created, add the content you need:

• Use Interactive Grids or Classic Reports to display data inside the modal.

• Add Form Items such as text fields, dropdowns, and buttons to allow user interaction.

• Use Region Titles and icons to improve readability.

Step 3: Opening the Modal with a Button or Link

To open the modal page, a button or link should be configured.

Option 1: Using a Button

1. Go to the Main Page where the button should be placed.

2. Add a Button and set its Action to Redirect to Page in Modal Dialog.

3. Enter the Target Page Number (the modal page created in Step 1).

4. If you need to pass values to the modal, use the Set Items property to send data.

Option 2: Using a Link

If opening the modal from a report or any hyperlink, use the Link Column in Classic or Interactive Reports.

• Set the Target as Redirect to Page in Modal Dialog.

• Assign Item Values from the row to be displayed inside the modal.

Step 4: Passing Values to the Modal Page

When opening a modal, it's common to pass values like an ID to fetch specific data.

1. Under Set Items, select the item on the modal page.

2. Use a corresponding Source Item from the calling page.

3. The modal page will now receive this value and use it in SQL queries.

Example SQL Query inside the modal:

SELECT * FROM EMPLOYEES WHERE EMPLOYEE_ID = :P10_EMPLOYEE_ID;

This will load employee details inside the modal based on the selected record.

Step 5: Closing the Modal and Refreshing the Parent Page

A modal should close after completing an action, such as saving a form.

Option 1: Using a Close Dialog Process

1. Inside the modal page, create a Submit Button (e.g., "Save").

2. In the Processing Section, create a PL/SQL Process to save the data.

3. Add a Close Dialog Process after the save action to close the modal automatically.

Option 2: Using JavaScript

Use this JavaScript code inside a Dynamic Action on a button to close the modal manually:

apex.navigation.dialog.close();

If refreshing the parent page is needed, use:

apex.navigation.dialog.close(true);

Step 6: Refreshing the Parent Page After Modal is Closed

If a modal updates data, refresh the main page when it closes.

1. Go to the Main Page where the modal opens.

2. Create a Dynamic Action on Dialog Closed.

3. Set the True Action to Refresh and select the relevant Report or Region to refresh.

This ensures that new or updated data appears without needing a full page reload.

Best Practices

• Keep modal sizes appropriate. Don't make modals too large—stick to essential content.

• Pass only necessary values to reduce complexity and avoid performance issues.

• Ensure modals close properly after actions to improve user experience.

• Refresh data on the parent page after a modal updates information.

• Use dialog headers and buttons for better usability.

Popup modals in APEX are an excellent way to improve interactivity without navigating away from the main page.

 By configuring modal pages correctly, passing values, and ensuring they close and refresh efficiently, you can 

enhance the user experience and create seamless workflows.

EXAMPLE:

Step 1: Add button and create a modal page…in this case our test modal page is page 9

Step 2:  Set behavior and target

Set Target:

Result :

Conclusion
Mastering the creation of pop-up modal pages in Oracle APEX enables developers to build seamless and intuitive applications that enhance user workflows. By leveraging modal dialogs, you can present important content in a clear, focused manner while maintaining the overall application context. Implementing modal pages effectively helps create polished and user-friendly interfaces that improve productivity and engagement.