Crear componentes principales basados en Forms adaptable creating-an-adaptive-form-core-components

Adobe recomienda utilizar los componentes principales para añadir Formularios adaptables a una página de AEM Siteso para crear Formularios adaptables independientes.

Versión
Vínculo del artículo
AEM as a Cloud Service
Haga clic aquí
AEM 6.5
Este artículo

Los formularios adaptables le permiten crear formularios que son atractivos, receptivos, dinámicos y adaptables. AEM Forms proporciona una interfaz de usuario fácil de usar para las empresas que crea rápidamente Forms adaptable. La IU de ofrece una navegación rápida por las pestañas para seleccionar fácilmente plantillas, estilos, campos y opciones de envío preconfiguradas para crear un formulario adaptable.

Antes de empezar, obtenga información sobre el tipo de componentes de Forms disponibles para usted:

  • Componentes principales de formularios adaptables: son componentes estandarizados de captura de datos. Estos componentes proporcionan funcionalidades de personalización, un tiempo de desarrollo reducido y costes de mantenimiento más bajos para sus experiencias de inscripción digital. Un desarrollador puede personalizar y aplicar estilo fácilmente a estos componentes. Adobe recomienda aprovechar estos componentes modernos y ampliables para desarrollar formularios adaptables.

  • Componentes de base de formularios adaptables: estos son componentes clásicos (antiguos) de captura de datos. Puede seguir utilizándolos para editar su Formulario adaptable basado en componentes de base existentes. Si está creando formularios, el Adobe recomienda usar Componentes principales de Forms adaptable para crear un Forms adaptable.

Requisitos previos

Para crear un formulario adaptable, es necesario lo siguiente:

  • Habilite los componentes principales adaptables de Forms AEM para su entorno: Se requiere la versión 41 o posterior del proyecto Archetype para habilitar los componentes principales para su entorno. Al habilitar los componentes principales para su entorno, se agregarán a su entorno la plantilla Forms adaptable (componente principal) y el tema Lienzo.

  • Una plantilla de formulario adaptable: Una plantilla ofrece una estructura básica y define el aspecto (diseños y estilos) de un formulario adaptable. Tiene componentes con formato previo que contienen determinadas propiedades y estructura de contenido. También ofrece opciones para definir una temática y una acción de envío. La temática define la apariencia, y la acción de envío define la acción que debe realizarse al enviar un Formulario adaptable. También puede implementar plantillas de muestra en su entorno. Esto le ayuda a empezar a crear formularios rápidamente.

    note note
    NOTE
    Si no tiene la plantilla de Formularios adaptables (componente principal) en su entorno, Habilite los componentes principales de formularios adaptables para su entorno. Al habilitar los componentes principales para su entorno, la plantilla de Formularios adaptables (componente principal) se agrega al entorno.
  • Una temática de formulario adaptable: Una temática contiene detalles de estilo para los componentes y paneles. Los estilos incluyen propiedades como colores de fondo, colores de estado, transparencia, alineación y tamaño. Al aplicar una temática, el estilo especificado se refleja en los componentes correspondientes. El tema Canvas se agrega de manera predeterminada al habilitar los componentes principales para su entorno. Puedes descargar y personalizar los temas estándar. Para temas predeterminados, puede implementar temas de ejemplo en su entorno. Esto le ayudará a dar estilo a los formularios y le proporcionará una estructura base para crear o personalizar una temática según sus necesidades empresariales.

  • Permisos: añada sus usuarios al grupo forms-users. Los miembros del grupo forms-users tienen permisos para crear un formulario adaptable. Para obtener una lista detallada de los formularios y grupos de usuarios específicos, consulte Grupos y permisos.

Creación de un formulario adaptable create-an-adaptive-form

  1. AEM Inicie sesión en su instancia de autor local.

  2. Introduzca sus credenciales en la página de inicio de sesión de Experience Manager. Cuando haya iniciado sesión, en la esquina superior izquierda, seleccione  Adobe Experience Manager > Formularios > Formularios y documentos.

  3. Seleccione Crear > Crear Forms adaptable.

  4. Seleccione una plantilla de componentes principales de Forms adaptable y haga clic en Siguiente.

  5. Aparecerá Agregar propiedades. Especifique los valores para los siguientes campos de propiedad. Los campos Título y Nombre son obligatorios:

    • Título: Especifica el nombre para mostrar del formulario. El título le ayuda a identificar el formulario en la interfaz de usuario de Experience Manager Forms.
    • Nombre: Especifica el nombre del formulario. Se crea un nodo con el nombre especificado en el repositorio. A medida que empieza a escribir un título, el valor del campo de nombre se genera automáticamente. Puede cambiar el valor sugerido. El campo de nombre solo puede incluir caracteres alfanuméricos, guiones y guiones bajos.
    • Descripción: especifica la información detallada sobre el formulario.
    • Biblioteca cliente de temáticas: Especifica el tema de un formulario adaptable. De manera predeterminada, el tema adaptiveform.theme.canvas3 está seleccionado. También puede elegir una temática diferente del menú desplegable Biblioteca cliente de temáticas.
    • Contenedor de configuración: Define una ubicación donde se almacenan los archivos de configuración para Forms adaptable. Estos archivos de configuración contienen ajustes y propiedades relacionados con el comportamiento y el aspecto de Adaptive Forms.
    • Etiquetas: Especifica etiquetas para identificar de forma exclusiva el formulario adaptable. Las etiquetas ayudan a buscar en el formulario. Para crear etiquetas, escriba nuevos nombres de etiqueta en el cuadro Etiquetas.
  6. Seleccione Crear. Se creará un formulario adaptable y aparecerá un cuadro de diálogo para abrir el formulario y editarlo.

  7. Seleccione Editar para abrir el formulario recién creado en una pestaña nueva. El formulario se abrirá para editarlo y mostrará el contenido disponible en la plantilla. También muestra la barra lateral para personalizar el formulario recién creado.

Utilice los componentes principales de Forms adaptable para crear el formulario

Después de abrir el formulario para editarlo, puede utilizar los componentes principales adaptables de Forms disponibles para agregar campos de formulario al formulario. Puede arrastrar y soltar o utilizar la opción + [insertar componente] para agregar estos componentes a un formulario. AEM Consulte la documentación de componentes principales de para obtener más información sobre los componentes principales de Forms adaptables disponibles. También puede visitar https://aemcomponents.dev/ para ver los componentes principales disponibles en acción.

Configuración de una acción de envío para un formulario adaptable configure-submit-action-for-form

Una acción de envío permite elegir el destino de los datos capturados mediante un formulario adaptable. Se activa una acción de envío cuando un usuario hace clic en el botón Enviar en un formulario adaptable. Los formularios adaptables incluyen algunas acciones de envío listas para usar. También puede ampliar las acciones de envío predeterminadas para crear su propia acción de envío personalizada. Para configurar una acción de envío para el formulario:

  1. Abra el Explorador de contenido y seleccione el componente Contenedor de guía del formulario adaptable.

  2. Haga clic en el icono de propiedades del contenedor de guía Propiedades de guía . Se abre el cuadro de diálogo Contenedor de formulario adaptable.

  3. Abra la pestaña Envío.

    Haga clic en el icono Llave inglesa para abrir el cuadro de diálogo Contenedor de formulario adaptable y configurar una acción de envío

  4. Seleccione y configure una acción de envío según sus necesidades. Para obtener información detallada sobre las acciones de envío, consulte Acción de envío del formulario adaptable

Redireccionamiento del usuario a una página o mostrar un mensaje de agradecimiento al enviar el formulario

Al enviar un formulario, puede redirigir al usuario a otra página web o a un mensaje. Para redirigir al usuario o configurar el mensaje de agradecimiento:

  1. Abra el Explorador de contenido y seleccione el componente Contenedor de guía del formulario adaptable.

  2. Haga clic en el icono de propiedades del contenedor de guía Propiedades de guía . Se abre el cuadro de diálogo Contenedor de formulario adaptable.

  3. Abra la pestaña Envío.

    Haga clic en el icono Llave inglesa para abrir el cuadro de diálogo Contenedor de formulario adaptable para configurar una página de redireccionamiento o un mensaje de agradecimiento

    • Para configurar una URL de redireccionamiento, por ejemplo, en la opción Enviar, seleccione la opción Redirigir a URL y examine y seleccione una página de AEM Sites, o proporcione una URL de una página externa.

    • Para configurar un mensaje personalizado o de agradecimiento, por ejemplo, en la opción Enviar, seleccione la opción Mostrar mensaje y proporcione un mensaje en la casilla Contenido del mensaje. Es un cuadro de texto enriquecido, puede utilizar la opción de pantalla completa para ver todos los elementos de texto enriquecido disponibles.

Configuración de un esquema o un modelo de datos de formulario para un formulario adaptable configure-schema-or-data-model-for-form

Puede utilizar el modelo de datos del formulario para conectar un formulario a una fuente de datos para enviar y recibir datos en función de las acciones del usuario. También puede conectar un formulario a un esquema JSON para recibir los datos enviados en un formato predefinido. En función del requisito, conecte el formulario a un esquema JSON o a un modelo de datos de formulario:

Configuración de un esquema JSON o un modelo de datos de formulario para su formulario

Para configurar un esquema JSON o un modelo de datos de formulario para su formulario:

  1. Abra el Explorador de contenido y seleccione el componente Contenedor de guía del formulario adaptable.

  2. Haga clic en el icono de propiedades del contenedor de guía Propiedades de guía . Se abre el cuadro de diálogo Contenedor de formulario adaptable.

  3. Abra la pestaña Modelo de datos.

    Haga clic en el icono Llave inglesa para abrir el cuadro de diálogo Contenedor de formulario adaptable para configurar un esquema JSON o un modelo de datos de formulario

  4. Seleccione y configure un esquema JSON o un modelo de datos de formulario según sus necesidades:

    • Al seleccionar la variable Modelo de formulario, utilice la opción Seleccionar modelo de datos de formulario para seleccionar un modelo de datos de formulario preconfigurado.
    • Al seleccionar la opción Esquema, utilice la opción Esquema para seleccionar un esquema JSON para el formulario.
  5. Haga clic en Listo.

NOTE
Puede editar el esquema JSON o el modelo de datos de formulario para un formulario adaptable mediante las propiedades del contenedor de la guía.

Configuración de un servicio de rellenado previo configure-prefill-service-for-form

Puede utilizar el servicio de cumplimentación previa para rellenar automáticamente los campos de un formulario adaptable utilizando los datos existentes. Cuando un usuario abre un formulario, los valores de esos campos ya han sido rellenados. Puede hacer lo siguiente:

Utilización del servicio de rellenado previo del modelo de datos de formulario para rellenar previamente los campos de un formulario adaptable fdm-prefill-service

Puede utilizar el servicio de rellenado previo del modelo de datos de formulario para rellenar previamente los campos de un formulario adaptable mediante el uso de un modelo de datos de formulario o un servicio de rellenado previo personalizado. El servicio de rellenado previo del modelo de datos de formulario utiliza el Obtener servicio del modelo de datos de formulario configurado para recuperar datos. Para utilizar el servicio de rellenado previo del modelo de datos de formulario de un formulario adaptable, haga lo siguiente:

  1. Abra el Explorador de contenido y seleccione el componente Contenedor de guía del formulario adaptable.
  2. Haga clic en el icono de propiedades del contenedor de guía Propiedades de guía . Se abre el cuadro de diálogo Contenedor de formulario adaptable.
  3. Haga clic en el icono de las Propiedades del contenedor del formulario adaptable . Se abre el cuadro de diálogo Contenedor de formulario adaptable para configurar modelos de datos.
    Haga clic en el icono Llave inglesa para abrir el cuadro de diálogo Contenedor de formulario adaptable para configurar una página de redireccionamiento o un mensaje de agradecimiento
  4. Seleccionar modelo de datos de formulario. Abra la pestaña Básico. En el servicio de rellenado previo, seleccione Servicio de rellenado previo del modelo de datos de formulario.
  5. Haga clic en Listo. El formulario adaptable ahora está configurado para utilizar el rellenado previo del modelo de datos de formulario. Ahora puede usar el editor de reglas para crear reglas para rellenar previamente los campos del formulario.

¿Cómo se cambia el nombre a un formulario adaptable de AEM? rename-an-AEM-Adaptive-Form

Para cambiar el nombre de un formulario adaptable, realice los siguientes pasos:

  1. Seleccione un formulario adaptable en la interfaz de usuario de AEM Forms.

  2. Haga clic en Propiedades situado en el carril superior.

    Propiedades

  3. Cambie el nombre del formulario en la pestaña Título, como se muestra en la siguiente imagen.

  4. Haga clic en Guardar y cerrar.

    Cambiar el nombre de un formulario adaptable de AEM

Siguientes pasos

Ver también

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2