Interactive Grid Customization in Oracle APEX

Tweaking the Toolbar for Better Control and Usability

Introduction:

Oracle APEX Interactive Grid provides a rich, feature-packed interface for working with tabular data. While the default toolbar offers many capabilities, not all of them are required in every application. In real-world projects, simplifying the toolbar and adding targeted custom actions improves usability and keeps the interface aligned with business requirements.

This blog explains two Interactive Grid toolbar customizations implemented in Oracle APEX 24.2. The first customization removes the Finder Drop Down from the toolbar. The second customization adds a custom button to the Interactive Grid search bar and links it to a JavaScript action.

All changes were implemented using standard Oracle APEX features without plugins.

Topic 1: Tweak the Toolbar – Remove “Finder Drop Down”

The Finder Drop Down in the Interactive Grid toolbar allows users to search, filter, and apply conditions on the grid data. In controlled applications where filtering is predefined or handled elsewhere, this option can confuse users or expose unnecessary functionality. Removing the Finder Drop Down helps deliver a cleaner and more focused user interface.

Declarative Settings Used

The Interactive Grid was created using standard declarative settings. The toolbar and search options settings will available under GRID attributes which were kept enabled/ disabled with that we can did the option which want to visible or not based on our requirement. 

Result

After applying this customization, the Finder Drop Down is no longer visible in the Interactive Grid toolbar. The remaining toolbar elements continue to function normally, and the grid behavior remains unchanged. This results in a simplified and user-friendly interface.

Topic 2: Tweak the Toolbar – Add a Button on the Search Bar

In many applications, developers need to provide users with a quick action directly on the Interactive Grid toolbar. Adding a custom button to the search bar allows important actions to be executed without navigating away from the grid.

In this implementation, a custom button was added to the Interactive Grid toolbar and linked to a JavaScript action that runs when the button is clicked.

Toolbar Customization Approach

The Interactive Grid toolbar is divided into logical groups such as search and actions. A custom button can be added by copying the default toolbar, identifying the appropriate toolbar group, and inserting a new button definition. The button references a custom action by name, and the action logic is implemented separately.

JavaScript for Toolbar Button Action

The following JavaScript was added under Execute when Page Loads. This code registers a custom Interactive Grid action and defines the behavior when the toolbar button is clicked.

var ig$ = apex.region("emp_ig").widget();
ig$.interactiveGrid("getActions").add({
    name: "my-custom-action",
    label: "My Button",
    action: function () {
        apex.message.alert("My Button clicked!");
    }
});

Explanation of the Code

The Interactive Grid widget is accessed using the region Static ID. The getActions function retrieves the Interactive Grid action framework, which manages toolbar and menu actions. A new action named my-custom-action is added. This action name matches the action defined in the toolbar button configuration. When the button is clicked, the action function executes and displays a confirmation alert.

Result

After implementing this customization, the custom button appears on the Interactive Grid search bar. Clicking the button successfully triggers the JavaScript action. The action is initialized when the page loads and works consistently across refreshes in Oracle APEX.