Skip to Main Content

Collapse Interactive Report Control Break

The interactive grid has a feature that collapse and expands the control break. This feature is missing from interactive reports, but it's relatively easy to add the same feature with dynamic action and JavaScript.

First create interactive report and then add dynamic action

  • Event: After Refresh
  • Selection Type: Region
  • Region: {select your interactive report region}
  • Action: Execute JavaScript Code
  • Fire on Initialization: On
  • Code:

 

var lButton   = apex.util.htmlBuilder()
 /* Get messages for button title. Reusing IG messages */
 , lCollapse = apex.lang.getMessage( "APEX.GV.BREAK_COLLAPSE" )
 , lExpand   = apex.lang.getMessage( "APEX.GV.BREAK_EXPAND" )
 /* Button icon classes for collapse and expand */
 , lBtnIcons = ["fa-chevron-down", "fa-chevron-right"]
 /* Control break jQuery selector */
 , lCtrBreak   = "th.a-IRR-header--group"
;
/* Prepare button HTML */
lButton.markup( "<button" )
 .attr( "type", "button" )
 .attr( "aria-expanded", "true" )
 .attr( "title", lCollapse )
 .attr( "aria-label", lCollapse )
 .attr( "class", "t-Button t-Button--noLabel t-Button--icon t-Button--small t-Button--gapRight" )
 .markup( "><span" )
 .attr( "aria-hidden", "true" )
 .attr( "class", "t-Icon fa " + lBtnIcons[0] )
 .markup( "></span></button>" )
;
/* Set click event to button */
var button$ = $( lButton.toString() ).click( function(){
 var this$   = $( this )
   , lTitle  = this$.attr( "title" ) == lCollapse ? lExpand : lCollapse
 ;
 this$.attr({
   "title": lTitle,
   "aria-label": lTitle,
   "aria-expanded": lTitle == lCollapse ? "true" : "false"
 })
   .children().toggleClass( lBtnIcons ).end()
   .closest( "tr" ).nextUntil( ":has(" + lCtrBreak + ")" ).toggle()
 ;
});
/* Attach button to IR control break rows */
$( this.triggeringElement ).find( lCtrBreak ).prepend( button$ )
/* Uncomment below line to initiallyt collapse control breaks */
//  .closest( "tr" ).nextUntil( ":has(" + lCtrBreak + ")" ).toggle()
;

Run the page and add a control break from the interactive report action menu.

See working example

Comments

  • Jari Laine 10 Jul 2024

    Hi roman,

    Could you please reproduce issue on apex.oracle.com and share developer login details to workspace.

    Regards, Jari

  • roman 27 Jun 2024

    I have contol break with 3 columns and it's giving JS error in console :
    Uncaught SyntaxError: Unexpected token ',' (at ir-transaction-with-group-sum?session=104786888033033:705:3)Understand this error
    desktop_all.min.js?v=24.1.0:5 jQuery.Deferred exception: apex.da.initDaEventList is not a function TypeError: apex.da.initDaEventList is not a function
    at https://apex.oracle.com/pls/apex/r/rnr_wp/ar-transactions/ir-transaction-with-group-sum?session=104786888033033:781:21
    at https://apex.oracle.com/pls/apex/r/rnr_wp/ar-transactions/ir-transaction-with-group-sum?session=104786888033033:782:18
    at c (https://static.oracle.com/cdn/apex/24.1.0/libraries/apex/minified/desktop_all.min.js?v=24.1.0:5:28402)

  • Jari Laine 2 Dec 2023

    Hi sekhar,

    Reproduce issue on apex.oracle.com and share developer login details to workspace.

    Regards,
    Jari

  • sekhar 2 Dec 2023

    follow the above steps but i am getting below errors can u help me out
    Uncaught SyntaxError: Function statements require a function name
    Uncaught TypeError: apex.da.initDaEventList is not a function

  • Sebastian 9 Nov 2022

    Thanks so much for the extended code! Works perfectly.
    You're fire!

  • Jari Laine 7 Nov 2022

    Hi Sebastian,
    Thank you. You could change last line of code to:

    $( this.triggeringElement ).find( ".a-IRR-header--group" ).prepend( button$ )
    .closest( "tr" ).nextUntil( ":has(.a-IRR-header--group)" ).toggle();
  • Sebastian 7 Nov 2022

    Great work Jari. Thanks for sharing.
    Just wonder how I can load the groups minimized respectively collapsed?
    Do you have a hint for me?
    Thanks and best regards,
    Sebastian