Unified grid buttons

I

I want to have the same look for all my grids. I used to modify grids via JavaScript Initialization Code section (Attributes - Advanced). But doing the same changes on all grids was not maintainable. So I switched to a common function to modify the config object (on single place). But I was still stuck with the need to copy the same code to init sections on all grids. Fortunately you can create a common function to modify all grids at one place without the need to modify the init sections.

This is how the original grid buttons looks like (Edit, Save, Add row, Reset):

This is what I want to achieve (modify all grids without even touching the init section):

• Hide Edit button (but keep the grid editable)
• Make Save button hot (green) when grid is modified
  (I will cover this in next article)
• Make Add row as "+" button
• Hide Reset button at the end
• Add pagination setup to alter default page size
• Add new button to store refresh grid data
• Add new button to store current settings as default

Functions

The great way to start is to read the documentation.

Lets create functions needed to achieve this. First a function to apply settings to all grids (note the exception based on ORIGINAL class):

var fix_toolbars = function () {
    $('.a-IG').each(function() {
        var $parent = $(this).parent();
        var id      = $parent.attr('id');
        //
        if (!$parent.hasClass('ORIGINAL')) {
            fix_toolbar(id);
        }
    })
};

And the main function to modify grid buttons. I left there some comments and seemingly unused variables. The full code is on my Git. In following paragraphs I will adjust/explain "..." with specific changes.

var fix_toolbar = function (region_id) {
    console.group('FIX_TOOLBAR', region_id);
    //
    var $region     = $('#' + region_id);
    var widget      = apex.region(region_id).widget();
    var actions     = widget.interactiveGrid('getActions');
    var toolbar     = widget.interactiveGrid('getToolbar');
    var config      = $.apex.interactiveGrid.copyDefaultToolbar();
    var action1     = config.toolbarFind('actions1');
    var action2     = config.toolbarFind('actions2');
    var action3     = config.toolbarFind('actions3');
    var action4     = config.toolbarFind('actions4');
    //
    console.log('TOOLBAR', config, toolbar, actions, widget);

    // manipulate buttons
    // https://docs.oracle.com/en/database/oracle/application-express/20.1/aexjs/interactiveGrid.html#actions-section
    //
    // grid actions
    // widget.interactiveGrid('getActions').list()
    //console.log('ACTIONS', widget.interactiveGrid('getActions').list());
    //
    // row actions
    // widget.interactiveGrid('getViews').grid.rowActionMenu$.menu('option')
    //

    ...

    // update toolbar
    toolbar.toolbar('option', 'data', config);
    toolbar.toolbar('refresh');
    console.groupEnd();
};

Modifications

To change default "Add row" button to "+" icon:

    // modify add row button as a plus sign without text
    for (var i = 0; i < action3.controls.length; i++) {
        var button = action3.controls[i];
        if (button.action == 'selection-add-row') {
            button.icon         = 'fa fa-plus';
            button.iconOnly     = true;
            button.label        = 'Add new row';
            break;
        }
    }

Show a list of page sizes to set (and see) desired value (most likely not default Auto):

    //actions.show('change-rows-per-page');
    // change-rows-per-page get lost (are not visible even if grid is set to paginate)
    action4.controls.unshift({
        type    : 'SELECT',
        action  : 'change-rows-per-page'
    });

Show refresh button to refresh grid data:

    // show refresh button before save button
    action4.controls.push({
        type            : 'BUTTON',
        action          : 'refresh',
        label           : 'Refresh Data',
        icon            : '',
        iconBeforeLabel : true
    });

Show button to easily set current grid setup as a default to all users:

    // only for developers
    if ($('#apexDevToolbar.a-DevToolbar')) {
        // add a filter button after the actions menu
        action4.controls.push({
            type        : 'BUTTON',
            action      : 'save-report',
            label       : 'Save as Default',
            icon        : ''  // no icon
        });
    }

To hide Edit and Reset buttons I use CSS:

div.a-Toolbar-group [data-action="edit"],
div.a-Toolbar-group [data-action="reset-report"] {
    display:                none !important;
}

In next article(s) I will cover how to make Save button reactive and how to add buttons to save (process) all rows or all selected rows from grid (even if they were not changed).