jqueryoracle-apex

Maximizing a region using jQuery


I have an interactive grid region in oracle apex that I want to be able to maximize via a toggle button located on the far right side of the toolbar. The customization of the toggle button itself has been relatively straightforward but I am struggling with how to implement the maximize function. I included the code I have so far that is located in the interactive grid's "Initialization JavaScript Function" section.

function(config) {
    let $           = apex.jQuery,
    toolbarData     = $.apex.interactiveGrid.copyDefaultToolbar(),
    toolbarGroup    = toolbarData.toolbarFind("actions4");

    toolbarGroup.controls.push(
        {
            type: "TOGGLE",
            action: "maximize-region",
            icon: "fa fa-expand"
        }
    );

    config.initActions = function(actions){
        actions.add({
            name: "maximize-region",
            maximize: false,  
            set: function(maximize) {
                this.maximize = maximize;
                //jQuery to maximize the region would go here
            }, get: function() {
                return this.maximize;
            }
        });
    }

    config.toolbarData = toolbarData;
    return config;

}

Any help would be greatly appreciated!


Solution

  • What happens if you use next code in Page - Function and Global Variable Declaration:

    (function($){
        $(apex.gPageContext$).on("apexreadyend", function(jQueryEvent) {
            $('#IG_STATIC_ID_ig_toolbar').find('.a-Toolbar-group').last().addClass('a-IRR-buttons');
            apex.theme42.page.init();
        });     
    })(apex.jQuery);
    

    IG_STATIC_ID to be replaced

    your code in "Initialization JavaScript Function" to be disabled

    'show maximize button' to be checked on the template options:

    enter image description here

    Template needs to be 'Interactive Report'

    Idea is when it finds the last toolbar group, it adds the 'a-IRR-buttons' class as to mark that toolbar group as a placeholder: enter image description here

    Then the UT init should add the maximize button and attach all needed logic

    enter image description here

    Maximized:

    enter image description here

    The relevant UT code is in theme42.js, maximize function.

    enter image description here

    injectButtonSelector:

    enter image description here

    adding of the maximize button:

    enter image description here

    Demo: https://apex.oracle.com/pls/apex/r/yola/demo/igmaximizebutton