Dynamic Show/Hide in APEX

Understanding is required before success is possible [Dune] old Orange Catholic Bible When you want to hide and display certain regions in an APEX based application based on the selection of the user, for instance when a button or a link is pressed then you can of course use the Region Display Selector, but this takes up a region on

Understanding is required before success is possible
[Dune] old Orange Catholic Bible

When you want to hide and display certain regions in an APEX based application based on the selection of the user, for instance when a button or a link is pressed then you can of course use the Region Display Selector, but this takes up a region on your page and is not very customisable (yet). If you want more control over the look and feel and what happens when a user clicks an item, for instance show multiple regions or just use the hovering over an item to show something you need to build it yourself.

Using dynamic actions makes it possible to do exactly what you want when you want it. You have to do some more work, but in return you’ll get a lot more flexability.

‘Problems’ with Region Display Selector

There is a ‘Show All’ which you cannot get rid of (or at least I haven’t found a way to do it). Then you don’t have too much control on how to display the items. You might want to display them next to eachother, or below eachother.

Then you might want to use images for the different options.

What needs to be done when

Since you take control over the displaying of the regions you also have to take care of the hiding of the regions. Think about what has to be done when a user selects an option. If you display a region, this also means you want to hide any already displayed region. The easiest way (least work) is to create a single dynamic action that hides every region which is fired before you display the region you want. You can of course hide all the regions in the same dynamic action where you show the current region, but if you decide to add another region later on, you have to make sure you add hiding of this region in existing Dynamic Actions, which you will forget to do (at least I will).

How it’s done

Let’s create a navigation region. This is where all the action will be triggered from. On this region we create 5 images which will serve as buttons for our actions. Then we create 5 regions that will be displayed when the user clicks on one of the images. Make sure these regions have the display selector set to YES for them to be able to be hidden and shown at will.

Next we create an overall Dynamic Action to hide all the regions. This Dynamic Action will be connected to all images and it should be fired first. It also good to run all the true actions on page load.

Then, for every image, we create a separate Dynamic Action to show the appropriate 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 of this technique here or download the source of this APEX application here.