Introduction to authoring adaptive forms

Información general

Los formularios adaptables le permiten crear formularios atractivos, interactivos, dinámicos y adaptables. AEM Forms proporciona una interfaz de usuario intuitiva y componentes integrados para crear y trabajar con formularios adaptables. Puede elegir crear un formulario adaptable basado en un modelo o esquema de formulario o sin un modelo de formulario. Es importante elegir cuidadosamente el modelo de formulario que no sólo se adapte a sus necesidades sino que amplíe sus inversiones y recursos de infraestructura existentes. Puede elegir entre las siguientes opciones para crear un formulario adaptable:

  • Uso de un modelo de datos de formulario
    La integración de datos permite integrar entidades y servicios de orígenes de datos dispares en un modelo de datos de formulario que puede utilizar para crear formularios adaptables. Elija el modelo de datos de formulario si el formulario adaptable que está creando implica recuperar y escribir datos desde y hacia varios orígenes de datos.

  • Uso de una plantilla de formulario XDP Es un modelo de formulario ideal si tiene inversiones en formularios XFA o XDP. Proporciona una forma directa de convertir los formularios basados en XFA en formularios adaptables. Las reglas XFA existentes se conservan en los formularios adaptables asociados. Los formularios adaptables resultantes admiten construcciones XFA, como validaciones, eventos, propiedades y patrones.

  • El uso de una definición de Esquema XML (XSD) o de esquemas JSON Esquema XML y JSON representa la estructura en la que el sistema back-end de su organización produce o consume datos. Puede asociar el esquema a un formulario adaptable y utilizar sus elementos para agregar contenido dinámico al formulario adaptable. Los elementos del esquema estarán disponibles para su uso en la ficha Objetos del modelo de datos del navegador de contenido al crear formularios adaptables.

  • Uso de ninguno o sin un modelo de formulario

Los formularios adaptables creados con esta opción no utilizan ningún modelo de formulario. El XML de datos generado a partir de estos formularios tiene una estructura plana con campos y valores correspondientes.

Para obtener más información sobre la creación de un formulario adaptable, consulte Creación de un formularioadaptable.

IU de creación de formularios adaptable

La IU táctil para la creación de formularios adaptables es intuitiva y proporciona:

  • Funcionalidad de arrastrar y soltar
  • Componentes de formulario estándar
  • Repositorio integrado para recursos

Al crear un formulario adaptable nuevo o editar uno existente, se utilizan los siguientes elementos de la interfaz de usuario:

IU de creación de formularios adaptable

A. Barra lateral B. Barra de herramientas de página C. Página de formulario adaptable

La barra lateral permite

  • Consulte el contenido del formulario, como paneles, componentes, campos y presentación.

  • Edite las propiedades del componente.

  • Busque, vista y utilice recursos en el repositorio de AEM Digital Asset Management (DAM).

  • Añada componentes en el formulario.

    Barra lateral
    Haga clic para ampliar

A. Navegador de contenido B. Navegador de propiedades C. Navegador de recursos D. Navegador de componentes

La barra lateral comprende los siguientes exploradores:

  • Navegador de contenido

    En el navegador de contenido, puede ver

    • Objetos de formulario

      Muestra la jerarquía de objetos del formulario. El autor puede desplazarse a un componente de formulario específico tocando ese elemento en el árbol de objetos de formulario. El autor puede buscar objetos y reorganizarlos desde este árbol.

    • Objetos del modelo de datos

      Permite ver la jerarquía del modelo de formulario.

      Permite arrastrar y soltar elementos del modelo de formulario en el formulario adaptable. Los elementos agregados se convierten automáticamente en componentes de formulario mientras se conservan sus propiedades originales. Puede ver objetos del modelo de datos cuando el formulario utiliza esquema XML, esquema JSON o plantilla XDP.

  • Navegador de propiedades

    Permite editar las propiedades de un componente. Las propiedades cambian según un componente. Para ver las propiedades del contenedor de formulario adaptable:

    Seleccione un componente, toque campo > Contenedor de formulario adaptable y, a continuación, toque cmppr.

  • Navegador de recursos

    Segmenta distintos tipos de contenido, como imágenes, documentos, páginas, películas, etc.

  • Navegador de componentes

    Incluye componentes que se pueden utilizar para crear un formulario adaptable. Puede arrastrar componentes desde a un formulario adaptable para agregar elementos de formulario y configurar elementos agregados según los requisitos. En la tabla siguiente se describen los componentes enumerados en el navegador de componentes.

Componente Funcionalidad
Bloque de Adobe Sign Añade un bloque de texto con marcadores de posición para los campos que se van a rellenar al firmar con Adobe Sign.
Botón Añade un botón, que puede configurar para realizar acciones como guardar, restablecer, ir a continuación, ir anterior, etc.
Captcha Añade la validación de CAPTCHA mediante el servicio Google reCAPTCHA. Para obtener más información, consulte Uso de CAPTCHA en formulariosadaptables.
Gráfico Añade un gráfico que se puede utilizar en formularios y documentos adaptables para la representación visual de datos bidimensionales en paneles repetitivos y filas de tabla.
Casilla de verificación Añade una casilla de verificación.
Campo de introducción de fecha Utilice el componente Campo de entrada de fecha en el formulario para permitir que los clientes rellenen el día, el mes y el año por separado en tres cuadros. Puede personalizar el aspecto del componente y cambiar el formato de fecha. Por ejemplo, puede permitir que los clientes introduzcan fechas en formato MM/DD/AAAA o DD/MM/AAAA.
Selector de fecha Añade un campo de calendario para elegir una fecha.
Fragmento de documento Permite agregar componentes reutilizables de una correspondencia.
Grupo de fragmentos de documento Permite agregar un grupo de fragmentos de documento relacionados que puede utilizar en una plantilla de carta como una sola unidad.
Lista desplegable Añade una lista desplegable: selección única o múltiple
Correo electrónico

Añade un campo para capturar la dirección de correo electrónico. El componente Correo electrónico, de forma predeterminada, valida las direcciones de correo electrónico mediante la siguiente expresión regular.

^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$

Adjuntar archivo

Añade un botón que permite a los usuarios examinar y adjuntar documentos de apoyo a un formulario.

Nota: El componente Archivo adjunto admite un conjunto predefinido de formatos de archivo en formularios adaptables activados para Adobe Sign. Para obtener más información, consulte Formatos de archivoadmitidos.

Lista de archivos adjuntos Añade un campo que lista todos los archivos adjuntos cargados mediante el componente Archivo adjunto.
Pie de página
Añade el encabezado de página que generalmente incluye el logotipo de una empresa, el título del formulario y el resumen.
Encabezado Añade el pie de página que generalmente incluye información de copyright y vínculos a otras páginas.
Imagen Permite insertar una imagen.
Opción de imagen Permite a los clientes seleccionar una imagen para proporcionar información. Puede utilizar la información para proporcionar servicios personalizados a sus clientes.
Botón Siguiente Añade un botón para desplazarse al siguiente panel de un formulario.
Cuadro numérico Añade un campo para capturar valores numéricos
Stepper numérico Utilice Numeric Stepper en el formulario para permitir que los clientes introduzcan un valor numérico, que pueden aumentar o disminuir en función de un paso predefinido.
Panel

Añade un panel o subpanel.

También puede agregar un componente de panel desde la barra de herramientas del panel principal mediante el botón Añadir panel secundario. Del mismo modo, puede agregar una barra de herramientas específica del panel mediante el botón Añadir barra de herramientas del panel. Puede configurar la posición de la barra de herramientas del panel mediante el cuadro de diálogo Editar panel.

Cuadro de contraseña Añade un campo para capturar una contraseña.
Botón Anterior Añade un botón que los usuarios necesitan para volver a la página o panel anterior.
Botón de opción Añade los botones de radio.
Botón Restablecer Añade un botón para restablecer los campos del formulario.
Botón Guardar Añade un botón para guardar datos de formulario.
Firma manuscrita Añade un campo para capturar firmas de garabatos.
Separador Permite la segregación visual de paneles en el formulario.
Paso de firma Muestra la información proporcionada en el formulario y los campos de firma para que el usuario pueda verificarlo y firmarlo.
Texto Permite especificar texto estático.
Botón de envío Añade un botón de envío para enviar el formulario a la acción de envío configurada.
Paso de resumen Envía el formulario y muestra el texto de resumen que especifican los autores después de enviarlo.
Cambiar Añade un conmutador que realiza una acción de alternancia o de activación/desactivación. No puede agregar más de dos opciones en el componente Switch. Dado que un conmutador solo puede tener dos valores: Activado o Desactivado, no es obligatorio. Se guarda al menos un valor independientemente de la entrada del usuario.
Tabla Agrega una tabla que le permite organizar los datos en filas y columnas.
Teléfono

Añade un campo para capturar el número de teléfono. El componente Teléfono permite a los autores configurar uno de los siguientes tipos de números de teléfono. Cada tipo está asociado con una expresión regular predeterminada para la validación.

  • Type International es validado por ^[+][0-9]{0,14}$.
  • El tipo USPhoneNumber está validado por {'+1 ('999') '999-9999}.
  • El tipo UKPhoneNumber está validado por text{'+'99 999 999 9999}.
  • Tipo personalizado no proporciona un patrón de validación predeterminado. Toma el valor del último tipo de número de teléfono seleccionado. También puede especificar su propio patrón de validación personalizado.
Términos y condiciones
Añade un campo que los autores pueden utilizar para especificar los términos y condiciones que los usuarios deben revisar antes de rellenar el formulario.
Cuadro de texto

Añade un cuadro de texto en el que un usuario puede especificar la información requerida.

De forma predeterminada, el componente Cuadro de texto solo acepta texto sin formato. Puede habilitar un componente Cuadro de texto para aceptar Texto enriquecido. Un componente de texto enriquecido habilitado proporciona opciones para agregar encabezados, cambiar estilos de carácter (negrita, cursiva, subrayado de caracteres), crear listas ordenadas y sin ordenar, cambiar el fondo del texto y el color del texto, y agregar hipervínculos. Para habilitar el texto enriquecido para un cuadro de texto, habilite la opción Permitir texto enriquecido en las propiedades del componente.

Título Especifica un título para el formulario adaptable.
Paso de verificación

Añade un marcador de posición para mostrar el formulario cumplimentado para su verificación por el usuario.

Nota: El formulario adaptable que contiene el componente Verificar no admite usuarios anónimos. Además, no se recomienda utilizar el componente Verificar en un fragmento de formulario adaptable.

Prácticas recomendadas para trabajar con componentes

Algunas prácticas recomendadas y puntos clave que hay que recordar al trabajar con componentes de formularios adaptables son los siguientes:

  • Cada componente tiene propiedades asociadas que controlan su apariencia y funcionalidad. Para configurar las propiedades de un componente, toque el componente y cmppr para abrir las propiedades del componente en el navegador de propiedades.

  • Un componente se identifica con su nombre de elemento. Al tocar cmppr, puede cambiar el nombre del componente cambiando el valor del campo Nombre del elemento en el navegador de propiedades. El campo Nombre del elemento solo acepta letras, números, guiones (-) y subrayados (_). No se permiten otros caracteres especiales y el nombre del elemento debe comenzar con una letra.

  • Puede modificar la propiedad Título de un componente de formulario adaptable en línea en el editor de formularios sin necesidad de abrir el navegador Propiedades siempre que el título esté visible en el formulario. Para ello:

    1. Toque para seleccionar un componente que tenga una propiedad Title y cuya propiedad Ocultar título esté desactivada.
    2. Toque aem_6_3_edit para que el título se pueda editar.
    3. Modifique el título y toque la tecla de retorno o toque cualquier lugar fuera del componente para guardar los cambios. Toque la tecla Esc para descartar los cambios.
  • Algunos componentes de formulario adaptables como Correo electrónico y Teléfono incluyen patrones de validación predeterminados. Sin embargo, puede especificar la validación personalizada actualizando el campo Patrón de validación en el acordeón Patrones de las propiedades del componente. Consulte las descripciones de los componentes en la tabla anterior para obtener más información sobre las validaciones predeterminadas.

  • Los campos de formularios adaptables, como Cuadro numérico y Correo electrónico, se pueden configurar para incluir tipos de entrada HTML5 especializados. Cuando estos campos están enfocados en dispositivos móviles y tabletas, el teclado muestra alfabeto, números y caracteres específicos por adelantado que se utilizan comúnmente para introducir información en los campos. Ayuda a los usuarios a introducir información rápidamente sin tener que alternar entre conjuntos de caracteres en el teclado. Para permitir la introducción de datos especializados para un componente, active la casilla de verificación Usar número de tipo HTML en sus propiedades de componente.

  • Puede habilitar un componente Cuadro de texto para aceptar Texto enriquecido. Para habilitar el texto enriquecido para un cuadro de texto, active la casilla de verificación Permitir texto enriquecido en las propiedades del componente.

  • Puede activar los componentes Cuadro de texto, Correo electrónico y Teléfono para rellenar automáticamente los valores de campos como nombre, dirección, tarjeta de crédito, teléfono y correo electrónico a partir de la información almacenada en la configuración de relleno automático del explorador. Para habilitar esta función, seleccione Activar relleno automático en las propiedades del componente y seleccione un atributo de relleno automático. Cuando un usuario rellena un formulario adaptable, los valores se sugieren desde el perfil de relleno automático en el navegador o en función de los valores que el usuario haya rellenado anteriormente. Tenga en cuenta que el relleno automático funciona si la configuración de relleno automático está activada en el navegador del usuario.

  • Especifique los valores de los elementos Botón de radio y Casilla de verificación con {value}={text} formato en las propiedades del componente.

  • El componente Archivo adjunto, de forma predeterminada, permite al usuario adjuntar un solo archivo. Sin embargo, puede configurar las propiedades del componente para que admitan varios archivos adjuntos. Además, si un usuario adjunta varios archivos con el mismo nombre de archivo, los archivos adjuntos pueden provocar algunos problemas. Por lo tanto, se recomienda asociar un identificador único para cada archivo adjunto enviado en el envío del formulario. Para ello:

    1. En el servidor de AEM Forms, vaya a Adobe Experience Manager > Herramientas > Operaciones > Consola web.
    2. Toque y busque el servicio ​de configuración adaptable de Forms.
    3. En el cuadro de diálogo Servicio de configuración adaptable de Forms, active Convertir nombres de archivo en únicos. De forma predeterminada, está desactivado.
  • Para permitir que los usuarios adjunten un PDF mediante el navegador Safari, asegúrese de que application/pdf se agrega a la propiedad Tipos de archivo admitidos del componente Archivo adjunto. Los formularios adaptables creados con la versión anterior de AEM Forms pueden contener .pdf en lugar de application/pdf en la propiedad Tipos de archivo admitidos.

Para obtener más información sobre las prácticas recomendadas en formularios adaptables, consulte Prácticas recomendadas para trabajar con formulariosadaptables.

Nota

Los componentes de formulario adaptables no admiten idiomas de derecha a izquierda (RTL). Por ejemplo, hebreo.

Barra de herramientas de página

La barra de herramientas de la página de la parte superior ofrece opciones que le permiten previsualización del formulario, cambiar sus propiedades y editar la presentación del formulario. Puede realizar la previsualización del formulario al crearlo y realizar los cambios correspondientes. En la barra de herramientas de la página, verá:

  • Alternar panel lateral alternando panellateral: Permite mostrar u ocultar la barra lateral.

  • Información de página tema-opciones: Le permite vista de propiedades de página, publicar/cancelar la publicación de un formulario, inicio de un flujo de trabajo de formulario y abrir el formulario en la IU clásica.

  • ​Regla del emulador: Permite emular el aspecto del formulario para diferentes tamaños de visualización, como tablets y teléfonos.

  • Editar: Permite seleccionar otros modos como: Editar, Estilo, Desarrollador y Diseño.

    • Editar: Permite editar las propiedades del formulario y sus componentes. Por ejemplo, agregar un componente, soltar una imagen y especificar campos obligatorios.

    • Estilo: Permite aplicar estilo al aspecto de los componentes del formulario. Por ejemplo, en el modo de estilo, puede seleccionar un panel y especificar su color de fondo.

    • Desarrollador: Permite a un desarrollador:

      • Descubra de qué formularios se componen.
      • Depurar lo que está sucediendo donde y cuando, lo que a su vez ayuda a resolver problemas.
    • Diseño: Permite habilitar o deshabilitar componentes personalizados o componentes predeterminados que no aparecen en la barra lateral.

  • Previsualización: Permite realizar previsualizaciones del aspecto del formulario al publicarlo.

Component toolbar

Barra de herramientas de componentes en la IU táctil

Al seleccionar un componente, verá una barra de herramientas que le permite trabajar con él. Se obtienen opciones para cortar, pegar, mover y especificar propiedades de los componentes. Sus opciones son:

A.Configure: Al tocar Configurar, las propiedades de los componentes están visibles en la barra lateral. La configuración de estas propiedades permite personalizar la experiencia de captura de datos. Puede cambiar el nombre del elemento del componente, especificar el texto de la etiqueta en el campo Título del componente. El nombre del elemento permite capturar los valores que introducen los usuarios mediante el componente. En las propiedades del componente, se especifica el comportamiento del componente y se gestionan los datos introducidos por el usuario. Configure las propiedades en la barra lateral para capturar los datos de usuario y usarlos para un procesamiento posterior. Las propiedades del contenedor de formulario adaptable permiten especificar las bibliotecas de cliente, los diseños, las Temáticas, el Documento de la configuración de registro, la configuración de guardado, la configuración de envío y la configuración de metadatos.

B.Copy: Puede utilizar la opción de copia para copiar un componente y pegarlo en otros lugares del formulario. Al pegar un componente, el componente pegado obtiene un nuevo nombre de elemento pero conserva las propiedades del componente copiado.

C.Corte: Puede utilizar la opción de corte para mover un componente de un lugar a otro en el formulario adaptable.

D. Eliminar: Permite eliminar el componente del formulario.

E. Insertar: Permite insertar un componente sobre el componente seleccionado.

F. Pegar: Permite pegar el componente que se corta o copia mediante las opciones descritas anteriormente.

G. Editar reglas: Permite abrir el editor de reglas. Para obtener más información, consulte Editor de reglas.

H. Grupo: Permite seleccionar varios componentes si desea cortar, copiar o pegar varios componentes juntos.

I. Principal: Permite seleccionar el elemento principal de un componente. Por ejemplo, un campo de texto se encuentra dentro de una subsección, que reside en una sección. La sección reside en el panel raíz de la guía y el contenedor de formulario adaptable es el principal de un panel raíz de guía. Para un componente, puede ver todas las opciones con la jerarquía ordenada en la parte inferior.

Por ejemplo, si toca Principal para un cuadro de texto, puede ver:

  • Subsección
  • Sección
  • guideRootPanel
  • Contenedor de formulario adaptable

J. Otros: Proporciona más opciones para trabajar con el componente seleccionado.

  • Expresión SOM de vista
  • Guardar un panel como fragmento (solo para paneles)
  • Añadir panel secundario (solo para paneles)
  • Añadir barra de herramientas del panel (solo para paneles)
  • Reemplazar (no para paneles)

Adaptive form page

La página de formulario adaptable es el formulario real. Es como cualquier otra página WCM modelada como componente WCM cq:Page . La siguiente imagen muestra la estructura de contenido de un formulario adaptable típico.

Estructura de contenido de una página WCM de formulario adaptable

La estructura de contenido suele contener los siguientes componentes principales:

  • guideContainer: Raíz de un formulario adaptable, que se marca como Inicio de un formulario adaptable en la interfaz de usuario del formulario adaptable. En este componente, puede especificar:

    • Diseño móvil del formulario adaptable: Define el aspecto del formulario en dispositivos móviles.
    • Página de agradecimiento: Define la página a la que se redirige al usuario después de enviar el formulario.
    • Enviar acción: Define cómo se procesa el formulario en el servidor una vez que el usuario lo envía.
    • Estilo: Especifica la ruta al archivo CSS utilizado para personalizar el aspecto del formulario.
  • rootPanel: Panel raíz de un formulario adaptable. Puede contener subpaneles en el nodo items. Cada panel, incluido el panel raíz, puede tener un diseño asociado. La presentación del panel dicta el diseño del formulario. Por ejemplo, en el diseño Acordeón*, *sus elementos se muestran como pasos de Acordeón.

  • barra de herramientas: Un contenedor de formulario adaptable tiene una barra de herramientas global asociada, que es global para el formulario. Esta barra de herramientas se puede agregar mediante la acción Añadir barra de herramientas de la barra de edición, que permite a los autores agregar acciones como Enviar, Guardar, Restablecer, etc.

  • recursos: Este nodo contiene información adicional utilizada para la creación de formularios. Por ejemplo, detalles del modelo de formulario, detalles de localización, etc.).

En esta página