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
Hi I am using Apex 5.0 and trying to create a list of FAQs. I want to show a list of questions that you can expand.
ReplyDeleteI have created a standard report with a collapsible region but I dont know how to put the answer in there.
Can you help out?
Hi Martin, there are several ways around this and probably you would not use my example above.
ReplyDeleteIt is not that you can't but you would have to render regions dynamically in order for this to kick in. Or if you have fix number of questions and answers you can create regions and show them hide them as needed and reuse my approach above.
What I would suggest you is to look at Slide Tooltip plugin that is part of some Sample applications like Sample Chart. This might work for you out of the box and is very cool looking region plugin that I tent to use more and more often.
This could also be a new region template or list template you create (https://apex.oracle.com/pls/apex/f?p=42:1300:::NO:::). There are more ways you can handle this but this should at least give you a basic idea. If none help please let me know and I can have a look for you. Thanks, SLino
Thanks. Helped me.
ReplyDeleteCan you please tell me how to hide and show region on the basis of item.For example at run time item may have some values say 1 or 2 or 3..n.On the basis of these values i need to hide the region.
ReplyDelete