Editor de reglas para formularios dinámicos en el editor universal

• Condición → Acción (Cuándo/Entonces)

  code language-text
  WHEN Gross Salary > 50000 THEN Show "Additional Deduction"

  Lo mejor para la visibilidad condicional y la revelación progresiva.

• Acción ← Condición (Establecer si/Solo si)

  code language-text
  SET Taxable Income = Gross Salary - Deductions IF Deductions are applicable

  Ideal para cálculos y transformaciones de datos.

• Si → Entonces → Si no (acción alternativa)

  code language-text
  IF Income > 50000 THEN Show "High Income" fields ELSE Show "Standard Income" fields

  Es ideal para la lógica de ramificación y los flujos mutuamente excluyentes.

• Condición: “El salario bruto supera los 50 000 dólares”
• Acción principal: mostrar “Deducción adicional”
• Acción alternativa: ocultar “Deducción adicional”
• Resultado: los usuarios solo ven los campos que se les aplican

Permisos y configuración esenciales:

• AEM as a Cloud Service: acceso de creación con permisos de edición de formularios
• Editor universal: instalado y configurado en su entorno
• Extensión del editor de reglas: habilitado mediante Extension Manager
• Permisos de edición de formularios: capacidad para crear y modificar componentes de formulario en el editor universal

Pasos de verificación:

1. Confirmar que puede acceder al editor universal desde la consola de AEM Sites.
2. Comprobar que puede crear y editar componentes de formulario
3. Comprobar que aparece el icono del Editor de reglas al seleccionar componentes de formulario

Conocimientos y habilidades requeridos:

• Competencia del editor universal: experimente la creación de formularios con entradas de texto, listas desplegables y propiedades de campo básicas
• Comprensión de la lógica empresarial: capacidad para definir requisitos condicionales y reglas de validación para su caso de uso específico
• Familiaridad con los componentes del formulario: conocimiento de los tipos de campo (texto, número, lista desplegable), propiedades (necesarias, visibles, de solo lectura) y estructura del formulario

Opcional para uso avanzado:

• Aspectos básicos de JavaScript: necesario solamente para crear funciones personalizadas (tipos de datos, funciones, sintaxis básica)
• Comprensión de JSON: útil para la manipulación de datos complejos y las integraciones de API

Preguntas de evaluación:

• ¿Puede crear un formulario básico con entradas de texto y un botón de envío en el editor universal?
• ¿Sabe cuándo los campos deben ser obligatorios u opcionales en el contexto empresarial?
• ¿Puede identificar qué elementos de formulario necesitan visibilidad condicional en su caso de uso?

Importante: la extensión del Editor de reglas no está habilitada de forma predeterminada en entornos del editor universal.

Pasos de activación:

1. Ir a Extension Manager en su entorno de AEM
2. Buscar la extensión “Editor de reglas” en la lista de extensiones disponibles
3. Hacer clic en Habilitar y confirmar la activación
4. Esperar a que se actualice el sistema (puede tardar entre 1 y 2 minutos)

Verificación:

• Después de habilitarlo, el icono del Editor de reglas aparece al seleccionar un componente de formulario:

Figura: El icono del Editor de reglas aparece al seleccionar componentes de formulario

Para abrir el Editor de reglas:

1. Seleccione un componente de formulario en el editor universal.
2. Haga clic en el icono del Editor de reglas.
3. El Editor de reglas se abre en un panel lateral.

Imagen: Interfaz del Editor de reglas para editar reglas de componentes

Introducción a la interfaz del Editor de reglas

Imagen: Interfaz completa del editor de reglas con componentes numerados

• Título del componente y tipo de regla: confirma el componente seleccionado y el tipo de regla activo.

• Objetos de formulario y panel Funciones:

  • Objetos de formulario: vista jerárquica de campos y contenedores para hacer referencia a ellos en las reglas
  • Funciones: ayudantes matemáticas, cadena, fecha y validación integrados

• Alternar panel: muestra u oculta el panel de objetos y funciones para aumentar el espacio de trabajo

• Generador de reglas visual: compositor de reglas de arrastrar y soltar y desplegable

• Controles: Listo (guardar), Cancelar (descartar). Pruebe siempre las reglas antes de guardar.

Cuando un componente ya tiene reglas, puede:

• Ver: ver resúmenes y lógica de reglas
• Editar: modificar condiciones y acciones
• Reordenar: cambiar el orden de ejecución (de arriba abajo)
• Habilitar/Deshabilitar: alternar reglas para pruebas
• Eliminar: quitar las reglas de forma segura

• Cuando: regla principal para comportamiento condicional complejo (Condición → Acción ± Si no)
• Ocultar/Mostrar: controla la visibilidad en función de una condición (divulgación progresiva)
• Habilitar/Deshabilitar: controla si un campo es interactivo (por ejemplo, deshabilitar Enviar hasta que los campos obligatorios sean válidos)

• Establecer valor de: rellenar automáticamente valores (por ejemplo, fechas, totales, copias)
• Borrar valor de: quitar datos cuando cambien las condiciones
• Formato: transformar el formato de visualización (moneda, teléfono, fecha) sin alterar los valores almacenados

• Validar: lógica de validación personalizada, que incluye comprobaciones entre campos y reglas empresariales

• Expresión matemática: calcular valores en tiempo real (totales, impuestos, proporciones)

• Definir enfoque: mover el enfoque a un campo específico (utilícelo con moderación)
• Establecer propiedad: modificar las propiedades del componente de forma dinámica (marcador de posición, opciones, etc.)

• Enviar formulario: envíear el formulario mediante programación (solo después de que se superen las validaciones)
• Restablecer formulario: borrar y restablecer al estado inicial (confirmar antes de usar)
• Guardar formulario: guardar como borrador para utilizarlo posteriormente (formularios largos, varias sesiones)

• Invocar servicio: llamar a API o servicios externos (controle la carga y los errores)
• Añadir o quitar instancia: administrar secciones repetibles (por ejemplo, dependientes, direcciones)
• Navegar a: ruta a otros formularios/páginas (conservar datos antes de la navegación)
• Navegar entre paneles: controlar la navegación por los pasos del asistente y la omisión de estos
• Evento de envío: desencadenar eventos personalizados para integraciones o análisis

En este ejemplo se muestra la visibilidad condicional y los cálculos automáticos.

Figura: Formulario de cálculo de impuestos con campos condicionales inteligentes

Creará un formulario que:

1. Se adapta a los datos introducidos por el usuario mostrando los campos pertinentes
2. Calcula valores en tiempo real
3. Valida datos para mejorar la precisión

• Regla 1: Visualización condicional

  code language-text
  WHEN Gross Salary > 50,000 THEN Show "Additional Deduction" ELSE Hide "Additional Deduction"

• Regla 2: Cálculo de ingresos gravables

  code language-text
  SET Taxable Income = Gross Salary - Additional Deduction (Only when Additional Deduction applies)

• Regla 3: Cálculo de impuestos que se deben pagar

  code language-text
  SET Tax Payable = Taxable Income × 10% (Simplified flat rate)

Objetivo: generar el formulario base con todos los campos y la configuración inicial.

1. Abrir editor universal:

   • Vaya a la consola de AEM Sites, seleccione su página y haga clic en Editar
   • Asegúrese de que tiene el editor universal configurado correctamente

2. Añadir componentes de formulario en este orden:

   • Título (H2): “Formulario de cálculo de impuestos”
   • Entrada de número: "Salario bruto" (obligatorio: sí, marcador de posición: "Introducir salario anual")
   • Entrada de número: "Deducción adicional" (obligatorio: no, marcador de posición: "Introducir deducciones adicionales")
   • Entrada de número: "Ingresos gravables" (solo lectura: sí)
   • Introducción de número: "Impuestos que se deben pagar" (solo lectura: sí)
   • Botón Enviar: "Calcular Impuesto"

3. Configurar propiedades del campo inicial:

   • Ocultar "Deducción adicional" (establecer Visible: No en el panel Propiedades)
   • Establecer "Ingresos gravables" e "Impuestos que se deben pagar" en Solo lectura: Sí

Figura: Estructura inicial del formulario con los componentes básicos configurados.

Punto de comprobación: debería tener un formulario con todos los campos obligatorios donde el campo “Deducción adicional” esté oculto y los campos calculados sean de solo lectura.

Objetivo: mostrar el campo "Deducción adicional" solo cuando el salario bruto supere los 50 000 USD.

1. Seleccione el campo Salario bruto y haga clic en el icono del Editor de reglas

2. Crear una nueva función:

   • Haga clic en Crear
   • Cambiar tipo de regla de "Establecer valor de" a "Cuando"

3. Configurar la condición:

   • Seleccione "es mayor que" en la lista desplegable
   • Escriba 50000 en el campo de número

4. Establecer la acción Entonces:

   • Elija “Mostrar” en la lista desplagable Seleccionar acción
   • Arrastre o seleccione el campo “Deducción adicional” en Objetos de formulario

5. Añadir la acción Si no:

   • Haga clic en ”Añadir acción Si no”
   • Elija “Ocultar” ene la lista desplegable Seleccionar acción
   • Seleccione el campo “Deducción adicional”

6. Guardar la regla: haga clic en Listo

Objetivo: calcular automáticamente “Ingresos gravables” e “Impuestos que se deben pagar” según los datos proporcionados por el usuario.

Configurar cálculo de ingresos gravables:

1. Seleccione el campo “Ingresos gravables” y abra el Editor de reglas

2. Crear la expresión matemática:

   • Haga clic en Crear → Seleccionar "Expresión matemática"
   • Crear expresión: Salario bruto − Deducción adicional
   • Arrastre “Salario bruto” al primer campo
   • Seleccione el operador “Menos”
   • Arrastre “Deducción adicional” al segundo campo

3. Guardar: haga clic cn Listo

Configurar el cálculo de impuestos que se deben pagar:

1. Seleccione el campo “Impuesto que se deben pagar” y abra el Editor de reglas

2. Crear la expresión matemática:

   • Haga clic en Crear → Seleccionar “Expresión matemática”
   • Crear expresión: Ingresos gravables × 10 ÷ 100
   • Arrastrar "Ingresos gravables" al primer campo
   • Seleccione el operador “Multiplicado por”
   • Introducir 10 como número
   • Haga clic en “Extender expresión”
   • Seleccione el operador “Dividido por”
   • Introducir 100 como número

3. Guardar: haga clic en Listo

Compruebe su implementación probando el flujo completo:

1. Previsualizar el formulario: haga clic en el modo Previsualización en el editor universal

2. Probar la lógica condicional:

   • Introduzca Salario bruto = 30000 → “Deducción adicional” debe permanecer oculto
   • Introduzca Salario bruto = 60000 → “Deducción adicional” debe aparecer

3. Probar los cálculos:

   • Con Salario bruto = 60000, introduzca Deducción adicional = 5000
   • Verificar Ingresos gravables = 55000 (60 000 - 5000)
   • Verificar Impuestos que se deben pagar = 5500 (55 000 × 10 %)

Imagen: Calculadora de impuestos completada con campos condicionales y cálculos automáticos

Criterios de éxito: el formulario debe mostrar u ocultar campos de forma dinámica y calcular valores en tiempo real a medida que los usuarios escriben.

Escenarios ideales para funciones personalizadas:

• Cálculos complejos: los cálculos de varios pasos no se expresan fácilmente en la regla Expresión matemática
• Validaciones específicas de la empresa: lógica de validación personalizada específica de su organización o sector
• Transformaciones de datos: conversiones de formato, manipulaciones de cadenas o análisis de datos
• Integraciones externas: llamadas a API internas o servicios de terceros (con limitaciones)

Ventajas de las funciones personalizadas:

• Capacidad de reutilización: escriba una vez y utilícelo en varios formularios y reglas
• Mantenimiento: lógica centralizada más fácil de actualizar y depurar
• Rendimiento: ejecución de JavaScript optimizada comparada con cadenas de reglas complejas
• Flexibilidad: administre casos extremos y escenarios complejos no abordados por reglas estándar

Ubicación de archivos: todas las funciones personalizadas deben definirse en /blocks/form/functions.js en el proyecto de Edge Delivery Services.

Flujo de trabajo de desarrollo:

1. Diseño de funciones

   • Utilizar nombres de funciones descriptivos y orientados a la acción
   • Definir tipos de parámetros claros y valores devueltos
   • Gestionar correctamente casos extremos y entradas no válidas

2. Implementation

   • Escribir JavaScript limpio y bien comentado
   • Incluir validación de entrada y control de errores
   • Probar funciones independientemente antes de la integración

3. Documentación

   • Añadir comentarios JSDoc completos
   • Incluir ejemplos de uso y descripciones de parámetros
   • Documentar cualquier limitación o dependencia

4. Implementación

   • Exportar funciones mediante exportaciones con nombre
   • Implementar en el repositorio del proyecto
   • Verificar la finalización de la compilación antes de probar

Implementación de ejemplo:

/**
 * Concatenates first and last name with proper formatting
 * @name getFullName
 * @description Combines first and last name, handles edge cases like missing values
 * @param {string} firstName - The person's first name
 * @param {string} lastName - The person's last name
 * @returns {string} Formatted full name or empty string if both inputs are invalid
 */
function getFullName(firstName, lastName) {
  // Handle null, undefined, or empty string inputs
  const first = (firstName || '').toString().trim();
  const last = (lastName || '').toString().trim();

  return `${first} ${last}`.trim();
}

/**
 * Calculates the number of days between two dates
 * @name days
 * @description Computes absolute difference in days, handles various date input formats
 * @param {Date|string} endDate - End date (Date object or ISO string)
 * @param {Date|string} startDate - Start date (Date object or ISO string)
 * @returns {number} Number of days between dates, 0 if inputs are invalid
 */
function days(endDate, startDate) {
  // Convert string inputs to Date objects
  const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
  const end = typeof endDate === 'string' ? new Date(endDate) : endDate;

  // Validate date objects
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    return 0;
  }

  // Calculate absolute difference in milliseconds, then convert to days
  const diffInMs = Math.abs(end.getTime() - start.getTime());
  return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}

// Export functions for use in Rule Editor
export { getFullName, days };

Imagen: Adición de funciones personalizadas al archivo functions.js

Pasos de integración:

1. Añadir función a proyecto

   • Crear o editar /blocks/form/functions.js en el proyecto
   • Incluir la función en la instrucción de exportación

2. Implementar y compilar

   • Confirmar cambios en el repositorio
   • Asegurarse de que el proceso de compilación se complete correctamente
   • Dejar tiempo para actualizaciones de la caché de CDN

3. Acceso en el Editor de reglas

   • Abrir el Editor de reglas para cualquier componente de formulario
   • Seleccionar “Salida de función” en el menú desplegable Seleccionar acción
   • Elegir la función personalizada en la lista de funciones disponibles
   • Configurar parámetros de función mediante campos de formulario o valores estáticos

4. Realizar pruebas exhaustivas

   • Previsualizar el formulario para verificar el comportamiento de la función
   • Probar con varias combinaciones de entrada, incluidos los casos extremos
   • Verificar el impacto del rendimiento en la carga y la interacción del formulario

Imagen: Selección y configuración de funciones personalizadas en la interfaz del Editor de reglas

Prácticas recomendadas para el uso de funciones:

• Control de errores: incluir siempre el comportamiento de reserva para los errores de funciones
• Rendimiento: funciones de perfil con volúmenes de datos realistas
• Seguridad: validar todas las entradas para evitar vulnerabilidades de seguridad
• Pruebas: crear casos de prueba que cubran casos normales y extremos

• Minimice la complejidad de la regla; divida la lógica grande en reglas pequeñas y centradas
• Ordenar reglas por frecuencia (más común primero)
• Mantener manejables los conjuntos de reglas por componente
• Preferir funciones personalizadas reutilizables en lugar de lógica duplicada

• Proporcionar una validación clara y comentarios en línea
• Evitar los cambios visuales molestos; utilizar la función de mostrar/ocultar cuidadosamente
• Probar entre dispositivos y diseños

• Probar con casos extremos y valores conocidos
• Verificar en los distintos navegadores
• Documentar la intención detrás de reglas complejas, no solo la mecánica
• Mantener un inventario de reglas para formularios grandes
• Utilizar una nomenclatura uniforme para los componentes y las reglas
• Funciones personalizadas de versión y pruebas en entornos que no son de producción

• Comprobar nombres y referencias de componentes
• Comprobar orden de ejecución (de arriba a abajo)
• Validar condiciones con valores conocidos
• Inspeccionar la consola del explorador para detectar errores de bloqueo

• Revisar operadores y agrupación (Y/O)
• Probar fragmentos de expresión individualmente
• Confirmar tipos de datos (números o cadenas)

• Simplificar las condiciones profundamente anidadas
• Crear perfiles de funciones personalizadas
• Minimizar las llamadas externas dentro de las reglas
• Usar selectores y referencias específicos

• Confirmar la ruta del archivo: /blocks/form/functions.js
• Asegurarse de que las exportaciones con nombre son correctas
• Confirmar que la compilación incluye los cambios.
• Borrar la caché del explorador después de la implementación
• Validar tipos de parámetros y gestión de errores

• Confirmar que la extensión del Editor de reglas está habilitada.
• Seleccionar un componente compatible
• Utilizar un explorador compatible (Chrome, Firefox, Safari)
• Comprobar que tiene los permisos necesarios

Limitaciones importantes

Resumen

El Editor de reglas del editor universal transforma los formularios estáticos en experiencias inteligentes y adaptables que se adaptan a los datos introducidos por el usuario en tiempo real. Al aprovechar la lógica condicional, los cálculos automatizados y las reglas empresariales personalizadas, puede crear flujos de trabajo de formulario sofisticados sin escribir código de aplicación.

Funciones clave que ha aprendido:

• Lógica condicional: mostrar y ocultar campos basados en los datos proporcionados por el usuario para crear experiencias relevantes y enfocadas
• Cálculos dinámicos: calcular automáticamente valores (impuestos, totales, tasas) a medida que los usuarios interactúan con el formulario
• Validación de datos: implementar la validación en tiempo real con mensajes de comentarios claros y procesables
• Funciones personalizadas: ampliar las capacidades con JavaScript para integraciones y lógica empresarial compleja
• Optimización del rendimiento: aplicar las prácticas recomendadas para un desarrollo de reglas eficiente y que se pueda mantener

Valor entregado:

• Experiencia del usuario mejorada: reducir la carga cognitiva con revelación progresiva y flujos de formularios inteligentes
• Errores reducidos: impedir los envíos no válidos mediante validación en tiempo real y entrada guiada
• Mayor eficiencia: automatice los cálculos y la entrada de datos para minimizar el esfuerzo del usuario
• Soluciones que se pueden mantener: crear reglas reutilizables y bien documentadas que se escalen en toda la organización

Impacto empresarial:

Los formularios se convierten en potentes herramientas para la recopilación de datos, la calificación de posibles clientes y la participación del usuario. El Editor de reglas permite a los autores no técnicos implementar una lógica empresarial sofisticada, reducir los costes de desarrollo y mejorar las tasas de finalización de los formularios y la calidad de los datos.