Collapsible regions in APEX

APEX5 UT remote control for collapsible regions

Introduction

A colleque of mine recently had the wish to be able to control the state of a collapsible region using a page item.

This is how a simple report region using the “Collapsible” region template looks like.

Collapsible regions  in APEX

We now want to control the state of the region by a page item. For example if the item is NO or 0 then the region should be expanded, if it is YES or 1 then the region should be collapsed.

There are three general options how to do that.

  1. Simulate the click on the region button
  2. Dynamically switch css classes
  3. Set the template option based upon some page item value

I’ll show how to implement all three possibilities.

There is also demo on https://apex.oracle.com/pls/apex/f?p=21878 to show the different options.
Login: guest/information

Option 1: click the button

Option 1

First we create a page item that should influence the state of our region. I’ve choosen a radio group, but any type of item will do.

A dynamic action is added that reacts on the change event (or on click) for the radio group. The DA then will executes the click on the button, but takes into account the current state of the region and the value of the page item. So that if you choose “expanded” then the click will only be executed if the region is currently collapsed.

On Change dynamic action

The DA has a condition PAGE_ITEM equals 0 (=expanded). This condition allows to have a TRUE (=expand) and a FALSE (=collapse) javascript action.

Condition for DA

The button can be identified using the region static alias (here REGION_TOGGLE).
The following jquery selector would find the region and the matching button in it.
$(‘#REGION_TOGGLE button.t-Button–hideShow’)

To find out about the state of the region/button we could either check the is-collapsed|is-expanded class or the aria-expanded attribute of the button.

A click() will then do the click event on the element that is selected.

So this is how the two actions can be implemented:

TRUE action:
$(‘#REGION_TOGGLE button.t-Button–hideShow[aria-expanded=”true”]’).click()

FALSE action:
$(‘#REGION_TOGGLE button.t-Button–hideShow[aria-expanded=”false”]’).click()

This works as long as there are no sub regions that could also be collapsible. Then the jquery selector needs to be more specific.

Option 2: switch css

Option 2

This is similiar to Option 1. But instead of doing a click event, the css classes are exchanged. So the difference to option 1 is only in the javascript actions of the dynamic action.

True action:
$(‘#REGION_TOGGLE2.a-Collapsible.is-collapsed’).removeClass(‘is-collapsed’).addClass(‘is-expanded’);
$(‘#REGION_TOGGLE2.a-Collapsible .a-Collapsible-content’).show();

False action:
$(‘#REGION_TOGGLE2.a-Collapsible.is-expanded’).removeClass(‘is-expanded’).addClass(‘is-collapsed’);
$(‘#REGION_TOGGLE2.a-Collapsible .a-Collapsible-content’).hide();

Three activities are done. The old class is removed from the button and the new class is added. This simply changes the icon (arrow down or left) of the region botton. And then the region content below the region header is shown or hidden.
The jquery .show()|.hide() methods result in a {display:block|none} css.

Option 3: template option

Option 3

This option works differently then the other two. It does not change the region state dynamically. Instead it renders the region depending on some item state during page load. In this case the item is not 0 or 1, but instead has a value of “is-expanded” or “is-collapsed”.

The “Collapsible” region template was copied as “Collapsible_by_Item” and got a new template option “Default State (by Item)”. The group for the new option needs to be “default state”. The value of the option is “&P1_ITEM_NAME.” (choose your specific item name).

Careful: If implemented like this, then the region template can only be used on the page where this page item exists. But it is an easy way to do it.

After creating the template the region must use it and set the default state to “Default State (by Item)”.

The Region can now be collapsed and expanded by changing the item and submitting the page. The item state will stay (apex default behaviour) and therefore the correct template class is used during page load.

Comparison

All options have some tiny differences that we should be aware of.

  • Option 1 (click) leaves the region button “highlighted” with a tiny blue ring around the icon. This is because the browser marks the button as active or current. This won’t happen for the other options.
  • For all options the state of the region can differ from the state of the page item. It happens when the region is collapsed or expanded by clicking on the region button directly.
  • Option 1 and 2 can be combined with Option 3 if the execution of the dynamic action should be avoided during page load.
  • Option 3 requires good understanding between page item state and region rendering. But it avoids that the region is changed, after the page is loaded. This is especially valuable for pages that need some time to load.
  • A simple refresh of the region does not work for option 3 because the refresh logic is based upon the content of the region and does not include the region header.
Advertisements

7 thoughts on “APEX5 UT remote control for collapsible regions

  1. The collapsible widget also has expand and collapse methods. Haven’t tried them but seems like could be another option. Option 2 could confuse the widgets internal state.

  2. I want to be able to set a value in the database when the region is collapsed/expanded.
    I tried creating dynamic action on the click action of the jquery selector
    $(‘#REGION_TOGGLE button.t-Button–hideShow’) with my static id.
    The dynamic action doesn’t seem to fire.
    Is this the correct jquery selector???

    Using Apex 5 universal theme.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s