Introduction :
Interactive Grids in Oracle APEX are a powerful feature for managing and editing tabular data within applications. However, when it comes to dynamically summing column values as users input data, APEX does not provide native support. To achieve real-time calculations and validations, custom JavaScript is required. This blog demonstrates how to implement such logic, making it ideal for use cases like time sheet entries, budget tracking, or any scenario where live total validation is essential.
Why we need to do / Cause of the issue:
In Oracle APEX Interactive Grids, users frequently enter numeric data such as hours, costs, or quantities across multiple rows. However, the grid does not provide built-in functionality to automatically sum these values in real-time as data is entered. This lack of dynamic calculation can lead to totals exceeding predefined limits—such as maximum working hours or budget constraints—without the user realizing it. As a result, invalid data may be submitted, causing workflow disruptions, reporting errors, and poor user experience. The issue primarily stems from the absence of immediate feedback during entry, increasing the risk of manual mistakes. To address this, custom JavaScript can be implemented to calculate column totals on the fly and validate them against required limits before submission.
How do we solve:
Step 1: Create an Interactive Grid
- Go to your APEX application.
- Create a new page → Select Interactive Grid.
- Choose a suitable table
- Finish the wizard.
Step 2: Identify the Column for Totals
- Let’s assume your column name is AMOUNT.
- Ensure that column is set to be editable.
Step 3: Add a Static ID to the Interactive Grid
- Select the Interactive Grid regionin the Page Designer.
- Under Advanced → Static ID, give it a meaningful ID, e.g.my_ig
Step 4: Add a Placeholder for Total Display
- In the Page Designer, go to the Region → Right Click → Create → Region.
- Region Name: Total Display
- Region Type: Static Content
- Position: Below or after your IG
- Add the following HTML in the Static Content:
<div id=”totalDisplay” style=”font-weight:bold; margin-top:10px;”>
Total Amount: <span id=”totalValue”>0</span>
</div>
Step 5: Add JavaScript to Calculate Total
- Go to Page → Execute When Page Loads
- Paste the following JavaScript:
(function($) {
function update(model) {
var salKey = model.getFieldKey(“EFFORT_PERSON_HOURS”), // column name change
total = 0;
console.log(“>> starting sum SAL column”)
model.forEach(function(record, index, id) {
var sal = parseFloat(record[salKey]),
meta = model.getRecordMetadata(id);
if (!isNaN(sal) && !meta.deleted && !meta.agg) {
total += sal;
}
});
console.log(“>> setting sum SAL column to ” + total)
$s(“P2_PLANNED_HOURS”, total); // page item name change
}
$(function() {
$(“#my_ig”).on(“interactivegridviewmodelcreate”, function(event, ui) { // change the static id of ig
var sid,
model = ui.model;
if ( ui.viewId === “grid” ) {
sid = model.subscribe( {
onChange: function(type, change) {
console.log(“>> model changed “, type, change);
if ( type === “set” ) {
if (change.field === “EFFORT_PERSON_HOURS” ) { //change the column name
update( model );
}
} else if (type !== “move” && type !== “metaChange”) {
update( model );
}
},
progressView: $(“#P2_PLANNED_HOURS”) //change the page item name
} );
update( model );
model.fetchAll(function() {});
}
});
});
})(apex.jQuery);
Conclusion:
By leveraging custom JavaScript within Oracle APEX, we successfully addressed the limitation of missing dynamic summation in Interactive Grids. Our solution provides real-time feedback by automatically calculating column totals as users enter or modify data—without requiring a page refresh or manual action. This ensures data accuracy, prevents over-entry (e.g., exceeding planned hours or budget), and enhances user experience. The approach is lightweight, flexible, and easy to adapt to various business scenarios like time tracking, financial entries, or resource allocation. Overall, this dynamic solution bridges the functional gap in APEX Interactive Grids, delivering a smarter and more interactive application workflow.
