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.
Características features
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).
- 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
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:
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: