In this tutorial, I’ll show you how to link to a specific tab on another page within Oracle APEX. The easiest way to do this would be to use a page branch and use anchors, but sometimes, client requirements won’t allow you to use a page branch. For those circumstances, you can use a JavaScript Dynamic Action to link to a specific tab.
Sven Weller wrote a great post on this topic, but I noticed that his solution will no longer work in APEX 23.x. It appears that some minor things have changed with the APEX templates in 23.x, so we just need to adjust the code to get it back to working order. To illustrate the point, we will reference a small APEX app built in 23.x that has 2 pages.
With this process, you’ll be directly improving the user experience – giving users a shortcut to the content they need, no extra clicks or hunting required.
Sports Demo App Rundown
- Page 1 has a button called “Go to Baseball Tab”
- Page 2 has a tabbed region with different sports listed on each tab
- When the user clicks the “Go to Baseball Tab” on Page 1, the user is brought to Page 2 and the Baseball tab is selected
Demo App – Page 1
- The “Go To Baseball Tab” button fires a dynamic action (On Click), which executes JavaScript code
For APEX 23.x and above, use the following code:
prefix:”ORA_WWV_apex.apexTabs.”+&APP_ID.+”.2″
,useAppId:false
,usePageId:false});
sesStorage.setItem( “sports_tabs.activeTab”, “#SR_baseball_tb_reg” );
For versions prior to APEX 23.x, use this code:
prefix:”.”+&APP_ID.+”.2″
,useAppId:false
,usePageId:false});
sesStorage.setItem( “sports_tabs.activeTab”, “#SR_baseball_tb_reg” );
Demo App – Page 2
Page 2 of the demo app is the destination page and has a tabbed region with different sports
IMPORTANT! The “Remember Active Tab” option must be checked on the Tab Container region.
Next, give your region a Static ID. For the demo, I gave it a Static ID of sports_tabs.
Finally, ensure that your target tab has its own Static ID. I gave the baseball tab a Static ID of baseball_tb_reg.
How It Works
This is referenced in the JavaScript code on the “Go To Baseball Tab” button on Page 1:
prefix:”ORA_WWV_apex.apexTabs.”+&APP_ID.+”.2″
useAppId:false
usePageId:false});
sesStorage.setItem( “sports_tabs.activeTab”, “#SR_baseball_tb_reg” );
In this code, we are setting the active tab in session storage to the specific tab we want. The syntax is:
#SR_STATIC_ID_OF_YOUR_SPECIFIC_TAB”);
And that’s it! Now your users can get directly to the content they want.
References
- https://svenweller.wordpress.com/2018/11/27/apex-quickie-set-region-display-selector-dynamically/
- https://forums.oracle.com/ords/apexds/post/click-on-a-specific-tab-6676
- https://forums.oracle.com/ords/apexds/post/how-to-display-specific-tab-using-region-display-selector-a-0060
Requirements
- APEX 5x or higher
Disclaimer: We do not take responsibility for any unintended or unwanted consequences in your instance of Oracle, Oracle APEX, or related products as a result of reading our blogs or following our guides. Though the information is fully tested and generally safe to use, our lawyers really have a thing against admitting potential wrongdoing. If it makes you feel any better, one time they were tricked into buying shares of a new ski resort in Florida. It was the only ski resort on the planet where the bunny hill was the main attraction.
