Interactive Report Column to column Calculation

 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);

    }

});


Post a Comment

Previous Post Next Post