Funciones de diseño de los formularios adaptables

Adobe recomienda utilizar la captura de datos moderna y ampliable Componentes principales para crear un nuevo Forms adaptable o adición de Forms adaptable a páginas de AEM Sites. Estos componentes representan un avance significativo en la creación de Forms adaptable, lo que garantiza experiencias de usuario impresionantes. Este artículo describe un enfoque más antiguo para crear Forms adaptable mediante componentes de base.

Adobe Experience Manager permite crear formularios adaptables fáciles de usar que ofrecen experiencias dinámicas a los usuarios finales. El diseño del formulario controla cómo se muestran los elementos o los componentes de un formulario adaptable.

Tipos de diseños

Un formulario adaptable proporciona los siguientes tipos de diseños:

Diseño de panel: controla cómo se muestran los elementos o componentes de un panel en un dispositivo.

Diseño móvil: controla la navegación de un formulario en un dispositivo móvil. Si el ancho del dispositivo es de 768 píxeles o más, el diseño se considera un diseño para móviles y se optimiza para un dispositivo móvil.

Diseño de barra de herramientas: controla la ubicación de los botones de acción en la barra de herramientas o la barra de herramientas del panel de un formulario.

Todos estos diseños de panel se definen en la ubicación /libs/fd/af/layouts.

Para cambiar el diseño de un formulario adaptable, utilice el modo Autor de Experience Manager.

Diseño de panel

Un autor de formularios puede asociar un diseño a cada uno de los paneles de un formulario adaptable, incluido el panel raíz.

Los diseños de panel están disponibles en la ubicación /libs/fd/af/layouts/panel. Pulse el panel y seleccione para ver sus propiedades.

Adaptable: todo en una página sin navegación

Utilice este diseño de panel para crear un diseño adaptable que se ajuste al tamaño de pantalla del dispositivo sin necesidad de utilizar ningún tipo de navegación especializada.

Con este diseño, puede colocar varios componentes Formulario adaptable con panel uno tras otro en el panel.

Asistente

Utilice este diseño de panel para proporcionar navegación guiada dentro de un formulario. Por ejemplo, utilice este diseño cuando desee capturar información obligatoria en un formulario y guiar a los usuarios paso a paso.

Utilice el componente Formulario adaptable con panel para proporcionar navegación paso a paso dentro de un panel. Cuando se utiliza este diseño, el usuario solo puede pasar al siguiente paso una vez que ha completado el paso actual.

window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)

Acordeón

Con este diseño, puede colocar el componente Formulario adaptable con panel en un panel con navegación de estilo acordeón. Este diseño también permite crear paneles repetibles. Los paneles repetibles permiten agregar o quitar paneles de forma dinámica según sea necesario. Puede definir el número mínimo y máximo de veces que se repite un panel. Además, el título del panel se puede determinar dinámicamente en función de la información proporcionada en los elementos del panel.

La expresión de resumen se puede utilizar para mostrar los valores proporcionados por el usuario en el título del panel minimizado.

Diseño con pestañas: las pestañas aparecen a la izquierda

Con este diseño, puede colocar el componente Formulario adaptable con panel en un panel con navegación entre pestañas. Las pestañas se colocan a la izquierda del contenido del panel.

Las pestañas aparecen a la izquierda del panel

Diseño con pestañas: las pestañas aparecen en la parte superior

Con este diseño, puede colocar el componente Formulario adaptable con panel en un panel con navegación entre pestañas. Las pestañas se colocan sobre el contenido del panel.

Diseños móviles

Los diseños móviles proporcionan una navegación fácil de usar en los dispositivos móviles con pantallas relativamente más pequeñas. Los diseños móviles utilizan estilos con pestañas o de asistente para la navegación del formulario. La aplicación de un diseño para móvil proporciona un diseño único para todo el formulario.

Este diseño controla la navegación mediante una barra y un menú de navegación. La barra de navegación muestra los iconos < y > para indicar los pasos de navegación Siguiente y Anterior en el formulario.

Los diseños móviles están disponibles en la ubicación /libs/fd/af/layouts/mobile/. Los siguientes diseños móviles están disponibles en los formularios adaptables de forma predeterminada.

Seleccione la opción Agregar elementos navegables de diseño adaptable al menú móvil para ver las opciones navegables disponibles en un panel con el diseño móvil. Las opciones navegables solo están visibles si selecciona el diseño Adaptable para un panel.

Cuando se utiliza un diseño móvil, el menú del formulario está disponible para acceder a los diferentes paneles del formulario pulsando el icono .

Diseño con títulos de panel en el encabezado del formulario

Este diseño, como su nombre indica, muestra los títulos de los paneles junto con el menú y la barra de navegación. También incluye los iconos Siguiente y Anterior para la navegación.

Diseño sin títulos de panel en el encabezado del formulario

Este diseño, como su nombre indica, muestra únicamente el menú y la barra de navegación, sin títulos de panel. También incluye los iconos Siguiente y Anterior para la navegación.

Vea también

• Crear un formulario adaptable de AEM
• Agregar un formulario adaptable de AEM a la página de AEM Sites
• Aplicar temáticas a un formulario adaptable de AEM
• Añadir componentes a un formulario adaptable de AEM
• Usar el servicio Captcha en un formulario adaptable de AEM
• Generar la versión en PDF (DoR) de un formulario adaptable de AEM
• Traducir un formulario adaptable de AEM
• Habilitar Adobe Analytics para un formulario adaptable con el fin de hacer un seguimiento del uso del formulario
• Conectar el formulario adaptable a Microsoft SharePoint
• Conectar formularios adaptables a Microsoft Power Automate
• Conectar el formulario adaptable a Microsoft OneDrive
• Conectar el formulario adaptable al almacenamiento de Microsoft Azure Blob
• Conectar el formulario adaptable a Salesforce
• Uso de Adobe Sign en un formulario adaptable de AEM
• Agregar una nueva configuración regional para un formulario adaptable
• Enviar datos de formulario adaptable a una base de datos
• Enviar datos de formulario adaptable a un punto final REST
• Enviar datos de formulario adaptable al flujo de trabajo de AEM
• Utilizar el portal de Forms para ver una lista de Formularios adaptables de AEM en un sitio web de AEM