My Sample Table.
CREATE TABLE "TEST_YOUR_TABLE"
( "ID" NUMBER,
"PRODUCT_NAME" VARCHAR2(100),
"PRICE" NUMBER,
"DISCOUNT" NUMBER,
"TOTAL" NUMBER,
PRIMARY KEY ("ID") USING INDEX ENABLE
) ;
Step 1:
=====
Create an Interactive Report.
SQL Query:
SELECT
ID,
PRODUCT_NAME,
TO_CHAR(PRICE) AS PRICE,
APEX_ITEM.TEXT(
P_IDX => 1,
P_VALUE => '',
P_ATTRIBUTES => 'CLASS="DISCOUNT_CLASS" STYLE="TEXT-ALIGN: RIGHT; MAX-WIDTH: 100PX;" DATA-ID="' || ID || '" DATA-PRICE="' || PRICE || '"'
) AS DISCOUNT,
APEX_ITEM.TEXT(
P_IDX => 2,
P_VALUE => '',
P_ATTRIBUTES => 'CLASS="TOTAL_CLASS" STYLE="TEXT-ALIGN: RIGHT; MAX-WIDTH: 100PX;" DATA-ID="' || ID || '" DATA-PRICE="' || PRICE || '"'
) AS TOTAL
FROM
TEST_YOUR_TABLE;
Step 2:
=====
Create Dynamic Action on Page Load.
True Action:
Executive JavaScript Code:
document.addEventListener("input", function(e) {
// When discount changes, calculate total
if (e.target && e.target.classList.contains("DISCOUNT_CLASS")) {
const discountInput = e.target;
const price = parseFloat(discountInput.dataset.price) || 0;
const discount = parseFloat(discountInput.value) || 0;
const row = discountInput.closest("tr");
const totalInput = row.querySelector(".TOTAL_CLASS");
const total = price - (price * discount / 100);
totalInput.value = total.toFixed(2);
}
// When total changes, calculate discount
if (e.target && e.target.classList.contains("TOTAL_CLASS")) {
const totalInput = e.target;
const price = parseFloat(totalInput.dataset.price) || 0;
const total = parseFloat(totalInput.value) || 0;
// Ensure we don't divide by zero
let discount = 0;
if (price > 0) {
discount = ((price - total) / price) * 100;
}
const row = totalInput.closest("tr");
const discountInput = row.querySelector(".DISCOUNT_CLASS");
discountInput.value = discount.toFixed(2);
}
});