🇺🇸 Read in English

Introducción: De Funcional a Fantástico

Ya dominas las bases (Buenas Prácticas) y has blindado tu aplicación (Seguridad). Ahora, es momento de ir por el factor WOW: la Experiencia de Usuario (UX).

En Oracle APEX, una gran UX no es solo "que se vea bonito"; es rendimiento percibido, interacciones fluidas y esa sensación de estar usando software de clase mundial. En esta entrada de APEX Insights, vamos a transformar aplicaciones funcionales en experiencias excepcionales dominando las Dynamic Actions y la API de JavaScript.

1. Dominando las Dynamic Actions (Acciones Dinámicas)

Las Dynamic Actions (DAs) son el puente declarativo entre el Frontend (JavaScript) y el Backend (PL/SQL). Usarlas correctamente es clave para la reactividad de tu página.

Truco 1: Cuándo Usar DAs y Cuándo Usar JavaScript Puro

Truco 2: Optimiza el Fire on Initialization

La propiedad Fire on Initialization de una DA puede causar problemas de rendimiento si se usa en exceso.

• Evita: Usar Fire on Initialization para lógica que solo afectará a los ítems cuando estén visibles. Cárgala solo cuando sea necesario.

• Prefiere: Si necesitas inicializar muchos ítems, agrupa la lógica en una sola función JavaScript y ejecuta esa función con una DA activada por el evento Page Load. Una sola llamada es más eficiente que múltiples llamadas individuales.

2. Mejorando el Rendimiento Percibido con Feedback Visual

El rendimiento percibido es la rapidez con la que el usuario siente que la aplicación responde. Es vital usar feedback visual mientras el servidor trabaja.

Truco 3: Siempre un Spinner para Llamadas AJAX

Cuando ejecutas un proceso de servidor (DA AJAX Call o apex.server.process), el usuario debe saber que algo está sucediendo.

Ejemplo Práctico de Spinner en JavaScript:

Este código muestra un spinner superpuesto en una región mientras se ejecuta la llamada AJAX al servidor.

// Ejecución de AJAX (por ejemplo, en un DA "Execute JavaScript Code")

// 1. Mostrar el Spinner en la región principal (o en un selector específico)
// Se usa apex.util.showSpinner para superponer un spinner en el selector
const selectorRegion = "#region_id_mi_region";
apex.util.showSpinner($(selectorRegion)); 

// 2. Llamar al proceso del servidor (por ejemplo, usando apex.server.process)
apex.server.process(
    "MI_PROCESO_AJAX", 
    { x01: $v('P1_ITEM_ID') },
    {
        success: function(pData) {
            // Lógica de éxito
            console.log("Datos actualizados");
        },
        complete: function() {
            // 3. OCULTAR el spinner siempre, en caso de éxito o error
            $(selectorRegion).remove('.u-Processing');
        }
    }
);

Truco 4: Mensajes de Éxito Instantáneos

Tras un proceso de DML (Insert, Update, Delete) o un cálculo importante, notifica al usuario de forma clara e inmediata.

• Usa apex.message.showPageSuccess('¡El registro se ha guardado con éxito!'); para mensajes positivos.

• Usa apex.message.showErrors() para un manejo de errores elegante y no intrusivo (evita el molesto alert()).

3. Interacciones Avanzadas con la API de JavaScript de APEX

La API de JavaScript de APEX (disponible bajo el namespace apex) es tu herramienta más poderosa para trabajar con elementos de página de forma segura y estandarizada.

Truco 5: Olvídate de JavaScript del DOM (document.getElementById)

[!WARNING] Nunca manipules directamente el DOM para obtener o establecer valores de ítems de página (document.getElementById). Si cambias el ID interno o el tipo de ítem en el futuro, tu código se romperá silenciosamente.

El Método APEX: Usa siempre la API apex.item() para interactuar con ítems de página. Esta API maneja tipos de datos, bindings internos y asegura que interactúas con el ítem correcto sin importar su tipo (Radio Group, Select List, Input, etc.).

Truco 6: Uso de Shortcuts de la API

Utiliza los shortcuts ($v, $s) para obtener y establecer valores en JavaScript para un código más legible y conciso.

Ejemplo Práctico: Cálculo en el Cliente

Este código ejecuta un cálculo simple en el navegador, evitando un viaje al servidor.

// Se dispara en el evento Change del ítem P1_CANTIDAD

// Obtener valores de forma segura (Shortcut $v)
const cantidad = $v('P1_CANTIDAD');
const precio = $v('P1_PRECIO');

// Convertir a número antes de operar (Javascript)
const total = parseFloat(cantidad) * parseFloat(precio);

// Establecer el valor de forma segura (Shortcut $s)
$s('P1_TOTAL', total.toFixed(2));

4. Estrategia con Page Items: Reduce el Round-Trip

El round-trip (viaje al servidor) es el mayor enemigo de la UX en APEX. Si puedes evitar la recarga o la llamada al servidor, hazlo.

Truco 7: Validaciones del Lado del Cliente

Siempre que sea posible, realiza validaciones simples (ej. campo obligatorio, formato de email, longitud) en el lado del cliente (JavaScript o Dynamic Actions) antes de enviar la página o llamar a un proceso AJAX. Esto salva al usuario de esperar una respuesta del servidor para un error trivial.

Truco 8: Limpia los ítems con Clear Cache de Forma Inteligente

Cuando un botón de tu página limpia todos los ítems de la misma (Clear Cache: P1), APEX debe hacer un viaje al servidor para reiniciar el estado de la sesión.

• Alternativa UX: Si solo necesitas limpiar unos pocos ítems, hazlo con una Dynamic Action que ejecute apex.item('P1_ITEM').setValue(null) en el cliente. Esto es instantáneo y mucho más rápido que un round-trip completo.

Conclusión

La diferencia entre una aplicación APEX "buena" y una excelente está en los detalles. Al abrazar el poder declarativo de las Dynamic Actions y usar la API de JavaScript (apex.item, apex.server) con disciplina, no solo construyes más rápido, sino que entregas un producto que tus usuarios amarán usar.

Deja de construir pantallas estáticas. Empieza a construir experiencias.

Referencias

1. Guía de la API de JavaScript de APEX: La referencia oficial para todos los namespaces (apex.item, apex.server, apex.message, etc.).

2. Documentación sobre Dynamic Actions: Profundiza en los eventos y las acciones disponibles.

3. Oracle LiveLabs - APEX Development: Módulos de aprendizaje sobre el uso moderno de JavaScript en APEX.

¿Cuál de estos consejos te parece más crítico para mejorar la velocidad percibida de tu aplicación? Comparte tu opinión o tu mejor truco de UX en los comentarios.

¡No te pierdas el próximo Insight! Exploraremos cómo Optimizar el Rendimiento en APEX a profundidad, centrándonos en estrategias para reducir la carga en la base de datos y acelerar el tiempo de respuesta. Suscríbete para recibir la notificación.

---

🚀 ¿Necesitas un Experto en APEX?

Ayudo a empresas a modernizar sus aplicaciones y mejorar la experiencia de sus usuarios. Si buscas auditar o llevar tu UX al siguiente nivel, hablemos.

☕ Agendar un Café | 💼 Conectar en LinkedIn

---