Default Hidden Components

One thing I liked from Oracle Forms, which is not available in APEX, is the ability to set a Data Block Item’s Visible property to No. In Oracle Forms it meant that the page item would never show unless the developer programmatically set the item visible property to True at run-time using the SET_ITEM_PROPERTY built-in.

In APEX you can create a Dynamic Action to, based on a condition, Hide or Show the component – however by default it is always Shown. This sometimes causes a slight problem in that by the time the Dynamic Action has fired to Hide the component the user may, for just a fraction of a second, see the component briefly before it disappears. Now I have good eyesight and it annoys me slightly that I can, at times, briefly see the component before the Dynamic Action has time to hide it. The issue got better with APEX 5 but nevertheless is noticeable from time to time.

So I came up with a fix where by default the page item is set to hidden – This can then be shown or hidden on demand by a Dynamic Action. In this way the item would never be briefly shown just to be hidden; as it would always first start as hidden.

The Show or Hide Dynamic Action has many different selection types however the ones we are interested in are the Item(s), Button or Region types.

The fix is to create new templates (based on existing ones) to insert the magical piece of code style=”display: none;” in the right place. Once that code is inserted, the Show Dynamic Action will remove (or replace it) and the Hide Dynamic Action will put it back. Either way, the item is first rendered with the style code which means it will never display.

When creating new templates I, for example, created an “Optional: Default Hidden” template based on the “Optional” template. The following is the guide I used to add the code in the right place.

Applies to: All Label Templates e.g. Optional

In the Before and After Label section of the Template, add style=”display: none;” just before the last right-chevron character (>).

Applies to: All Region Templates e.g. Standard

In the Template section, add style=”display: none;” just before the last right-chevron character (>) on the first line.

Applies to: All Button Templates e.g. Text

In the Normal Template section & Hot Template section, add style=”display: none;” just after id=”#BUTTON_ID#” but before the right-chevron character (>).

After you create the new templates, just ensure any page items you don’t want to be displayed by default are using these new templates. Then just use the Show & Hide Dynamic Actions in the normal way.

In this way the page items which use these templates will not flash up on the browser just before they are hidden.

Author: Matt Mulvaney

Job Title: Senior Oracle APEX Development Consultant

Bio: Matt is an experienced APEX solution designer having designed numerous complex systems using a broad range of Oracle Technologies. Building on his previous experience of Oracle Forms & PL/SQL, he is entirely focused on providing functionally rich APEX solutions. Matt promotes APEX as a software platform and openly shares best practises, techniques & approaches. Matt has a passion for excellence and enjoys producing high quality software solutions which provide a real business benefit.