Tutorial: Crear un formulario adaptable

Inicie sesión en la instancia de autor de AEM y navegue hasta Adobe Experience Manager > Formularios > Formularios y documentos. La dirección URL predeterminada es http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

Seleccione  Crear y seleccione Formulario adaptable. Aparecerá una opción para seleccionar una plantilla. Seleccione la plantilla En blanco para seleccionarla y seleccione Siguiente.

Aparecerá una opción para Agregar propiedades. Los campos Título y Nombre son obligatorios:

• Título: especifique Add new or update shipping address en el campo Título. El campo Título especifica el nombre para mostrar del formulario. El título le ayuda a identificar el formulario en la interfaz de usuario de AEM Forms.
• Nombre: especifique shipping-address-add-update-form en el campo Nombre. El campo Nombre especifica el nombre para mostrar 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. Todas las entradas no válidas se sustituyen por guiones.

Seleccione Crear. Se creará un formulario adaptable y aparecerá un cuadro de diálogo para abrir el formulario y editarlo. Seleccione Abrir para abrir el formulario recién creado en una pestaña nueva. El formulario se abrirá para editarlo. También mostrará la barra lateral para personalizar el formulario recién creado según las necesidades.

Para obtener información sobre la interfaz de creación de formularios adaptables y los componentes disponibles, consulte Introducción a la creación de formularios adaptables.

Seleccione > . Se abre el explorador de componentes. Arrastre el componente Encabezado desde el explorador de componentes hasta el formulario adaptable.

Seleccionar logotipo. Aparecerá la barra de herramientas. Seleccione en la barra de herramientas, escriba We.Retail y seleccione .

Seleccione Imagen. Aparecerá la barra de herramientas. Seleccione . El explorador de propiedades se abrirá a la izquierda de la pantalla. Examine y cargue la imagen del logotipo. Seleccione . La imagen aparecerá en el encabezado.

Puede seleccionar Obtener archivo para descargar el logotipo utilizado en este artículo si no lo tiene.

Arrastre el componente Pie de página desde hasta el formulario adaptable. En esta fase, el formulario tendrá el siguiente aspecto:

Arrastre el Componente Cuadro numérico hasta el formulario adaptable. Colóquelo antes del componente Pie de página. Abra las propiedades del componente, cambie el Título del componente a Customer ID, cambie el Nombre del elemento a customer_ID, habilite la opción Campo requerido, habilite la opción Usar tipo de entrada de número de HTML 5 y seleccione .

Arrastre tres componentes Cuadro de texto hasta el formulario adaptable. Colóquelos antes del componente Pie de página. Defina las siguientes propiedades para estos cuadros de texto.:

Arrastre un componente Cuadro numérico antes del componente Pie de página. Abra las propiedades del componente, establezca los valores enumerados en la siguiente tabla, seleccione .

Arrastre un componente Correo electrónico antes del componente Pie de página. Abra las propiedades del componente, establezca los valores enumerados en la siguiente tabla y seleccione .

Arrastre un Archivo adjunto antes del componente Pie de página. Abra las propiedades del componente, establezca los valores enumerados en la siguiente tabla y seleccione .

Arrastre un componente Botón de envío hasta el formulario adaptable. Colóquelo antes del componente Pie de página. Abra las propiedades del componente, cambie el Nombre del elemento a address_addition_update_submit, seleccione . La presentación del formulario estará completa y el formulario tendrá el siguiente aspecto:

Configure el servidor de correo electrónico. Para obtener más información, consulte Configurar notificaciones de correo electrónico.

Seleccione Contenedor de formulario en el Explorador de contenido y seleccione . El explorador de propiedades se abrirá a la izquierda.

Vaya a Envío > Enviar acción. Seleccione Enviar correo electrónico. Especifique los siguientes valores y seleccione .

Su formulario está listo. Ahora puede obtener previsualizar el formulario y probar la funcionalidad. Si ha utilizado el nombre mencionado en el tutorial y ha accedido al formulario en el equipo que ejecuta el servidor de AEM Forms, el formulario estará disponible en http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.