Oracle APEX 5.1 – Changing the Interactive Grid’s saved reports dynamically

As prerequisites, I’ve created a page with an Interactive Grid region on it, I’ve given it a Static ID (‘interactive_grid’) and I’ve saved two alternative reports (‘A’ and ‘B’, each with a different setting).

In order to change the saved reports dynamically, I use JavaScript. For our case, I’ve just written code in the ‘Execute when Page Loads’ area from the page’s properties and it is as follows:

$( document ).ready(function() {
    var v_array = apex.region("interactive_grid").widget().interactiveGrid("getReports"), // get the full list of saved reports as an array
        v_value = "",
        BreakException = {};
        
    try {
        v_array.forEach(function(element) {
            if (element.name == "B") { // find the desired report's name
                v_value = element.id; // get the report's ID
                throw BreakException; // stop the loop with an exception
            }
        });
    } catch (e) {
        if (e !== BreakException) throw e;
    }

    /* set the displayed report */
    apex.region("interactive_grid").widget().interactiveGrid("getActions").set("change-report", v_value);
});

Previously, I believe that you’ve seen that I set ‘B’ as the current report. As long as I check for the name of an existing report, I will always get its ID. Therefore, I will be able to use this ID to set which saved report is displayed. You might be asking yourself now the following question: ‘If I want the primary report to be displayed, what element name should I use in the IF clause?’. The answer is quite simple. The element name for the primary report is an empty string:

$( document ).ready(function() {
    // ...
    try {
        v_array.forEach(function(element) {
            if (element.name == "") { // find the desired report's name
                v_value = element.id; // get the report's ID
                throw BreakException; // stop the loop with an exception
            }
        });
    }
    // ...
});

In order to see what functions could be called on one action, I’ve used the following line:

console.log("action", apex.region("interactive_grid").widget().interactiveGrid("getActions").lookup("change-report"));

By using this, you’ll be able to explore all the action’s options, such as name, label, list of saved reports (‘choices’), as well as the functions which could be called; in our case, ‘get’ or ‘set’.

Good luck coding!