When you want to show and hide certain regions in APEX based on the selection of the user then there is of course the possibility to use the Region Display Selector as a region on your page. Using this region all the other regions in the page that have Region Display Selector in the attributes section of the region set to YES. I don’t really like the way this region is built, the way it looks when you run the page that is.

I wanted to have more control about the look and feel of my selector region.

First of all, I don’t want the ‘Show All’ option and I cannot find a way to turn this button off.

Next, I want to display the option below each other, instead of next to each other.

Then, I want to be able to add different images to the options.

But doing so means I will have to do everything myself, which is not a bad thing, just takes some time to do it.

Enter Dynamic Actions. When I click an item, I want the appropriate region to be displayed and the other ones should be hidden. First iteration of my test page included 5 dynamic actions and in each dynamic action I showed the appropriate region and hid the other ones. So every dynamic action included 5 True Actions. 1 to show the region and 4 to hide others. But since I am a developer I am in essence lazy and I want to achieve SPOD (Single Point Of Definition). Thinking about what actually needs to be done is not show selected region and hide others, but actually hide all regions and show the selected region. That would include one ‘overall’ dynamic action the will hide all the regions and one dynamic action per item. Luckily you can have a single dynamic action attached to multiple items, so I created a single dynamic action on the click event of multiple items.

Too bad there is no multi select or shuttle option on the selection of items as there is for the affected item selection, but we can type the different item names separated by commas. When the user clicks on one of the items defined all regions will be hidden. Then, after this single dynamic action, I need to create separate dynamic actions on every item to display the right region.

Make sure the regions are hidden first and then the right region is shown. If you get this the other way around, then nothing will be displayed at all because the region will be displayed and right after displaying it, it will be hidden again because the other dynamic action says so.

When this was working I wanted to give some more feedback to the user when he/she hovers over one of the triggering items. This takes another two dynamic actions. One to underline the text when the user enters the item (with the mouse) and one to set the text to normal when the user leaves the item. I can use pretty much the same approach as I did with the hiding of the regions, but I don’t want the true action to affect all the items when pointing to a single one. Luckily APEX provides an option for the Affected Elements called Triggering Element.

This way the chosen Setting will only be applied to the element that triggered this dynamic action.

You can view a demo for these dynamic actions at: http://apex.oracle.com/pls/apex/f?p=41376 or download the source from http://bar-solutions.com/weblog/wp-content/show-hide.zip and install it in your own workspace.