Oracle APEX: TypeError: apex.region(...) is null when clicking a button

Question

I have an interactive gridwhere I need to bulk update a field in a bunch of selected records to the current date.

I tried to replicate the suggestion from this post https://ruepprich.wordpress.com/2017/03/23/bulk-updating-interactive-grid-records/ but my javascript is running an error in the first step - can't find the region (error TypeError: apex.region(...) is null)

:D

I've been away from APEX and coding for a while, so I'm struggling a little with this.

My region is named breachbulkupdate, my column is named CORRESPONDENCE_SENT, and I've created a button to run the below JavaScript code when clicked

var record;

var region = apex.region("breachbulkupdate");
console.log(region);

//Identify the particular interactive grid
var ig$     = apex.region("breachbulkupdate").widget();

//Fetch the model for the interactive grid
var grid    = ig$.interactiveGrid("getViews","grid");

//Fetch the model for the interactive grid
var model   = ig$.interactiveGrid("getViews","grid").model;

//Fetch selected records
var selectedRecords = apex.region("breachbulkupdate").widget().interactiveGrid("getViews","grid").view$.grid("getSelectedRecords");

//Set current date as correspondence sent date
var sentDate = new Date();

//Loop through selected records and update value of the salary column
for (i=0; i < selectedRecords.length; i++) {

   //Get the record
   record = model.getRecord(selectedRecords[i][0]);

   //Set Correspondence Sent Date
   model.setValue(record,"CORRESPONDENCE_SENT", sentDate);

}

You can see the name of the region is exactly the same, copied (ctrl+c, ctrl+v): enter image description here

Can you please give a help?

Thanks,

Guilherme

Answer 1

That is a very old blog.... I think quite a bit changed since then in the syntax. Here is an example to increase the salary for a the selected records in an IG on the EMP sample table (with static id "emp"):

var i, records, record, sal, model,
        view = apex.region("emp").call("getCurrentView");

let percent = 10

    if ( view.supports.edit ) { // make sure this is the editable view
        percent = percent / 100;
        model = view.model;
        records = view.getSelectedRecords();
        for ( i = 0; i < records.length; i++ ) {
            record = records[i];
            sal = parseFloat(model.getValue(record, "SAL"));
            if ( !isNaN(sal) ) {
                sal = sal + sal * percent;
                model.setValue(record, "SAL", "" + sal); // turn the number back into a string!
            }
        }
    }

This example was copied from page 9 in the ig cookbook v6 app (google ig cookbook and download/install the app from John Snyders website. v6 is the latest version).

-- update: The static id is key to implementing this. In the example above the static id of my interactive grid is "emp" and that is how it is referenced (apex.region("emp")). Note that "static id" is not the same as the region title...

This can easily be tested in the browser console with some javascript commands.

Observe that apex.regions lists the regions on the page. apex_region("x") returns null since that region does not exist and apex_region("emp") returns the region object. The 4th line references a non-existing region that throws the error you are seeing.