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.

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

APEX community latest news

You want to test your APEX knowledge? 

New initiative

Yesterday during ODTUG APEX webinar lead by Martin Giffy D'Souza and Steven Feuerstein it was announced that there is now a new way how developers in APEX community can test their skills. 

On Oralce PLSQL/APEX challenge you can find quiz questions on Oracle APEX subject which is great way to test your knowledge. 

Idea is that on daily/weekly basis guys at INSUM Solutions will give their best to review and create more quizzes for us developers. 

Same as with PLSQL quizzes all scores will be stored and ranked to support competition between participants. 

The more you play and more answers you get more points you get. Not only that but if you participate in Quiz reviews or creation of quizzes you also get points for doing so.

If you decide that you just want to participate but do not want your scores to be publicly available and ranked you can opt for anonymous test runs. On top of all this you can review other quizzes and create new ones that others can take on.

Hopefully this time Quiz project will really take off and that we as community will stand behind it getting involved on daily basis.

Thanks guys and happy to share anytime,

Lino