How to find component by JavaScript in Oracle ADF

In Oracle ADF, you sometimes need to interact with client-side components by using JavaScript. This article demonstrates two techniques for accessing components by their IDs Oracle ADF, addressing two scenarios: components with dynamically generated IDs by ADF and components with fixed IDs.

Component with fixed ID

In this case, just using JavaScript API in Oracle ADF Faces to get component by its ID

var component = AdfPage.PAGE.findComponentByAbsoluteId('component_id');

Component with dynamically generated ID

When a component’s ID is dynamic, meaning it’s generated dynamically by the framework, attempting to locate it by using AdfPage.PAGE.findComponentByAbsoluteId results in the component being null or undefined.

To deal with this problem, use a component of ADF called <af:clientListener>. For more details, refer to the illustration and example provided below.

The <af:clientListener> component is set to trigger the getComponentID JavaScript method upon mouse-over action within this fragment. Below is the JavaScript code to obtain the component 'af:inputText' with ID 'it1'.

var inputTextComponent;
function getComponentID(event){
    inputTextComponent = event._source.findComponent('it1');
}

Documentation

I hope this article proves useful to you. For further information, please refer to the official documentation available on Oracle Docs.

1. JavaScript API Reference for Oracle ADF Faces
2. <af:clientListener> (oracle.com)