Funciones de diseño de los formularios adaptables layout-capabilities-of-adaptive-forms

Adobe recomienda utilizar la captura de datos moderna y ampliable Componentes principalespara crear un nuevo formulario adaptableo añadir formularios adaptables a páginas de AEM Sites. Estos componentes representan un avance significativo en la creación de formularios adaptables, lo que garantiza experiencias de usuario impresionantes. Este artículo describe un enfoque más antiguo para crear Formularios adaptables con 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 types-of-layouts

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 panel-layout

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 responsive-everything-on-one-page-without-navigation-br

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 wizard

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 layout-for-accordion-design

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 tabbed-layout-tabs-appear-on-the-left

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 tabbed-layout-tabs-appear-on-the-top

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 mobile-layouts

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 layout-with-panel-titles-in-the-form-header

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 layout-without-panel-titles-in-the-form-header

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.

Consulte también see-also