Interactive Grid Custom Toolbar Buttons: Adding Your Own Actions

Beyond the Standard Toolbar

The Interactive Grid toolbar includes built-in buttons for Save, Add Row, Search, and the Actions menu. But many applications need custom operations: Approve Selected, Export to PDF, Recalculate Totals, or Send Notification. You can add custom buttons to the IG toolbar using the JavaScript Initialization Code without modifying core APEX files.

Adding a Simple Button

Use the IG’s JavaScript Initialization Code property to modify the toolbar configuration:

function(config) {
    var toolbarData = $.apex.interactiveGrid.copyDefaultToolbar();

    // Add a custom button to the right of the toolbar
    var toolbarGroup = toolbarData.toolbarFind("actions3");
    toolbarGroup.controls.push({
        type: "BUTTON",
        action: "approve-selected",
        label: "Approve Selected",
        icon: "fa fa-check",
        iconBeforeLabel: true,
        hot: true
    });

    config.toolbarData = toolbarData;

    // Define the action
    config.initActions = function(actions) {
        actions.add({
            name: "approve-selected",
            action: function() {
                var grid = apex.region("myGrid").widget()
                    .interactiveGrid("getViews","grid");
                var selected = grid.getSelectedRecords();

                if (selected.length === 0) {
                    apex.message.alert("Please select at least one row.");
                    return;
                }

                var ids = selected.map(function(rec) {
                    return grid.model.getValue(rec, "ORDER_ID");
                });

                apex.server.process("APPROVE_ORDERS", {
                    x01: ids.join(":")
                }, {
                    success: function() {
                        apex.message.showPageSuccess("Orders approved.");
                        apex.region("myGrid").refresh();
                    }
                });
            }
        });
    };

    return config;
}

The Server-Side Process

-- AJAX Callback: APPROVE_ORDERS
DECLARE
    l_ids APEX_T_VARCHAR2;
BEGIN
    l_ids := APEX_STRING.SPLIT(APEX_APPLICATION.G_X01, ':');
    FORALL i IN 1 .. l_ids.COUNT
        UPDATE orders SET status = 'APPROVED',
               approved_by = :APP_USER, approved_date = SYSDATE
         WHERE order_id = TO_NUMBER(l_ids(i));
    COMMIT;
    HTP.P('{"status":"ok","count":' || l_ids.COUNT || '}');
END;

Removing Standard Buttons

You can also remove or hide standard toolbar buttons that are not appropriate for your use case. Use toolbarData.toolbarRemove("save") to remove the Save button if you handle saving through your own mechanism, or remove the chart view button if charting is not relevant.

Conditional Button Visibility

To show or hide custom buttons based on user roles or data state, set the disabled or hide property on the button definition. You can also dynamically enable or disable buttons in response to selection changes by updating the action’s disabled state in a selection change callback.