Ohh my… yet another silly word play on APEX

Hide the Show All tab in a region selector

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:

HTML for 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.

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.

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?

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.

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.

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?

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.

About Me

Hello, my name is Nick Buytaert. I live in Belgium. I was born in the nineties. I work for a consulting company called Contribute. I'm mainly interested in Oracle technologies and web application development. Read more...