Update on 16-04-2016: Since Application Express 5.0, region display selector regions include the Include Show All attribute. Simply select No for this attribute if you don’t need the Show All functionality.
Every time I use a region display selector in APEX, I feel like I should get rid of the Show All tab. A region selector typically structures a great amount of page items into logical groups. Having all these items visible on your web page often looks messy. I’ve put together some jQuery code, four three lines in total, that simply removes the Show All tab from the page. Let’s first examine the HTML code that makes up a region selector:
Make sure that all of your regions are assigned the region display selector region as parent region. Your region hierarchy should look like this. Neglecting to do so will result in a different HTML structure, resulting in the malfunctioning of the below jQuery code.
The horizontal list of tabs is implemented as an unordered list (ul). The first list item (li), which is our evil Show All button, has two classes assigned:
- apex-rds-first: indicates that the Show All tab is the first tab in the list. That’s how the left part of the tab gets rounded corners
- apex-rds-selected: indicates the active tab. Results in a colored background
The divs at the end of the code are the (child) regions that are part of the (parent) region display selector region. Each tab is linked to a div, apart from the Show All tab of course. Clicking on a tab causes all divs to hide, except for the div that is related to the clicked tab.
Now, the jQuery code that removes the Show All tab must be executed on page load. Include the below code in the Execute when Page Loads text area on page settings.
$('.apex-rds li:first-child').remove();
$('.apex-rds li:first-child').addClass('apex-rds-first');
$('.apex-rds li:first-child').addClass('apex-rds-selected');
$('.apex-rds-container').siblings().slice(1).hide();
- (1) Remove the first list item of the ul element, identified by the class apex-rds. This rule basically deletes the Show All tab from the DOM.
- (3) + (4) Assign the apex-rds-first and apex-rds-selected classes to the first list item.
- (6) Hide all regions, apart from the first region.
Update on 13-01-2013: it’s even possible with three lines of code…
$('.apex-rds li:first-child').remove();
$('.apex-rds li:first-child').addClass('apex-rds-first');
$('.apex-rds li:first-child > a').trigger('click');
That’s it. Curious how it looks like? Check out my demo.
APEXPLAINED 
Reblogged this on Sutoprise Avenue, A SutoCom Source.
LikeLike
Hello,
I understand the post but dont understand where to perform the above instructions in APEX?
Thanks R
LikeLike
Sorry, misread the part of the post, all sorted. Works a treat, thank you :-)
LikeLike
Great post!
Thaanks!
LikeLike
Works like a charm. Great post and well explained how to deploy this solution.
LikeLike
just applied your code – still working in 2014 :) thanks!
LikeLike
Great Work.. Thanks..
LikeLike
hi what if i wanted to hide/show two regions at the same time?
LikeLike
Well, the concept of a region display selector in APEX is that it shows either all or a single region. Showing two regions at the same time doesn’t fall under the concept of a region display selector. A solution would be to add a sub region under the region that is part of the RDS. That way you can show multiple regions at the same time. The sub regions, however, will not be visible in the RDS navigation list.
LikeLike
Great post and solved my problem.
One thing I would like to do is to always have the page revert back to the first region if the page is reloaded. RIght now it stays on the last region that was selected. I don’t understand why it does this since the jQuery code clicks on the first region when the page loads. I can see it briefly selecting the first region when the page reloads but then it jumps to which ever region had been previously selected. Ideas?
LikeLike
I guess you are using APEX 5.0? The sticky tab behaviour you describe has been introduced in version 5.0 I believe (not 100% sure though). A lot of people were asking for this feature. I don’t see a setting on the region display selector to change this behaviour and I didn’t succeed to do it manually with some JavaScript code on page load. You can always start a thread on OTN to get more help on this matter.
LikeLike
Hi Nick,
I want to know which tab is active and based on that i am writing some conditions for that selected region. But i’m not able to read the active tab onpage load and onclick.
Can you help me in this regard.
LikeLike
What APEX version are you on? If you are on APEX 5.0, add the following code to your “Execute on Page load” block.
$(".apex-rds").data("onRegionChange", function(mode, activeTab) { console.log(activeTab.href); });The activeTab.href property will give you back the id attribute of the selected region, prefixed with a hash sign. For example: #financialRgn.
Use console.log(activeTab) to list all properties of the activeTab element.
Source: https://community.oracle.com/thread/3720955
Hope that helps,
Nick
LikeLike
Hi Alex,
I’ve tried to implement the code which you’ve given but its not showing anything in the console.
For your consideration i’ve created a dummy application at apex.oracle.com and below are the user credentials:
MUPPARAJU/ chiruoatcm@gmail.com/ c9966896533
Application Id is 90859
LikeLiked by 1 person
Who is Alex? ^^
Your dummy application was not using a region display selector. I have changed the Tabs Region’s type to “Region Display Selector”. I also had to enable the “Region Display Selector” setting for every child tab region. You’ll now see console output whenever you click on a tab.
Nick
LikeLike
Hi Nick,
Thanks for the help. Its working like a charm. And btw sorry for the name mistake previously.
Any idea as to how to stop the page from jumping to top. I tried to add event attribute in the function and try to check the output in console. Its giving undefined.
LikeLike
I added the following code to your “Execute when Page Loads” block:
$(".apex-rds").data("showAllScrollOffset", function () { return false; });LikeLike
Hi Nick,
When using the template Tabs container the selection of the selected Tab will be different then when using the RDS?
For RDS i could use in an DA the follwing to get the selected Tab: a[href=#TAB_1].
But when using Tabs Container this is not working.
Do you have any hint or help on this?
LikeLike
I assume you’re using Universal Theme?
In that case, the href attribute value gets prefixed with #CR_SR_. So the jQuery selector will look like this when using the Tabs Container template:
a[href=#CR_SR_TAB_1]
Where TAB_1 is the static ID of a region.
Hope that helps,
Nick
LikeLike
Hi Nick,
Yes, i am using the Universal Theme.
The type of the regions is Interactive Report.
I have 4 IR regions where i has set an static id for all of them.
But when i click on tab-1 the DA is still not firing.
I had just put a simple Alert when true.
With RDS it’s working fine but with the Template Tabs container not.
Where with RDS i use a[href=#TAB_1].
The only thing which is not standard for the IR is that in the title of the IR i use the folling named code:
Tab_1 &P2_VKR_REC_COUNT.
Regards,
Anibal
LikeLike
I noticed that the HTML for the tabs are being generated on page load. This makes it difficult to bind a click event to the tabs. I tried using a delegated click event, but the event doesn’t get triggered for some reason.
That’s why I had to come up with a rather hacky solution. We’ll bind a click event to the tabs AFTER APEX finishes generating the HTML for the tabs. To do so, assign a static ID to the parent region that holds your four IR sub regions. I have used the ID parentRgn, which means that I’ll have to wait for the generated element parentRgn_RDS before I can bind the click event.
Execute the following JavaScript code on page load. Replace the parentRgn ID with your own ID.
var checkExist = setInterval(function() { if ($('#parentRgn_RDS').length) { clearInterval(checkExist); $('#parentRgn_RDS li a').on('click', function() { alert($(this).attr('href')); }); } }, 50);LikeLike
Hi Nick,
Thx.
Strange behaviour then with the template Tabs container.
But this is works ok now.
Regards,
Anibal
LikeLike