Adding custom JavaScript to ADF .jspx page

JavaScript code can be easily implemented into an ADF page. Once implemented, you can control how it is triggered by using a Client Listener.

1. Insert a 'Resource' component into your page structure, then select the type as 'javascript':

2. Add an OutputText component under the Resource component:

3. Paste your JavaScript function directly into the OutputText component. This can be done via Property Inspector, or the Source code

4. Add a ClientListener component into your page structure:

5. The method refers to the JavaScript function you declared under the Resource component, and the Type refers to the type of event that triggers the function:

Behaviour of above scenario: When the above jspx page is opened, it will resize the window to a width of 100 and height of 200.

The way in which the JavaScript is called can be easily manipulated. E.g. The ClientListener component can be added under a CommandButton, and the Type changed to 'click'. In the above scenario, the page would resize to (100,200) when that Button is clicked.