Tue. Mar 9th, 2021

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

 250 total views,  1 views today

By Susanto Paul

Susanto is an Oracle ACE, a qualified MCA, MBA, and a highly-skilled Senior Oracle Specialist. He is an enthusiastic Blogger and YouTuber who helps learners to solve their complex problems more efficiently. He has 9+ years of experience in multiple technologies like AWS, Oracle ADF, Oracle APEX, Oracle JET, Oracle VBCS, Oracle IDCS, Oracle PL/SQL, Oracle Integration Cloud, Java, JDBC, Servlets, JSP, Spring, Hibernate, HTML5, CSS3, JavaScript, TypeScript, NodesJS, Angular, MySQL, Oracle WebLogic Server, JUnit, JMeter, Selenium Web Driver, etc. He is a certified: Oracle Certified Professional Java SE 6 Programmer, Oracle ADF 11g Certified Implementation Specialist, Oracle Cloud Platform Application Integration 2020 Certified Specialist, Oracle Cloud Infrastructure Foundations 2020 Certified Associate, and Oracle Cloud Infrastructure Developer 2020 Certified Associate

Leave a Reply

Your email address will not be published. Required fields are marked *