Introducción
Una buena experiencia de usuario (UX) no solo mejora la usabilidad de una aplicación, sino que también previene errores y reduce frustraciones. En Oracle APEX, la API apex.event nos permite gestionar eventos de manera eficiente para evitar acciones no deseadas y optimizar la interacción del usuario. En este artículo, exploraremos cómo usar apex.event para prevenir errores comunes y mejorar la UX en nuestras aplicaciones.
Casos Prácticos de Prevención de Errores
🛑 1. Evitar el Envío de Formularios Incompletos
Cuando un usuario intenta enviar un formulario sin completar los campos obligatorios, podemos deshabilitar el botón hasta que todos los datos sean correctos.
Implementación:
Agrega un botón "Enviar" con ID: btn_enviar.
Agrega dos campos de entrada: P18_NOMBRE y P18_EMAIL.
Usa el siguiente código en Ejecutar JavaScript > Función y Declaración Global:
document.addEventListener("DOMContentLoaded", function () {
// Función de validación del formulario
function validarFormulario() {
// Obtenemos los valores de los campos P18_NOMBRE y P18_EMAIL
let nombre = $v("P18_NOMBRE").trim();
let email = $v("P18_EMAIL").trim();
// Obtenemos el botón de enviar
let botonEnviar = document.getElementById("btn_enviar");
// Deshabilitamos el botón si los campos están vacíos, habilitamos si no
botonEnviar.disabled = !(nombre !== "" && email !== "");
}
// Usamos addEventListener para escuchar los eventos 'input' en los campos P1_NOMBRE y P1_EMAIL
document.querySelector("#P18_NOMBRE","#P18_EMAIL").addEventListener("input", validarFormulario);
//document.querySelector("#P18_EMAIL").addEventListener("input", validarFormulario);
// Validamos el estado al cargar la página
validarFormulario();
});
🔹 Explicación:
✔️ Escuchamos el evento ‘input’ en los campos P18_NOMBRE y P18_EMAIL.
✔️ Habilitamos el botón solo si ambos campos tienen contenido.
✔️ Al cargar la página, verificamos si el botón debe estar deshabilitado.
🚪 2. Prevenir la Pérdida de Datos al Salir sin Guardar
Si el usuario intenta salir sin guardar cambios, podemos mostrar una alerta.
Implementación:
Agrega un formulario con campos editables.
Usa este código en Ejecutar JavaScript > Función y Declaración Global:
document.addEventListener("DOMContentLoaded", function () {
let cambiosPendientes = false;
// Escuchar los cambios en los campos del formulario
document.querySelector("body").addEventListener("input", function () {
cambiosPendientes = true; // Se marca como verdadero cuando hay cambios
});
// Escuchar el evento beforeunload (antes de que la página se cierre o recargue)
window.addEventListener("beforeunload", function (event) {
if (cambiosPendientes) {
event.preventDefault(); // Prevenir el comportamiento por defecto (cerrar la página)
// En navegadores modernos, ya no se permite personalizar el mensaje, pero se sigue mostrando una alerta genérica
}
});
});
🔹 Explicación:
✔️ Escuchamos el evento input en cualquier campo del formulario.
✔️ Si hay cambios, activamos la advertencia antes de que el usuario cierre la pestaña.
⛔ 3. Deshabilitar Acciones Hasta Cumplir Condiciones
Si queremos que un botón solo esté activo cuando el usuario seleccione una opción válida en un Select List, podemos hacerlo con eventos.
Implementación:
Agrega un Select List con ID: P18_OPCION.
Agrega un botón con ID: btn_aceptar.
Usa el siguiente código en Ejecutar JavaScript > Función y Declaración Global:
document.addEventListener("DOMContentLoaded", function () {
function validarSeleccion() {
let seleccion = $v("P18_OPCION");
let botonAceptar = document.getElementById("btn_aceptar");
botonAceptar.disabled = (seleccion === "");
}
// Usamos 'addEventListener' en lugar de 'apex.event.addListener'
document.getElementById("P18_OPCION").addEventListener("change", validarSeleccion);
// Llamamos a la validación también al cargar la página para asegurar el estado del botón
validarSeleccion();
});
🔹 Explicación:
✔️ Escuchamos cambios en el Select List.
✔️ Si no hay selección, deshabilitamos el botón.
✔️ Validamos también al cargar la página.
4. Prevenir el Envío de Formularios con Datos Incorrectos
Además de asegurarse de que los campos estén completos, también es importante validar el formato de los datos, como correos electrónicos o números telefónicos.
Implementación:
Agrega un campo de correo electrónico: P1_EMAIL.
Usa el siguiente código para validar el formato de correo electrónico antes de habilitar el botón de envío:
document.addEventListener("DOMContentLoaded", function () {
function validarEmail() {
let email = $v("P18_EMAIL2").trim();
let botonEnviar = document.getElementById("btn_enviar_2");
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
botonEnviar.disabled = !regex.test(email);
}
// Usamos 'addEventListener' en lugar de 'apex.event.addListener'
document.getElementById("P18_EMAIL2").addEventListener("input", validarEmail);
// Llamamos a la validación también al cargar la página para asegurar el estado del botón
validarEmail();
});
🔹 Explicación:
✔️ Verificamos el formato del correo electrónico utilizando una expresión regular.
✔️ Habilitamos el botón solo si el formato es correcto.
5. Confirmación de Acciones Críticas
Si tu aplicación realiza acciones críticas, como eliminar un registro, es esencial confirmar con el usuario antes de continuar.
Implementación:
Añade un botón de eliminación: btn_eliminar.
Usa este código para mostrar una confirmación antes de proceder con la acción:
document.addEventListener("DOMContentLoaded", function () {
// Usamos 'addEventListener' en lugar de 'apex.event.addListener'
document.getElementById("btn_eliminar").addEventListener("click", function(event) {
let confirmacion = confirm("¿Estás seguro de que deseas eliminar este registro?");
if (!confirmacion) {
console.log('Cancelao');
event.preventDefault(); // Cancela la acción si el usuario no confirma
}{
console.log('Aceptao');
}
});
});
🔹 Explicación:
✔️ Usamos confirm() para mostrar un mensaje de confirmación.
✔️ Si el usuario no confirma, evitamos que la acción de eliminación se ejecute.
6. Optimización de la UX con Mensajes Dinámicos
Agregar mensajes dinámicos, como notificaciones o mensajes de error/éxito, puede mejorar la interacción del usuario al proporcionar retroalimentación instantánea.
Implementación:
Usa este código para mostrar un mensaje de éxito cuando se envíe un formulario correctamente:
document.addEventListener("DOMContentLoaded", function () {
// Usamos 'addEventListener' en lugar de 'apex.event.addListener'
document.getElementById("btn_enviar").addEventListener("click", function() {
// Supongamos que el formulario fue enviado correctamente
apex.message.showPageSuccess("¡Formulario enviado con éxito!");
//otros mensajes serian
//apex.message.showPageInfo("Este es un mensaje informativo.");
//apex.message.showPageError("Ha ocurrido un error al enviar el formulario.");
//apex.message.showPageWarning("Este es un mensaje de advertencia.");
//descomentar y probar cada uno
});
});
🔹 Explicación:
✔️ Proporcionamos retroalimentación al usuario tan pronto como se complete la acción.
✔️ apex.message.showPageSuccess(): Esta función muestra un mensaje de éxito en la parte superior de la página, lo cual es más adecuado para mostrar mensajes importantes a los usuarios en una aplicación APEX.
✔️ El uso de alertas simples o notificaciones también puede mejorar la percepción del rendimiento.
🧐 ¿Por qué usar apex.event en lugar de JavaScript estándar o funciones como required?
1. Integración Directa con APEX
apex.event está diseñado específicamente para trabajar con eventos dentro de las aplicaciones creadas con Oracle APEX. Utilizar esta API te permite aprovechar la integración directa con el framework de APEX, lo cual:
Optimiza la interoperabilidad con otros componentes APEX.
Facilita la gestión de eventos dentro de la propia plataforma, ya que no tienes que recurrir a manejar eventos manualmente como lo harías con JavaScript puro en un archivo externo.
Permite realizar acciones sobre elementos APEX (como campos de formulario o botones) de manera más eficiente, sin tener que buscar o acceder a elementos del DOM manualmente.
2. Mejora de la Usabilidad y UX en Tiempo Real
Con apex.event, puedes reaccionar a eventos de forma dinámica y en tiempo real, mejorando la interacción con el usuario de una forma más fluida. Algunas ventajas son:
Interactividad instantánea: Puedes habilitar o deshabilitar botones, mostrar o esconder mensajes, o activar/validar campos al instante cuando el usuario interactúa con un formulario.
Evitar frustraciones del usuario: Al deshabilitar un botón o mostrar alertas inmediatamente cuando el usuario comete un error, se reducen los errores y frustraciones.
Experiencia personalizada: Permite realizar validaciones de manera progresiva, dando al usuario una experiencia más amigable y menos intrusiva que una validación al enviar el formulario.
3. Validación en el Lado del Cliente
Aunque el atributo required en APEX y HTML5 es útil, tiene limitaciones:
Validación más sencilla: La validación required solo asegura que un campo no esté vacío, pero no permite manejar condiciones complejas o lógicas personalizadas (como verificar que un correo electrónico tenga un formato correcto o que un botón se habilite solo bajo ciertas condiciones).
Falta de retroalimentación dinámica: Con apex.event, puedes proporcionar retroalimentación instantánea (como habilitar/deshabilitar botones, mostrar mensajes de error específicos, etc.) sin tener que esperar hasta que el formulario se envíe. Esto hace que el proceso de validación sea más interactivo y flexible.
4. Manejo de Eventos y Acción Controlada
La ventaja de usar apex.event en lugar de JavaScript estándar es que puedes manejar eventos y ejecutarlos de manera controlada y estructurada dentro de la aplicación APEX. Algunas de las razones:
Manejo centralizado de eventos: Si tienes múltiples interacciones o validaciones para varios elementos en tu aplicación, puedes centralizar la gestión de eventos, evitando el desorden que podría generar el uso de JavaScript disperso.
Código más limpio y menos repetitivo: Usar apex.event puede hacer que tu código sea más limpio, ya que puedes reutilizar funciones y eventos sin tener que escribir código extra para gestionar los elementos de la página directamente.
Acciones relacionadas con la interfaz de usuario: Usar apex.event permite controlar la interfaz de usuario de manera más precisa, como controlar el estado de los botones de manera sincronizada con el estado de los campos de entrada.
5. Mejor Mantenibilidad y Escalabilidad
Si tu aplicación crece, gestionar eventos y validaciones solo con JavaScript puede volverse caótico. Usar apex.event tiene beneficios a largo plazo:
Menos código repetido: Puedes escribir código modular, que se puede reutilizar para múltiples formularios y componentes sin tener que crear funciones o gestionar eventos repetidamente.
Fácil adaptación a cambios futuros: Si alguna parte de la validación o la lógica del formulario cambia, hacer ajustes es más sencillo utilizando apex.event, ya que las modificaciones son más localizadas y centradas en el marco de APEX.
6. Compatibilidad con APEX Dynamic Actions
Oracle APEX se basa fuertemente en "Dynamic Actions" para manejar eventos en sus formularios. apex.event se integra perfectamente con estas acciones dinámicas, permitiéndote manejar eventos como el cambio de un valor en un Select List o la selección de un checkbox de manera más coherente con el entorno de APEX.
🎯 Conclusión
El uso de apex.event en Oracle APEX permite mejorar la usabilidad y prevenir errores comunes:
✅ Evitar formularios incompletos.
✅ Prevenir la pérdida de datos.
✅ Controlar cuándo se pueden ejecutar ciertas acciones.
✅ Mejorar la interacción y retroalimentación con el usuario de manera dinámica.
📌 ¿Que te parecio alguno de estos casos? ¿Lo implementarias en tu proyecto? ¡Déjamelo en los comentarios! 🚀