Introduction

JavaScript is everywhere on the Internet today. Even if you don’t realize it, this handy little scripting tool has become one of the most used add-ons on the web, probably even in the web browser your viewing this article in. APEX also allows for the integration of JavaScript into applications, and this tutorial will cover some of the ways this can be done. If you haven’t done so already, we recommend you reference our article Oracle APEX Tutorial Preparation and OEHR Sample Data Installation prior to going through this video.

High Level Steps

1) Locations and Referencing (0:30)
2) Creating Example Application (2:23)
3) Adding A Simple Alert Window (4:32)
4) Adding A Dynamic Validation/ Form Element Alteration (6:45)

Times in parenthesis are approximate start times for that step

Notes and Information

Script Locations

The two main places in APEX you can put your scripts are in the page header, and in the page
template, with some differences. A raw script can be placed into the page header (or multiple
scripts) and can be easily referenced by anything on that page. If placed in the page template,
it is recommended that you reference a .js file that contains the script(s) and understand that
placing the reference in the template makes the scripts accessible to every page of the
application. Balancing access and security for these scripts is beyond the scope of this
article, and you may need to consult your security or IT department for the appropriate
guidelines.

Item Names and Labels

We need to ensure there is the understanding that an Item’s name and it’s label are two
different things, even if they are called the same thing. The Item Name is an absolute
identifier (like the MAC address on your network card), it never changes. The label on the
other hand is what is displayed to the end user, and can be altered and changed at your whim as
the developer.

Code and Pasted Text

Null Check Script

<script type="text/javascript"><!--mce:0--></script>

Last Name HTML Attribute

onblur="notNull(this);"

Disable Item Script

<script type="text/javascript"><!--mce:1--></script>

Department ID Form Element

onchange="disFormItems()"

Department ID List of Values

SELECT department_name, department_id FROM oehr_departments

HTML Body Attribute

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