How to Add a Download Button to Oracle APEX Interactive Grid

Interactive Grids (IG) in Oracle APEX are powerful tools for displaying and editing data. However, users often need to extract this data for analysis in Excel or PDF formats.

While APEX has a built-in menu for this, it is often hidden or requires too many clicks, or for other reasons, we need to create a custom download button.

In this guide, we will explore two robust ways to add a custom download button to an interactive grid in Oracle APEX: building a specific page button and hacking the toolbar with JavaScript.

Prerequisites: Enabling the Feature

For the custom buttons below to work, the underlying Download functionality must be active on the Interactive Grid region.

1. Open your page in Page Designer.
2. Select your Interactive Grid Region.
3. Go to the Attributes tab in the Property Editor.
4. Scroll to the Download section and set Download to On.

Note: You can check/uncheck specific formats here, but the main switch must be On for the JavaScript API to function.

Method 1: Creating a Custom Download Button for Interactive Grid

This method allows you to place a prominent "Download" button anywhere on the page (e.g., next to the region title or in a separate button container), triggering the standard download dialog.

Phase 1: Preparation

1. Select your Interactive Grid Region in Page Designer.
2. In the Property Editor (right side), go to Advanced > Static ID.
3. Enter a unique ID, for example: my_ig_data.

Note: You will use this ID in the JavaScript code later.

Phase 2: Create the Custom Button

1. Create a Button component to your desired location (e.g., "Right of Interactive Grid").
2. Name it BTN_DOWNLOAD.
3. Set the Label to "Download Data".
4. (Optional) Set the Icon to fa-download-alt.
5. Set Behavior > Action to Defined by Dynamic Action.

Phase 3: Create the Dynamic Action

This wires the button to the Interactive Grid's internal functionality.

1. Right-click your new button (BTN_DOWNLOAD) and select Create Dynamic Action.
2. Name it: DA_Open_Download_Dialog.
3. Set Event to Click and Selection Type to Button.
4. Under the True action, select Execute JavaScript Code.
5. Paste the following code:

var igRegion = apex.region("my_ig_data");

if (igRegion) {   igRegion.widget().interactiveGrid("getActions").invoke("show-download-dialog");
}

Important: Ensure Fire on Initialization is turned OFF. Save and run your page; clicking the button should now trigger the standard APEX download popup.

Method 2: Adding a Download Button to the IG Toolbar (Advanced)

If you prefer the button to be inside the Interactive Grid's own toolbar (next to the Search bar) rather than a separate page button, you can do this via initialization code.

Implementation Steps

1. Select the Interactive Grid region.
2. Go to the Attributes tab.
3. Scroll down to Advanced > JavaScript Initialization Code.
4. Paste the following code:

function(config) {
    var $ = apex.jQuery;
    var toolbarData = $.apex.interactiveGrid.copyDefaultToolbar();
    
    // Find the group usually containing actions (often named 'actions3' or similar)
    var toolbarGroup = toolbarData.toolbarFind("actions3"); 

    // Add a new button to the toolbar
    toolbarGroup.controls.push({
        type: "BUTTON",
        action: "show-download-dialog", // This links directly to the internal action
        icon: "fa fa-download-alt", // Icon
        iconBeforeLabel: true,
        label: "Download" // Button Text
    });

    config.toolbarData = toolbarData;
    return config;
}

This code intercepts the toolbar configuration before the grid renders and injects a new button that triggers the download action. This will also open the download dialog, as shown in the example above.

Conclusion: Choose Your User Experience

These methods give you flexibility in how you present data export options to your users. Whether you want a big, obvious button on the page or a seamless integration into the toolbar, the JavaScript API makes it possible.

Tip: If you want to force users to use your button, you can use CSS or Toolbar configuration to hide the standard "Actions" menu, creating a cleaner interface while keeping the functionality accessible via your custom controls.

Frequently Asked Questions (FAQ)

• Why is my custom button not doing anything? Ensure your Static ID is correct and that the "Download" switch is enabled in the IG Attributes.
• Can I hide the Actions menu but keep my button? Yes, you can disable the Actions menu in attributes, but you must ensure the underlying download functionality remains active for your custom button to work.