Incorporating JavaScript into your Application

Purpose

This tutorial shows you how to create a PDF report that contains a table and graph utilizing two report queries.

Time to Complete

Approximately 30 minutes

Topics

This tutorial covers the following topics:

OverviewPrerequisitesChanging the Value of Form Elements Creating Client-Side JavaScript ValidationEnabling and Disabling Form ElementsShowing and Hiding Form ElementsSummary

Viewing Screenshots

Place the cursor over this icon to load and view all the screenshots for this tutorial. (Caution: This action loads all screenshots simultaneously, so response time may be slow depending on your Internet connection.)

Note: Alternatively, you can place the cursor over an individual icon in the following steps to load and view only the screenshot associated with that step. You can hide an individual screenshot by clicking it.

Overview

JavaScript is a scripting language most often used for client-side web development. JavaScript allows you to perform various processing in your application before submitting the page which enhances response time and the user experience of your application.

This tutorial shows you some useful javaScript techniques and how they can be incorporated into your application.

Back to Topic List

Prerequisites

Before you perform this tutorial, you should:

1. Install Oracle Database 11g. 2. Install and configure Oracle Application Express. See documentation on OTN.3. Download and unzip the apexweb20.zip into your working directory. 4. Import the Project Tasks Application in Application Builder using the projtasks_app.sql file located in the

directory where you unzipped the file in the previous step.

Back to Topic List

Changing the Value of Form Elements

In this section, you will add javaScript that will change the value of a form item based upon user input. Perform the following steps:

1. Enter the following URL to log in to Oracle Application Express (change the <hostname> to localhost, your specific hostname or apex.oracle.com).

http://<hostname>:8080/apex

2. To log in to Oracle Application Express, enter the following details, and click Login.

Workspace: <your workspace name> Username: <your username> Password: <your password>

3. On the Workspace home page, click Application Builder.

4. Select Project Tasks Application.

5. Click Maintain Employees (page 10).

6. Under Page, select the link for HTML Header.

7. Enter the following code (located in the js_01.txt file where you downloaded and unzipped the prerequisite files)

at the end of the HTML Header and click Apply Changes.

<script type="text/javascript"> function getVal(pNd){ return ($v(pNd)!= "")?parseFloat($v(pNd)):0; } function calcItems(){ $s('P10_COMM_TOTAL',getVal('P10_SALARY')*getVal('P10_COMMISSION_PCT')); }</script>

8. You can invoke the JavaScript function you just defined for the P10_COMMISSION_PCT item. Under Items, select the P10_COMMISSION_PCT link.

9. Enter the following commands in the HTML Form Element Attribute field and click Apply Changes.

onchange="calcItems();"

10. You need to create a new item called P10_COMM_TOTAL. Under Items, select the Create icon.

11. Select Text and click Next.

12. Select Text Field and click Next.

13. Enter P10_COMM_TOTAL for Item Name, select Employee Details for Region and click Next.

14. Accept the defaults and click Next.

15. Click Create Item.

16. You can now run the page. Click Run.

17. Enter your username and password and click Login.

18. Your form currently does not have any data. Select the Employee Details breadcrumb.

19. Select the link for employee_id 101.

20. Notice that there is no value for Commission Pct.

21. Enter .7 for Commission Pct and click in the Comm Total field. Notice that the value for Comm Total was calculated

when the CalcItems function was called when a Commission Pct was entered on the form.

Back to Topic List

Creating Client-Side JavaScript Validation

In this section, you display an error when a phone number is not entered. This action is performed before the page is submitted for processing. Perform the following steps:

1. Navigate to the Maintain Employees Page Definition. Under Page, select the link for HTML Header.

2. Enter the following code (located in the js_02.txt file where you downloaded and unzipped the prerequisite files) at the end of the

HTML Header and click Apply Changes.

<script type="text/javascript"> function notNull(object){ if($v_IsEmpty(object)){ $x_Style(object,'border','1px solid red'); object.focus(); if(!$x('phone_error')){ object.parentNode.innerHTML += '<div id="phone_error" style="color:red;">This field must contain a value</div>'; } }else{ $x_Style(object,'border',''); $x_Remove('phone_error'); } }</script>

3. Under Items, select the P10_PHONE_NUMBER item.

4. Enter the following commands in the HTML Form Element Attribute field and click Apply Changes.

onblur="notNull(this);"

5. You can now run the page. Click Run.

6. Erase the contents of the Phone Number field and press the tab key. Notice the Phone Number item is highlighted in red and a

message is displayed.

Back to Topic List

Enabling and Disabling Form Elements

In this section, you enable Commission Pct and Comm Total only for the Sales Department (DEPARTMENT_ID=80). Perform the following steps:

1. Navigate to the Maintain Employees Page Definition. Under Page, select the link for HTML Header.

2. Enter the following code (located in the js_03.txt file where you downloaded and unzipped the prerequisite files)

at the end of the HTML Header and click the Display Attributes tab.

<script type="text/javascript"> function disFormItems(){ var lReturn = $v('P10_DEPARTMENT_ID') var lTest = (lReturn != '80')?true:false; $x_disableItem('P10_COMMISSION_PCT',lTest) $x_disableItem('P10_COMM_TOTAL',lTest); } </script>

3. Select Do Not Focus Cursor for Cursor Focus and click the HTML Body Attribute tab.

4. Enter the following commands in the HTML Body Attribute field and click Apply Changes. When the page is loaded, you want to invoke the function so that the field is enabled or disabled when presented to the user for the first time.

onload="disFormItems(); first_field();"

5. Under Items, select the P10_DEPARTMENT_ID item.

6. Enter the following commands in the HTML Form Element Attribute field and click Apply Changes.

onchange="disFormItems()"

7. You can now run the page. Click Run.

8. Notice that the Department is not set to 80, therefore the Commision Pct and Comm Total fields are disabled.

9. Change the Department to 80. The Commision Pct and Comm Total fields are now enabled.

Back to Topic List

Showing and Hiding Form Elements

In this section, you only want to show Commission Pct and Comm Total when DEPARTMENT_ID=80. Otherwise, those items should be

hidden. Perform the following steps:

1. Navigate to the Maintain Employees Page Definition. Under Page, select the link for HTML Header.

2. Enter the following code (located in the js_04.txt file where you downloaded and unzipped the prerequisite files) at

the end of the HTML Header and click the HTML Body Attribute tab.

<script type="text/javascript">function sales_test(){$f_Show_On_Value_Item_Row('P10_DEPARTMENT_ID',['P10_COMMISSION_PCT'], '80');$f_Show_On_Value_Item_Row('P10_DEPARTMENT_ID',['P10_COMM_TOTAL'], '80');}</script>

3. Change disFormItems to sales_test and click Apply Changes.

4. Under Items, select the P10_DEPARTMENT_ID item.

5. Change the HTML Form Element Attribute field to the following and click Apply Changes.

onchange="sales_test()"

6. You can now run the page. Click Run.

7. Notice that the Department is not set to 80, therefore the Commision Pct and Comm Total fields are hidden.

8. Change the Department to 80. The Commision Pct and Comm Total fields are now shown.

Back to Topic List

Summary

In this tutorial, you learned how to:

Change the value of form elementsCreate client-side javascript validation

Enable and disable form elementsHide and show form elements

Back to Topic List

Place the cursor over this icon to hide all screenshots.