Funciones de diseño de los formularios adaptables layout-capabilities-of-adaptive-forms
Adobe Experience Manager (AEM) 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.
Conocimientos previos requeridos prerequisite-knowledge
Antes de familiarizarse con las diferentes funciones de diseño de los formularios adaptables, lea los siguientes artículos para obtener más información sobre los formularios adaptables.
Introducción a la creación de formularios
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 la anchura 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 siguiente ubicación:
/libs/fd/af/layouts.
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.
Figura: Lista de diseños de panel en formularios adaptables
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.
Figura: Un formulario con presentación interactiva, tal como se ve en una pantalla pequeña
Figura: Un formulario con presentación interactiva, tal como se ve en una pantalla grande
Asistente: un formulario con varios pasos que se muestra paso por paso wizard-a-multi-step-form-showing-one-step-at-a-time
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 Panel adaptive form 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)
Figura: Expresión de finalización de pasos en la presentación del Asistente para un formulario de varios pasos
Figura: Un formulario con el Asistente
Diseño de acordeón layout-for-accordion-design
Con este diseño, puede colocar el componente Panel adaptive form 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 final en el título del panel minimizado.
Figura: Paneles repetibles creados con el diseño Acordeón
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 Panel adaptive form en un panel con navegación basada en pestañas. Las pestañas se colocan a la izquierda del contenido del panel.
Figura: Pestañas que aparecen a la izquierda de un 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 Panel adaptive form en un panel con navegación basada en pestañas. Las pestañas se colocan sobre el contenido del panel.
Figura: Pestañas que aparecen en la parte superior de un 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.
Figura: Lista de diseños móviles en formularios adaptables
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.
Figura: Presentaciones móviles con títulos de panel en los encabezados de formulario
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.
Figura: Presentaciones móviles sin títulos de panel en los encabezados de formulario
Diseños de barra de herramientas toolbar-layouts
El diseño de barra de herramientas controla la colocación y la visualización de cualquier botón de acción que agregue a los formularios adaptables. El diseño se puede agregar en el nivel de formulario o de panel.
Figura: Una lista de diseños de barra de herramientas en formularios adaptables
Los diseños de barra de herramientas están disponibles en la ubicación /libs/fd/af/layouts/toolbar. Los formularios adaptables proporcionan los siguientes diseños de barra de herramientas de forma predeterminada.
Diseño predeterminado para la barra de herramientas default-layout-for-toolbar
Este diseño está seleccionado como el diseño predeterminado cuando se añaden botones de acción a un formulario adaptable. Al seleccionar este diseño, se muestra el mismo diseño tanto para los equipos de escritorio como para los dispositivos móviles.
Además, puede agregar varias barras de herramientas que contengan botones de acción configurados con este diseño. Un botón de acción está asociado a un control de formulario. Puede configurar las barras de herramientas para que aparezcan antes o después de un panel.
Figura: Vista predeterminada de la barra de herramientas
Diseño fijo móvil para la barra de herramientas mobile-fixed-layout-for-toolbar
Seleccione este diseño para proporcionar diseños alternativos para los equipos de escritorio y los dispositivos móviles.
En el caso del diseño de escritorio, puede agregar botones de acción utilizando una serie de etiquetas específicas. Solo se puede configurar una barra de herramientas con este diseño. Si hay más de una barra de herramientas configurada con este diseño, se produce una superposición en los dispositivos móviles y se muestra únicamente una barra de herramientas. Por ejemplo, puede colocar una barra de herramientas en la parte inferior o superior del formulario, o antes o después de los paneles.
En el caso del diseño móvil, puede añadir botones de acción mediante iconos.
Figura: Diseño fijo móvil para la barra de herramientas