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.