Interactive Grid Save Validation Based on Column Comparison Using Java script

Introduction:-

In Oracle APEX, data integrity is crucial when working with Interactive Grids (IG).To enforce business rules at the row level, validations can be implemented during user input. This specific validation ensures that two related column values within a row are equal before allowing the record to be saved. If the values do not match, the system prevents saving and displays an appropriate error message. This approach helps catch user errors early and maintains consistency in transaction data. Such validations enhance both usability and reliability in form-driven applications.

The following technologies has been used to achieve the same.

Oracle APEX
Java Script

Why We Need to Do This?

Validating that two column values are equal before saving in an Interactive Grid is essential for maintaining data accuracy and business rule enforcement. In many financial or transaction scenarios, fields like credit and debit must balance to ensure consistency. Without this check, users might unintentionally submit incorrect or incomplete data, leading to downstream errors in reports or calculations. Implementing this validation early in the data entry process reduces the risk of data corruption, avoids manual corrections later, and improves overall system reliability. It also provides immediate feedback to the user, making the application more intuitive and trustworthy.

How Do We Solve This

Step 1: Create an Editable Interactive Grid with the Static ID Rep_Bank_Transaction using the following query:

SELECT  
    Accno,             -- Primary Key Column  
    Borrower_Name,  
    Branch,  
    IFSC_Code,  
    Credit_Amt,  
    Debit_Amt  
    FROM Bank_Transaction  
    WHERE 1 = 2;

Step 2: Create a Dynamic Action on the event Save [Interactive Grid] with a JavaScript Code action.

Step 3: Paste the following code into the JavaScript Code action:

var widget = apex.region('Rep_Bank_Transaction').widget();  // Static ID of the region
var model = widget.interactiveGrid('getViews', 'grid').model;
var errMsg = '';
var totalDebit = 0;
var totalCredit = 0;

model.forEach(function (r) {
    var debit = parseFloat(model.getValue(r, "DEBIT_AMT")) || 0;    // Column name
    var credit = parseFloat(model.getValue(r, "CREDIT_AMT")) || 0;  // Column name
    totalDebit += debit;
    totalCredit += credit;
});

if (totalDebit !== totalCredit) {
    errMsg = "Total Debit and Credit Amount must be equal.";
}
if (errMsg) {
    apex.message.clearErrors();
    apex.message.showErrors([
        {
            type: 'error',
            message: errMsg,
            location: 'page'
        }
    ]);
} else {
    alert(‘Save’); // for checking purpose I add alert message
    apex.page.submit();
}

Step4: Save and Run the application

Conclusion:-

This setup ensures that debit and credit totals match before saving, maintaining data accuracy. The client-side validation provides instant feedback, improving user experience and preventing inconsistent entries in the Interactive Grid.

Output:-

Row With Incorrect Value:-

Row With Appropriate Value:-

Recent Posts