Requirement: Let us assume we have an APEX page with the name “SamplePage“. The page number of the “SamplePage” is 2.

On the “SamplePage” I have three items, Salary, Bonus, and Total Salary.

The Total Salary item will be a read-only field, and the value for the Total Salary will be the sum of the values in the Salary and Bonus fields.

if we are giving valid numeric values for the Salary and Bonus fields, then it is OK, else it will assign the 0 value to the variable, and perform the calculation.

Solution: For solution of the above requirement follow the steps as shown below:

Step 1: Create an APEX page with the name “SamplePage“. The page number of the “SamplePage” is 2.

Step 2: Create a Region inside the Sample Page with the Title as Calculate Total Salary

Create three items inside the above created Region with the details as described below.

Step 3: Create items with the Name as P2_SALARY and Type as Number Field, and the Label as Salary

Create a Dynamic Action for the P2_SALARY field with the Name as salaryDA and the Event as LoseFocus

Set the properties of the True outcome as below

• Action: Execute JavaScript Code
• Code: calculateTotalSal();

Step 4: Create items with the Name as P2_BONUS and Type as Number Field, and the Label as Bonus

Create a Dynamic Action for the P2_BONUS field with the Name as bonusDA and the Event as LoseFocus

Set the properties of the True outcome as below

• Action: Execute JavaScript Code
• Code: calculateTotalSal();

Step 5: Create items with the Name as P2_TOTAL_SALARY and Type as Number Field, and the Label as Total Salary

Step 6: Click on Page 2: SamplePage and set the below properties

Function and Global Variable Declaration

function calculateTotalSal() {
    var n_salary, n_bonus, n_total;
    n_salary = parseFloat($v("P2_SALARY"), 10) ? parseFloat($v("P2_SALARY"), 10) : 0;
    n_bonus = parseFloat($v("P2_BONUS"), 10) ? parseFloat($v("P2_BONUS"), 10) : 0; 
    n_total = n_salary + n_bonus;  
    $s("P2_TOTAL_SALARY", parseFloat(n_total, 10));
}

Execute when Page Loads

document.getElementById('P2_TOTAL_SALARY').readOnly = true;

Step 7: Save and run the application. Thus, the ran application will look as below.

Enter the values in the Salary and Bonus fields and it will accordingly calculate the Total Salary field value.

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 583 total views,  2 views today