In this post I will explain a simple way to use JS (JavaScript) in an ADF page.
To implement javaScript function you will need few things:
- Define a JavaScript code
- Link the Component that will refer to that JS code (InputText, Command Button etc..)
- Obviously, understand the purpose of using JS in your ADF application
So let’s define first the JS code.
Go to the page definition source and drag the resource object under the document tag. Choose Javascript as the resource type:
Expand the tag so it will include resource:
Inside the resource tag you can write the JS code, for example alert with “Say Hello” (The function will get an event parameter):
The next thing to do, is call the function from the required object. So. Let’s say we want to call the function from a command button.
For that, we will drag an operation component call “Client Listener” over the CommandButton. On the Method name write down the name of the JS function, and choose “action” for the Type:
That’s it. Run the application and test the JS execution:
You have many other options when running JS from ADF. For example – you want to populate a field with value from other field or fields.
In the next example, I’m concatenating the Employee’s first & last name and populates it to another InputText field.
For that, I’ve added a new InputText field and dragged a ClientListener component on it. This time I choose “click” for the type:
To implement the JS I used the below code:
Below you can find the full .jspx source:
function sayHellow(actionEvent) { alert("Say Hello") } function concatEmployee(Event) { var sourceOutput=Event.getSource(); var employeeFirst = sourceOutput.findComponent("it6").getValue(); var employeeLast = sourceOutput.findComponent("it3").getValue(); var employeeFull = sourceOutput.findComponent("it8"); employeeFull.setValue(employeeFirst +" "+employeeLast); }
Leave a Reply