🚀 Oracle APEX: Control Active Tabs in Tabs Container Using Custom Logic

🚩Introduction 

• In Oracle APEX applications, Tabs Container is used to organize multiple regions within a single page, making navigation easier for users. However, APEX does not automatically handle tab selection in a consistent way. When a user comes from another page, the first tab should ideally be selected by default, but this does not always happen as expected.

• At the same time, when the page is refreshed or submitted, users usually expect to stay on the same tab they were working on instead of being taken back to the first tab. To handle this properly, we can use a simple custom solution using Dynamic Action or JavaScript to track and control the active tab. This helps provide a smoother experience where tab selection behaves in a more natural and user-friendly way.

📑Why It is Essential to Track Tab Change in Tabs Container

In Oracle APEX, Tabs Container has a “remember tab” option that keeps the last selected tab, but it does not work well in all cases. For example, when a user comes from another page, the page may still open on the previously selected tab instead of showing the first tab by default.

To handle this properly, we need a simple custom solution to control the tab behavior. This ensures the first tab is selected when navigating from another page, while still allowing the same tab to be restored after a refresh or submit, giving a more consistent and expected user experience.

• Navigate to the first tab when the user opens the page from another page

• Keep the same tab when the page is refreshed or submitted

• Control tab selection using custom logic instead of default behavior

• Ensure a consistent and expected tab view for users

• Improve navigation experience in Oracle APEX Tabs Container

👉 Steps to Control Tab Navigation in Tabs Container

We can control which tab is selected in a Tabs Container by adding simple custom logic using Dynamic Action in Oracle APEX without any plugins. This helps ensure the first tab is selected when coming from another page and the correct tab is maintained on refresh or submit. Below are the steps to achieve this.

Step 1: 

In the page designer, create region and select the region template as Tabs Container and create multiple sub regions as tabs under that. 

Step 2: 

Create the Dynamic action with the following things: 

                          Event                  :   Custom

                          Custom Event   :   atabsactivate

                          Selection Type  :  Region 

  

                          Region               : Tabs Container Region Name

Step 3: 

Create true action of type Execute Javascript Code and under that copy the below javascript code to get the reference of tab which is clicked. Using this reference, we can store the index of the tab which is clicked by the user in the browser session using the sessionStorage. We will be storing it using the key ACTIVE_TAB. You can give any key.

//Dynamic Action

var newTab = $(this.triggeringElement).find('a.t-Tabs-link[aria-selected="true"]'); 
var tabIndex = $('a.t-Tabs-link').index(newTab);  
sessionStorage.setItem("ACTIVE_TAB", tabIndex); // you can give any name

Step 4: 

Now click on the page and navigate to the Execute When Page Loads section and copy paste the below javascript code to detect the page is navigated from other page or it is reloaded using 

performance browser function and this tells whether the page is navigated or reloaded  based on this, we are setting the desired tab as active.

//Execute When Page Loads

(function() {
      const TAB_KEY = "P4_ACTIVE_TAB";
      var nav = performance.getEntriesByType("navigation")[0]; 
      var $tabs = $('a.t-Tabs-link');  
      var savedTab = sessionStorage.getItem(TAB_KEY); 
      
      if (savedTab !== null && nav.type != "navigate") {
     //if the page is not of type navigate then we are retaining the same tab
        setTimeout(function () { 
            var $tabs = $('a.t-Tabs-link');         
            if ($tabs.length > 1) { 
                $tabs.get(savedTab).click();                 
            } 
          }, 300);  
         } 
         else {                  
            $tabs.first().trigger('click');
            sessionStorage.setItem(TAB_KEY, 0); 
           } 
   })();

Step 5: 

Now save the page and run the application, at first time the page is loaded, the first tab will be active and when you switch between the tabs and click on the refresh, now it fetches the active tab using the sessionStorage item and makes the required tab active.

🔥 Conclusion

Thus, we can use a custom Dynamic Action in Oracle APEX to make sure the first tab is always selected when a user opens the page from another page. At the same time, we can still control tab behavior for refresh or submit cases, making the navigation clear, consistent, and user-friendly.