Region display selector

How to use the Region Display Selector

in my previous blog post on Sticking Information to the top of the page I mentioned the Region Display Selector, but I thought in fact it may also be good to explain that a bit further as well.

This mechanism is used in the APEX Builder all over the place.

I'm working here in APEX 5.1.1 ...

Example in APEX Builder

This mechanism is used all over the place in the builder, but one example is the Security Attributes in Shared Components.

When "Show All" is selected, you can see all the tab pages. And when you scroll down, you'll notice the region indicator stays in its place and a visualisation effect shows you where you are while scrolling.

When you select one of the tab pages, only that specific region will be shown? In the example below the Session Management tab is selected.

This exact same mechanism I want to be able to use in my own applications ...

Example

A very quick example: a (for now) two pages application: the Home page (which is empty) and the Region Display Indicator page. I'll walk through it while creating the page.

Starting point

I used the wizard to create the application in its most simple way: application with home page!

I added the page (2) Region Display Selector as an empty page:

On Page 2 I've then created two regions in the Content Body:

This is the result for now:

Creating the Region Display Selector region

Simply create a new region of type Region Display Selector.

You now already have all building blocks in place. 

But I hope you agree with me that it's not yet the correct layout:

But it does already work. In the screenshot above the "Show all" is selected and yes, both regions are shown.

But when you e.g. select "Sub Region2", you'll notice "Sub Region 1" is no longer displayed.

Now I want the Selector region on top of both sub regions and I want to hide the title.

Moving it up the page is easy. Simply drag and drop the region where you want to have it.

In the attributes pane for the Selector region, you can edit the Template Options:

Set the header to Hidden and optionally also set style to Remove UI Decoration:

This results in:

And I believe this does the trick.

If you want the Selector to stick to the page, you can move it into the Breadcrumb Bar.

Or have a look at my previous blogpost ;-)

Happy to share