Lucas Hirschegger

Oracle APEX - Mastering Collapsible Regions

Lucas Hirschegger's photo
Lucas Hirschegger
·

3 min read

One of the most effective ways to learn is by helping others, and this is a practice I have embraced for the past 20 years.

The benefits are twofold: not only is it incredibly satisfying to assist someone in overcoming their challenges, but it also compels you to delve into solutions for real-life problems, whether you are familiar with them or not. Not to mention that someone else's solution might surpass the one you proposed.

One of my sources of inspiration is the Oracle Forum. Recently, there were two questions on similar topics that I wanted to document here for the record:

  1. How to capture a collapsed/expanded event in a collapsible region.

  2. How to expand or collapse all records with a single button click.

1. Capturing collapsed and expanded events

If you quickly inspect the code behind the scenes in your browser when expanding or collapsing a collapsible region in Oracle APEX, you will notice that two specific CSS classes are toggled in the region container: is-collapsed and is-expanded .

In my effort to always solve problems natively, declaratively or in a low code way, here was my proposed solution.

Capturing Events - #1 Approach

This low-code approach is based on testing whether the region has certain CSS classes. That check happens when a click on the region icon occurs.

  1. Create a Dynamic Action

  2. Event: “Click”

  3. Selection Type: “jQuery Selector”

  4. jQuery Selector: #myRegion .t-Button.t-Button--icon.t-Button--hideShow

  5. Add a client-side condition to check if your region now has the is-expanded class.

  6. Create your true/false action.

Assuming we have an Alert as the true and false action, this would be the result:

Catching Non Documented Events - #2 approach

Thanks to John Snyders, who in his comment pointed out a better approach to achieving a similar result using two undocumented events.

Here is the original code for the more-code enthusiasts:

// Catch the collaps event
$("#myRegion").on(
    "collapsiblecollapse",() => {
        console.log("collapsed")
});
// Catch the expand event
$("#myRegion").on(
    "collapsibleexpand", () => {
        console.log("expanded")
});

If you are a low-code enthusiast, here is what you can do:

  1. Create a Dynamic Action

  2. Event: “Custom”

  3. Custom Event: collapsiblecollapse or collapsibleexpand

  4. Selection Type: “jQuery Selector”

  5. jQuery Selector: #myRegion

  6. Create your true/false action.

2. Control them all from a sigle button

The second question was about how to control all the collapsible regions from a single control button.

My initial approach was to use a method similar to the previous case, where I caught the click event and triggered an extra click in the second region. While this works, it is not the most elegant or scalable solution.

Again, a better solution comes from the community. Thanks to Karel Ekema for pointing out that there is already a function in APEX to control the collapsible regions.

Unfortunately, I haven't found it in the documentation, but exploring the source code of desktop_all.js provides enough information to get started.

// Expand the collapsible regions provided in the CSS selector.
$('<css_selector>').collapsible('expand');

// Collapse the collapsible regions provided in the CSS selector.
$('<css_selector>').collapsible('collapse');

// Toggle the status of the collapsible regions provided in the CSS selector.
$('<css_selector>').collapsible('toggle');

Using this simple line of code, you can target all collapsible regions at once.

Let's try it:

  1. Add a Custom CSS Class:

    • In the "Appearance" section of attributes for all the regions you want to control, add a custom CSS class, e.g., masterAll.

  2. Create a Button:

    • Create a button in your application.

  3. Create a Dynamic Action:

    • Event: Click

    • Selection Type: Button

    • Button: Select the button you have just created.

  4. Create a True Action:

    • Action: Execute JavaScript Code

    • Code: $('.masterAll').collapsible('toggle');

  5. Repeat:

    • Repeat the above steps for the Expand/Collapse button.

This results in an easy way of controlling your collapsible regions from a single action button.

Enjoy life!

Oracleorclapex