Funciones de diseño de Forms adaptable

Adobe Experience Manager permite crear Forms adaptable fácil de usar que ofrezca experiencias dinámicas a los usuarios finales. La presentación del formulario controla cómo se muestran los elementos o los componentes en 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 dentro 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 colocación de los botones Acción en la barra de herramientas o la barra de herramientas del panel en un formulario.

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

Para cambiar la presentación de un formulario adaptable, utilice el modo de creación en Experience Manager.

Diseño de panel

Un autor de formularios puede asociar una presentación a cada panel de un formulario adaptable, incluido el panel raíz.

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

Lista de diseños de panel para el panel raíz de un formulario adaptable

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

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

Con este diseño, puede colocar varias Formulario adaptable del panel componentes uno tras otro dentro del panel.

Un formulario con presentación interactiva, tal como se ve en una pantalla pequeña

Asistente

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

Utilice la variable Formulario adaptable del panel para proporcionar navegación paso a paso dentro de un panel. Cuando se utiliza este diseño, el usuario solo pasa al siguiente paso una vez completado el paso actual

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

Un formulario con presentación de asistente

Acordeón

Con este diseño, puede colocar la variable Formulario adaptable del panel en un panel con navegación de estilo de acordeón. Con este diseño, también puede 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 final en el título del panel minimizado.

Paneles repetibles con diseño de acordeón en Forms adaptable

Presentación en fichas: las pestañas aparecen a la izquierda ​

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

En la presentación Tabulación, las pestañas aparecen a la izquierda

Pestañas que aparecen a la izquierda de un panel

Presentación en fichas: las pestañas aparecen en la parte superior

Con este diseño, puede colocar la variable Formulario adaptable del panel Componente de un panel con navegación por fichas. Las pestañas se colocan sobre el contenido del panel.

Diseño en fichas en Adaptive Forms con pestañas en la parte superior

Presentaciones móviles

Los diseños móviles permiten 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 por formularios. La aplicación de un diseño para móvil proporciona una única presentación para todo el formulario.

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

Los diseños móviles están disponibles en /libs/fd/af/layouts/mobile/ ubicación. De forma predeterminada, los siguientes diseños móviles están disponibles en Forms adaptable.

Lista de diseños móviles en Forms adaptable

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

Cuando se utiliza una presentación móvil, el menú de formulario, para acceder a varios paneles de formulario, está disponible pulsando aem6forms_form_menu icono.

Presentación 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ú de navegación y la barra de navegación. Este diseño también incluye los iconos Siguiente y Anterior para la navegación.

Presentaciones móviles con títulos de panel en los encabezados de formulario

Presentación sin títulos de panel en el encabezado del formulario ​

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

Presentaciones móviles sin títulos de panel en los encabezados de formulario

En esta página