Cuando desarrollamos aplicaciones en Oracle APEX, es posible que en algún momento necesitemos implementar un buscador en un campo de texto, para ello, Oracle APEX nos facilita la implementación de esta funcionalidad utilizando el componente Text Field with Autocomplete.
Para realizar la implementación, crearemos una tabla donde queramos realizar la búsqueda de datos, únicamente es necesario los campos de ID_PRODUCTOS y NOMBRE, los demás son campos opcionales.
Nombre tabla: PRODUCTO
- ID_PRODUCTO – NUMBER(15,0)
- NOMBRE – VARCHAR2(45)
Posterior a esto, en la pantalla donde queremos implementar el buscador, crearemos un botón para desplegar nuestro inline-dialog:
En Behavior Action elegiremos Redirect to URL y en Target colocaremos el siguiente código:
javascript:openModal('BUSCADOR');Luego, crearemos una region de tipo Static Content en la sección de INLINE DIALOG y en Advanced le colocaremos un id llamado BUSCADOR este es el nombre que llama la acción del botón en el paso anterior:
Luego Añadiremos un objeto de tipo Text Field with Autocomplete y le colocaremos un texto informativo en el label:
En la sección de List of Values colocaremos el select que llamará los valores que tengamos dentro de nuestra tabla:
SELECT NOMBRE FROM PRODUCTO
Añadiremos un campo de texto oculto que utilizaremos para la funcionalidad de reenvío a la página o a la acción de cuando se encuentre un producto:
Adicionalmente, añadiremos un botón de búsqueda y uno para cerrar el dialog:
Para el botón de búsqueda, crearemos una acción dinámica con una Client-Side Condition:
$v('P3_BUSCADOR') != ''Esta condición validará si el campo de texto esta vacío.
En caso de que la condición no se cumpla, en el false action crearemos un Execute Javascript Code, le mostraremos un mensaje de error al usuario con el siguiente código:
// First clear the errors
apex.message.clearErrors();
// Mostramos los nuevos mensajes de error
if ($v('P3_BUSCADOR') == ''){
apex.message.showErrors([
{
type: "error",
location: [ "page", "inline" ],
pageItem: "P3_BUSCADOR",
message: "Debe escrbir el nombre de un producto",
unsafe: false
}
]);
}
En caso de que la condición sí se cumpla, crearemos un action de tipo Execute Server-side Code con el siguiente código:
Nota: El objeto P3_PIVOTE_BUSCADOR servirá como pivote para reenviar al usuario a la página deseada según el producto que elija.
En mi caso, utilizo una variable dentro del url de Oracle APEX al que le paso el id del producto, para ello cuando cargo la página, se carga con base en el id que lleve el campo P4_ID_PRODUCTO, el cual es un objeto propio de la página destino.
Declare
idProducto NUMBER(15,0);
begin
select ID_PRODUCTO INTO idProducto
from PRODUCTO
where NOMBRE = :P3_BUSCADOR;
:P3_PIVOTE_BUSCADOR := 'f?p=&APP_ID.:4:&APP_SESSION.::::P4_ID_PRODUCTO:' || idProducto;
apex_util.set_session_state('P3_PIVOTE_BUSCADOR', 'f?p=&APP_ID.:4:&APP_SESSION.::::P4_ID_PRODUCTO:' || idProducto);
exception when no_data_found then
:P3_PIVOTE_BUSCADOR := 0;
apex_util.set_session_state('P3_PIVOTE_BUSCADOR', 0);
end;
Ahora, abajo de la acción Execute Server-side Code, crearemos un Execute Javascript Code con el siguiente código, este será utilizado para tomar el valor de P3_PIVOTE_BUSCADOR y abrir el link que guardamos en el campo, en caso de que el producto no se encuentre, le mostraremos un mensaje de error al usuario:
Nota: Para implementar el uso de swal.fire, deberá implementar la librería de sweet alert, la documentación de como hacerlo la puede encontrar en el siguiente link
if(apex.item("P3_PIVOTE_BUSCADOR").getValue() != 0){
window.open(apex.item("P3_PIVOTE_BUSCADOR").getValue(),"_self");
}else{
Swal.fire({
icon: 'info',
title: 'Producto no encontrado',
text: ''
})
}
Por último, para el botón de cerrar en el Behavior action elegiremos Redirect to URL y en target colocaremos el siguiente código:
javascript:closeModal('BUSCADOR');
De esta manera al presionar el botón, el dialog se cerrará.
Ahora probaremos la funcionalidad del buscador: