🚀 Dynamic Default Value for New Interactive Grid Rows in Oracle APEX

🚩Introduction 

• In modern Oracle APEX applications, it is important to make data entry quick and accurate for users. A useful feature is setting the default value of an Interactive Grid column dynamically based on a page item value.

• For example, in a master-detail form, the master value should automatically be added to the Interactive Grid column whenever a new detail row is created. By default, an Interactive Grid column takes its value from a page item only during page rendering. With a little JavaScript, we can make the column always pick up the latest page item value whenever a new row is added. This keeps new rows accurate, saves time, and makes the application easier to use.

📑 Why This Approach Is Needed

In Oracle APEX, the default value of an Interactive Grid column is usually fixed during page load. So when a user changes the page item later, the new value does not get applied to the column when a new row is created. This can cause wrong or outdated values to appear.

Setting the column default value dynamically becomes important when:

• Users change the page item value after the page has loaded

• New rows should always use the latest page item value

• Data needs to stay accurate and consistent

• Manual correction of column values should be avoided

• A smooth and reliable user experience is important

This approach helps users to add new rows with the correct value every time, reduces errors, and keeps the data entry process simple and accurate in Oracle APEX.

👉 Use Case: Dynamically Setting the Default Value for an IG Column

In Oracle APEX, users often work with an Interactive Grid where a column value depends on a page item. Since the dynamic default value is not directly possible, the column only takes the page item value available during page rendering. When the page item value is changed later, that new value is not assigned to the column for new rows.

In this blog, we will see how to handle this using a little JavaScript. By reading the current page item value when a new row is created, we can assign it as the column default value. This helps users get the correct value automatically, improves accuracy, and makes everyday data entry faster and easier.

Step 1: 

In the page designer, create a region and change the type to Interactive Grid and set the source type as SQL query and copy the SQL Query below.

SELECT EMPNO,
       ENAME,
       JOB,
       MGR,
       HIREDATE,
       SAL,
       COMM,
       DEPTNO 
  FROM EMP;

 Step 2: 

Create a page item and select the type as Text Field. We are going to use this page item to set the value for the Interactive Grid column.

Step 3: 

Now click on the Interactive Grid and navigate to the Advanced section and give the unique id RG_EMP under the HTML DOM ID.

Step 4: 

Click on the Interactive Grid and expand the column, select the JOB column, we are going to set the default value to this. Under the properties, navigate to the Default section. Select the Type as Expression and enter the page item name in the PLSQL Expression.

Step 5: 

Now Click on the page and go to the Function and Global Variable Declaration section and copy paste the below javascript function. 

--- Function and Global Variable Declaration ---

function setIGColumnValue() {
  var region = apex.region("RG_EMP"); // IG Static ID
  var view = region.widget().interactiveGrid("getViews", "grid");
  var model = view.model;
  var record = view.getSelectedRecords();
 
  if (record) {
    model.setValue(
      record[0],
      "JOB",     // Column Name
      $v("P14_DEFAULT_VALUE") // Page Item Name
    ); 
  }
}

Step 6: 

Create the Dynamic Action for the page item, to dynamically set the value when the page item value changes. Right click and create the Dyanamic Action of type Change event.

Step 7: 

Create the True Action of type Execute JavaScript Code and under the Code section, call the JavaScript function setIGColumnValue()

Step 8: 

The above dynamic action will set the new value, only to the currently selected row, but for the new rows, it stills takes the old values which was there during the page render. So newly updated value won't be assigned. To overcome this, we will be creating another dynamic action for the Interactive Grid of type Row Initialization (Interactive Grid).

Step 9: 

Create the True Action of type Execute JavaScript Code and under the code section, call the JavaScript function setIGColumnValue().

Step 10: 

Now save and run the page, you will see the Interactive Grid rendered in the page with the page item. Once the new value is entered, the IG column (JOB) value will be changed, when you click on the Add row button, the new row will be created with the current page item value. 

🔥 Conclusion

Thus, in Oracle APEX, using a little JavaScript, we can dynamically set the default value for an Interactive Grid column which helps new rows always pick up the latest page item value. This keeps the data accurate, reduces manual effort and errors, and improves overall usability while keeping the implementation simple.