Componentes principales de formularios adaptables adaptive-forms-core-components-introduction

Con los componentes principales de formularios adaptables de Adobe Experience Manager, puede crear experiencias de inscripción atractivas.

Componentes principales overview

En Adobe Experience Manager (AEM), los componentes son los elementos básicos que se utilizan para crear páginas y formularios. Proporcionan una forma sencilla y potente para que los autores creen y gestionen el contenido, a la vez que proporcionan a los desarrolladores la flexibilidad y la capacidad de ampliación necesaria para crear componentes personalizados. Están diseñadas para acelerar el tiempo de desarrollo y reducir los costes de mantenimiento de sitios web y formularios, ser flexibles y se pueden personalizar fácilmente para adaptarse a las necesidades específicas de un sitio web y un formulario.

Los componentes principales también están diseñados para ser adaptables y admiten una amplia gama de dispositivos, incluidos ordenadores de sobremesa, tabletas y teléfonos inteligentes. También cumplen con los últimos estándares web y prácticas recomendadas, convirtiéndolos en una solución firme y fiable para crear contenido web.

En general, los componentes principales son una herramienta esencial para crear y administrar el contenido web en AEM, lo que proporciona una solución potente y flexible que puede ayudar a reducir el tiempo de desarrollo y los costes de mantenimiento, al tiempo que proporciona una buena experiencia de usuario a los visitantes del sitio web.

Componentes principales de formularios adaptables

Los componentes principales de formularios adaptables son un conjunto de 30 componentes de código abierto compatibles con BEM que se basan en los componentes principales de la gestión de contenidos web de Adobe Experience Manager. Están diseñadas específicamente para utilizarse en la creación de formularios adaptables, que son formularios que se adaptan al dispositivo, navegador y tamaño de pantalla del usuario.

Estos componentes se pueden utilizar para crear experiencias de inscripción y captura de datos excepcionales, proporcionando una amplia gama de opciones de campo de formulario, incluidos campos de texto, casillas de verificación, menús desplegables y mucho más. También incluyen funciones como validación, lógica condicional y diseño interactivo, que pueden utilizarse para crear formularios de fácil manejo y sencillos de usar.

Además, como estos componentes son de código abierto, los desarrolladores pueden personalizar y ampliar fácilmente los componentes para adaptarlos a las necesidades específicas de su organización. Además, estos componentes se basan en la metodología de BEM, que garantiza que sean escalables y mantenibles.

imagen de formulario adaptable

Características features

Listo para la producción
Los componentes principales de formularios adaptables son 24 componentes WCM sólidos.
Preparado para la nube
Disponible para AEM Forms as a Cloud Service.
Versátil
Los componentes representan conceptos genéricos con los que los autores de formularios pueden montar casi cualquier diseño.
Configurable
Las políticas de contenido con respecto a la plantilla definen qué características pueden utilizar o no los autores de la página.
Accesible
Proporcionan etiquetas ARIA, admiten la navegación mediante el teclado y texto para tecnologías de asistencia, como lectores de pantalla.
Tema capaz
Los componentes implementan el Sistema de estilos y el marcado sigue la nomenclatura de BEM CSS.
Personalizable
Varios patrones permiten una fácil personalización, desde ajustar el HTML a una reutilización de funcionalidades avanzadas.
Versiones
La directiva de versiones garantiza que los componentes principales no romperán el sitio al mejorar las cosas que puedan afectarle.
Abrir Con origen en
Si algo no funciona como debería, contribuya a su mejora.

Ventajas benefits

Las experiencias de captura de datos son cruciales para la generación de posibles clientes y la inscripción, y los componentes principales de formularios adaptables proporcionan una solución potente para la creación de formularios optimizados para la captura de datos. Algunas de las razones para utilizar los componentes principales para crear estas experiencias sobre los componentes básicos son las siguientes:

  • Disponibilidad en GitHub: los componentes principales de formularios adaptables de AEM son de código abierto y están disponibles en GitHub, junto con una documentación exhaustiva. Esto facilita a los desarrolladores la comprensión de los componentes y de cómo funcionan, así como la contribución a su desarrollo. El sitio web aemcomponents.dev también es un recurso valioso, donde los desarrolladores pueden ver los componentes en acción y acceder a la documentación detallada.

  • Modelo BEM para estilos: los componentes principales siguen el modelo de estilo de BEM (Block Element Modifer), que es una metodología establecida y ampliamente utilizada para organizar CSS. Esto facilita a los desarrolladores comprender cómo se organizan los estilos y cómo modificarlos para adaptarlos a sus necesidades específicas.

  • Sin depender de bibliotecas de terceros: una de las ventajas de los componentes principales es que no dependen de las bibliotecas JavaScript de terceros, incluidas JQuery y Underscore. Esto hace que los componentes sean más rápidos y livianos, así como más fáciles de integrar en una implementación de AEM existente.

  • Centrarse en el rendimiento y la accesibilidad: los componentes principales se crean teniendo en cuenta el rendimiento y la accesibilidad, lo que se refleja en sus altas puntuaciones de Google Lighthouse y Web Vitals. Esto facilita a los desarrolladores la creación de páginas web accesibles y de alto rendimiento, que es cada vez más importante en el panorama digital actual.

  • Componentes de formulario en plantillas y temas de Sites 30: los componentes principales son compatibles con los componentes de formulario de la plantilla y los temas de Sites 30, lo que facilita a los desarrolladores la creación y personalización de formularios dentro de AEM.

  • Mayor facilidad para aplicar estilos: es más fácil aplicar estilos a los componentes principales que sus componentes de base equivalentes. El proceso de creación del tema es similar al de Sites, con la capacidad de heredar el mismo tema/CSS de la página principal de Sites. Además, el modelo BEM para aplicar estilo facilita la comprensión y modificación de los estilos.

  • Accesibilidad: los componentes principales de formularios adaptables admiten normas y directrices de accesibilidad para garantizar que las personas con discapacidades puedan utilizar los formularios, incluidas aquellas personas que utilizan tecnologías de asistencia como lectores de pantalla.

  • Versiones: puede crear y administrar varias versiones de formularios adaptables basados en componentes principales, participar en debates de colaboración con comentarios y adjuntar anotaciones a componentes de formulario específicos, lo que mejora la experiencia general de creación de formularios.

Componentes disponibles: desglose por tipo de componente

La versión actual de AEM Forms tiene los siguientes componentes principales, Componentes de base, y Componentes de bloque de formulario (Edge Delivery Services).

Componentes
Componentes de base
Componentes principales
Componentes de bloque de formulario
Información adicional
Bloque de Adobe Sign
✔️
La integración de Adobe Sign solo está disponible en los componentes de base.
Acordeón
✔️
✔️
Para los componentes de base, puede configurar el diseño de acordeón en las propiedades del componente de panel.
Fragmento de formulario adaptable
✔️
✔️
Para los componentes de base, puede añadir un fragmento desde las propiedades de un explorador de recursos.
reCAPTCHA de formulario adaptable
✔️
✔️
✔️
Para los componentes de base, utilice el componente Captcha para añadir Google reCaptcha a un formulario.
Botón
✔️
✔️
✔️
Gráfico
✔️
Casilla de verificación
✔️
✔️
Grupo de casillas de verificación
✔️
✔️
✔️
Para los componentes de base, utilice el componente de casilla de verificación para añadir varias casillas de verificación
Campo de introducción de fecha
✔️
Para los componentes principales, utilice el componente Selector de fecha. También puede añadir componentes independientes cuadro de texto o cuadro numérico para capturar el día, el mes y el año.
Selector de fecha
✔️
✔️
✔️
Lista desplegable
✔️
✔️
✔️
Correo electrónico
✔️
✔️
✔️
Archivo adjunto
✔️
✔️
✔️
Lista de archivos adjuntos
✔️
Pie de página
✔️
✔️
✔️
Marcador de nota al pie
✔️
Contenedor del formulario
✔️
✔️
✔️
Para los componentes de base, utilice el componente Panel raíz.
Título del formulario
✔️
✔️
Para los componentes de base, utilice el componente de título.
hCaptcha
✔️
✔️
Para componentes de base, puede conectar sus formularios adaptables con hCaptcha para formularios basados en componentes de base.
Encabezado
✔️
✔️
✔️
Pestañas horizontales
✔️
✔️
Para los componentes de base, puede configurar el diseño de las pestañas en la parte superior (pestañas horizontales) de las propiedades de los componentes del panel.
Imagen
✔️
✔️
✔️
Botón Siguiente
✔️
✔️
Utilice el componente de asistente para los botones siguiente y anterior para desplazarse entre varios paneles.
Cuadro numérico
✔️
✔️
✔️
Stepper numérico
✔️
Panel
✔️
✔️
✔️
Teléfono
✔️
✔️
✔️
Botón Anterior
✔️
✔️
Utilice el componente de asistente para los botones siguiente y anterior para desplazarse entre varios paneles.
Grupo de botones de opción
✔️
✔️
✔️
Botón Restablecer
✔️
✔️
✔️
Firma manuscrita
✔️
Separador
✔️
Usar el componente Separador de WCM
Botón Enviar
✔️
✔️
✔️
Paso de resumen
✔️
Interruptor
✔️
✔️
Tabla
✔️
Términos y condiciones
✔️
✔️
Texto
✔️
✔️
✔️
Cuadro de texto
✔️
✔️
✔️
Turnstile Captcha
✔️
Turnstile Captcha solo está disponible en los componentes de base.
Pestañas verticales
✔️
✔️
Para los componentes de base, puede configurar el diseño de las pestañas a la izquierda (pestañas verticales) en las propiedades de los componentes del panel
Asistente
✔️
✔️
✔️
Para los componentes de base, puede configurar el diseño del asistente en las propiedades de los componentes del panel
NOTE
  • Además de los componentes enumerados anteriormente, el bloque de formularios admite todos los Tipos de entrada HTML5 y área de texto como componentes.
  • ¿Necesita un componente no enumerado anteriormente? Solicítelo por correo electrónico a aem-forms-ea@adobe.com desde su dirección oficial.

Editor formularios de fácil uso

El editor de los formularios adaptables basado en componentes principales es similar al que ya utiliza para crear páginas de AEM Sites. Esto es lo que obtiene:

  • Elementos y configuración de IU conocidos: al configurar propiedades para componentes de formulario, verá que el cuadro de diálogo de propiedades tiene el mismo aspecto que el que utiliza para los componentes principales de WCM. Esto hace que sea más rápido encontrar las opciones que necesita. Al igual que los componentes principales de WCM, para los componentes de formulario, el cuadro de diálogo de propiedades aparece en el centro del editor con pestañas claras que separan las opciones básicas y avanzadas, el texto de ayuda y la información de accesibilidad, todo en un formato de pestañas para facilitar la navegación.

  • Editor de reglas: puede añadir lógica y características dinámicas a los formularios sin tener que escribir código. Puede usar el editor de reglas integrado para:

    • Mostrar u ocultar campos basados en las opciones del usuario
    • Habilitar o deshabilitar un objeto
    • Establecer un valor para un objeto
    • Realizar cálculos
    • Establecer la propiedad de un objeto
    • Validar la entrada de datos
    • Invocar un servicio (llamar a la funcionalidad externa)
    • Usar funciones integradas (funciones predefinidas para tareas comunes)
    • Utilizar funciones personalizadas (su propio código para necesidades específicas)
    • Validar campos y paneles (garantizar que los datos cumplen los requisitos)
    • Validar el valor de un objeto
    • Ejecutar funciones para calcular el valor de un objeto
    • Invocar un servicio del modelo de datos de formulario (FDM) y realizar una operación
    • Añadir estilos de forma dinámica (cambiar el aspecto según las condiciones)
    • Crear otras reglas (acciones en cadena y lógica)
    • y muchos más.

    El editor de reglas no tiene el editor de código. Puede utilizar funciones personalizadas para añadir su propio código para necesidades específicas al editor de reglas.

  • Rellenado previo de formularios: puede rellenar automáticamente determinados campos de un formulario con datos existentes cuando un usuario lo abra. Esto ahorra tiempo y esfuerzo a los usuarios al eliminar la necesidad de introducir manualmente información que podría estar disponible. El editor de componentes principales proporciona un servicio de rellenado previo OOTB para rellenar campos de formulario con la ayuda de un modelo de datos de formulario. También puede crear servicios de rellenado previo personalizados para escenarios más complejos.

  • Documento de registro (DoR): un documento de registro (DoR) hace referencia a una representación formal e imprimible de los datos enviados a través del formulario. Sirve como registro permanente de la información que ha introducido un usuario, y proporciona una instantánea de los datos enviados en un formato fácil de usar, normalmente un documento PDF. Puede utilizar el editor para configurar fácilmente una plantilla personalizada o utilizar una plantilla OOTB para generar un DoR.

  • Modelo de datos de formulario: un modelo de datos de formularios adaptables (FDM) actúa como un puente entre sus formularios adaptables y sus fuentes de datos. Básicamente, define la estructura y organización de los datos que los formularios recopilan y con los que interactúan. Puede utilizar el editor para conectar fácilmente el formulario con un modelo de datos de formularios (FDM).

  • Envíos de formularios: por envío de formularios se entiende el proceso por el que los usuarios completan y envían sus formularios cumplimentados. Esto activa una serie de acciones definidas dentro de la configuración del formulario, que finalmente conducen al almacenamiento o procesamiento de los datos enviados. El editor de formularios adaptables ofrece una variedad de opciones para configurar los envíos de formularios. Algunas de las acciones de envío comunes son:

  • Componentes principales de formularios adaptables en el editor de páginas de Sites: puede habilitar y utilizar los componentes principales de formularios adaptables en el editor de páginas de AEM y Fragmentos de experiencias de AEM para crear directamente una experiencia de captura de datos junto con la creación de una página de Sites.

    embed

    https://video.tv.adobe.com/v/3419284?quality=12&learn=on

Habilitar los componentes principales de los formularios adaptables

Al habilitar los componentes principales de Formularios adaptables en AEM Forms as a Cloud Service, puede empezar a crear, publicar y ofrecer componentes principales basados en Formularios adaptables y Formularios sin encabezado mediante las instancias de Cloud Service de AEM Forms en varios canales. Para obtener instrucciones detalladas sobre la habilitación de los componentes principales de un Formulario adaptable, consulte Habilitar los componentes principales de Formularios adaptables en AEM Forms as a Cloud Service y en el entorno de desarrollo local.

Los componentes principales de formularios adaptables tienen los siguientes requisitos:

Versión de AEM
Complementos para AEM Forms
Componentes principales de formularios adaptables
AEM as a Cloud Service
Forms: inscripción digital
Versión 2.0.10+
AEM 6.5
Complemento para Formularios
Versión 1.1.12+

Si la versión del SDK de AEM Cloud Service es anterior a 2023.02.0, asegúrese de que tiene el indicador prerelease habilitado en su entorno, ya que los componentes principales de los Formularios adaptables formaban parte de la versión preliminar anterior a la versión 2023.02.0.

Crear un formulario adaptable basado en componentes principales

Puede realizar las siguientes acciones en los entornos de AEM Forms as a Cloud Service o AEM 6.5 Forms:

Acción
Versión de AEM Forms
Creación un formulario adaptable independiente
AEM Forms as Cloud Service
Crear un formulario adaptable en una página de AEM Sites
AEM 6.5 Forms, AEM Forms as Cloud Service
Creación de un formulario adaptable en un fragmento de experiencia de AEM
AEM 6.5 Forms, AEM Forms as Cloud Service
Conversión de un formulario adaptable en un fragmento de experiencia
AEM 6.5 Forms, AEM Forms as Cloud Service
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c