Monday, 22 February 2016

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

2 comments:

  1. 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.
    I have created a standard report with a collapsible region but I dont know how to put the answer in there.

    Can you help out?

    ReplyDelete
  2. Hi Martin, there are several ways around this and probably you would not use my example above.

    It 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

    ReplyDelete