APEX 5 collapse region
How to collapse or expand all regions?
Add functionality to your APEX region
If you ever needed to use APEX collapsible regions in your applications and wanted to implement short and effective collapse/expand all functionality, this is my workaround.
Initially I thought there might be a DA that will sort these things but haven't found one so decided to implement it myself.
Before I begin check out this demo.
Notice button on top right that opens and closes all collapsible regions.
Initially I thought there might be a DA that will sort these things but haven't found one so decided to implement it myself.
Before I begin check out this demo.
Notice button on top right that opens and closes all collapsible regions.
How is it all done?
On global page created On page load DA that executes this javascript:
$( "#MAIN_FRAME" ).prepend( '<table width="100%" cellspacing="0" cellpadding="0" border="0" summary=""><tbody><tr><td align="right"><button aria-label="Expand all" title="Expand all" id="OPENALL" type="button" onclick="void(0);" class="t-Button t-Button--noLabel t-Button--icon "><span aria-hidden="true" class="t-Icon fa fa-plus-circle"></span></button></td></tr></tbody></table>' );
$( "#OPENALL" ).click(function() {
if ( $( '#OPENALL span.t-Icon.fa.fa-minus-circle' ).hasClass( 'fa-minus-circle' ) ) {
$("button.t-Button.t-Button--icon.t-Button--hideShow").each(function() {
if ($( this ).attr("aria-expanded") == 'true')
{
$( this).click();
}
});
$('#OPENALL span.t-Icon.fa.fa-minus-circle' ).removeClass('fa-minus-circle').addClass('fa-plus-circle');
}
else {
$("button.t-Button.t-Button--icon.t-Button--hideShow").each(function() {
if ($( this ).attr("aria-expanded") == 'false')
{
$( this).click();
}
});
$( '#OPENALL span.t-Icon.fa.fa-plus-circle' ).removeClass('fa-plus-circle').addClass('fa-minus-circle');
}
window.scrollTo(0,0);
});
In short it creates a button with fontawesome library icon. Then adds a click listener for it so that people click on a button it either collapses or expands regions.
It recognizes if regions are collapse or not and it either opens all or closes all of them.
On APEX 4.2.x there is a region template called "Content Frame Body Container" that handles this for you.
Happy reading,
Lino
