Friday, 16 August 2013

Oracle APEX 4.2 - Removing the Show All tab from the Region Display Selector

One of new features in APEX 4 was something called the 'Region Display Selector' - it enabled the used to hide or show regions on a page. For example if you had multiple regions on a page you could use the Region Display Selector to view all the regions at once or one at a time.

Although this is can be quite a useful feature I had a customer that wanted to remove the 'Show All' tab but leave the remaining ones. You can see a working example of this here :

To achieve this I added some jQuery code into the 'Execute when Page loads' in the Javascript section of the Page Attributes:

So what is the JQuery actually doing here? Well we need to take a step back first and look at the HTML generated by the page BEFORE we added the JQuery ie when the 'Show All' tab was still showing. Here is the snippet that we're particularly interested in:

 From here you will see that the four 'tabs' are actually list items in an unordered list. The list itself is using a class called "apex-rds" and the first element in the list is 'Show All' . So back to our JQuery function

$(".apex-rds li:first-child").remove();

This function is looking for the class selector .apex-rds and in particular the first child of the li class which in this case will be the 'Show All' entry. Then it's using the JQuery remove() method to errr..... remove (smile emoticon) that element so it does not show on the page. 

No comments:

Post a Comment