Acceso por ID a un componente ADF por JavaScript

Hola a todos.

Una parte interesante acerca del uso de JavaScript con componentes ADF es el acceso a los mismos mediante su identificador. Puesto que el compilador de JSP's de Oracle completa con un autogenerado estos identificadores. Dificulta el uso de JavaScript común.

Por ello Oracle ADF trae consigo su propio API de JavaScript: API JavaScript de Oracle ADF .

Para acceder mediante el ID a un componente ADF pueden darse los siguientes casos:
  • Si el componente ADF NO se encuentra en uno de los denominados "Naming Containers" se puede utilizar la llamada AdfPage.PAGE.findComponentByAbsoluteId(idComponente). 
  • En el caso de usar esta llamda estando dentro de "Naming Containers" es necesaria ser llamada como AdfPage.PAGE.findComponentByAbsoluteId(rutaComponente:idComponente) donde rutaComponente es la ruta absoluta o relativa donde se encuenta nuestro componente (en lugar de usar el caracter '/' como en sistema de ficheros se utiliza el cararcter ':').
  • En caso de que el componente ADF SÍ se encuentre dentro de un "Naming Container" debe utilizarse la llamada AdfUIComponent.findComponent(idComponente).
En ambos casos es necesario la poner en el componente ADF la propiedad clientComponent=true para asegurar que los identificadores serán absolutos a nivel de cliente.

Documentación:
Ejemplos

Ejemplo 1: Caso en el que no se encuentre dentro de un "Naming Container":


Ejemplo 2: Caso de que se encuentre dentro de un "Naming Cointainer" pero usando la llamada AdfPage.PAGE.findComponentByAbsoluteId.


Se puede observar que se ha usado la nomenclatura p1:nombre para el acceso al componente (ésta puede ser incluso relativa). Para saber cual es el identificador "named" recomiendo que ejecutéis la página y mediante herramientas tipo Firebug observar que identificador ha asignado al componente (ahorra tener que pensar la ruta). Esto es recomendable para páginas que usan complicadas plantillas y numerosos contenedores ADF.

Ejemplo 3: Caso en el que se encuentre dentro de un "Naming Container":



En este caso no es necesario conocer la posición de nuestro componente dado que podrá ser consultado a partir del fuente procedente del componente que dispara la función JavaScript.

PD: Agradecer a Francisco Roldan por su aportación en esta entrada.

Un saludo.

Comments

Post a Comment

Popular posts from this blog

OJET: Inter-Module communication in TypeScript Template

Image
In this post I bring another example on how to Communicate Modules using the Oracle JET - TypeScript Template based on the Oracle JET Cookbook: InterModule Communication From now and so on will create multiple examples using TypeScript for those who are not familiar with it and wants to turn the Cookbook examples into TypeScript :). The example ( ojet-typescript-list-detail ) can be found as usual in my GitHub repository: https://github.com/DanielMerchan/ojet-examples This example is a bit different compared to the Cookbook example where the modules are not running at the same time within a Module. This example is built as described in the following images: Customers module acts as the Wrapper Module. It coordinates when to load the list and detail modules. Customers module makes use also of signals npm module for communication between Customers-List, Customers-Detail. Explanation of the Example customers.js is the coordinator responsible module for: initiali
Read more

OJET: Build and Deploy in an Application Server

Image
There are some other sources where an Oracle JET Application is packaged and deployed as a WAR in Oracle WebLogic Application Server (Arda Eralp) https://blogs.oracle.com/ardaeralp/deploy-oracle-jet-application-to-weblogic-server (Andrejus Baranovski's) http://andrejusb.blogspot.com/2016/07/serving-oracle-jet-application-from.html They may look bit old or maybe because they call directly grunt tasks by using the grunt-cli . In this post I will update a bit these posts in Oracle JET 6.1.0 and the usage of ojet build (instead of calling the grunt tasks) for also building the corresponding WAR file. The example can be found in my GIT repository: https://github.com/DanielMerchan/ojet-examples Let's start... Install grunt-war module in your Oracle JET Application. npm install grunt-war --save-dev Create a war.js (or call it whatever you want) in /scripts/grunt/config folder under your souce files. This is a sample code inside of it, check https://www.npmjs.com/packag
Read more

OJET: Select All options using only Checkboxset

Image
This is an example on how to select all other options by using another oj-checkboxset. GitHub: ojet-checkbockset-select-all The idea is to keep track of the selection and make use of the on-value-changed as described in the following code. self.colorOptions = ko.observableArray([ { id: "blueopt", value: "blue", color: "Blue" }, { id: "greenopt", value: "green", color: "Green" }, { id: "redopt", value: "red", color: "Red" }, { id: "limeopt", value: "lime", color: "Lime" }, { id: "aquaopt", value: "aqua", color: "Aqua" }, ]); self.selectAll = ko.observableArray([]); self.currentColor = ko.observableArray(["red"]); self.selectAllOptionChanged = (event) => { const newSelection = event.detail.value; if (newSelection.indexOf('all')
Read more