Search for a command to run...
Experienced Business Analyst with a demonstrated history of working in the airlines/aviation industry. Strong research professional with a engineer focused and a strong technical background. Skilled in SQL/PLSQL, Linux System Administration. A proud Oracle APEX Consultant.
No comments yet. Be the first to comment.
Audit Information The Audit section captures key metadata about each component in your APEX application. Specifically, it records: Changed By: The username of the last developer who modified the component. Changed On: The timestamp of the last modi...
In this fifth post of The Standard Component Attributes Anatomy series, I’m focusing on the Configuration attribute—better known as Build Options. Since Build Options are managed in Shared Components, we’ll take a quick look at that area as well. Con...
Comments The Comment attribute might be one of the most universally available fields in Oracle APEX. It allows developers to quickly leave notes or remarks—for themselves or for teammates—that are never shown to end users during runtime. You'll find ...
In this fourth post of The Standard Component Attributes Anatomy Series, we’re diving deep into the Help standard attribute. Although often overlooked, the Help attribute plays an important role in improving the user experience by providing clear, co...
In this third post of The Standard Component Attributes Anatomy Series, I’m tackling the Security attribute. Since the Security section includes references to Authorization Schemes from Shared Components, we’ll briefly touch on that as well. And beca...
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:
How to capture a collapsed/expanded event in a collapsible region.
How to expand or collapse all records with a single button click.
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.
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.
Create a Dynamic Action
Event: “Click”
Selection Type: “jQuery Selector”
jQuery Selector: #myRegion .t-Button.t-Button--icon.t-Button--hideShow
Add a client-side condition to check if your region now has the is-expanded class.
Create your true/false action.
Assuming we have an Alert as the true and false action, this would be the result:
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:
Create a Dynamic Action
Event: “Custom”
Custom Event: collapsiblecollapse or collapsibleexpand
Selection Type: “jQuery Selector”
jQuery Selector: #myRegion
Create your true/false action.
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:
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.
Create a Button:
Create a Dynamic Action:
Event: Click
Selection Type: Button
Button: Select the button you have just created.
Create a True Action:
Action: Execute JavaScript Code
Code: $('.masterAll').collapsible('toggle');
Repeat:
This results in an easy way of controlling your collapsible regions from a single action button.
Enjoy life!