Creación de un formulario mediante el bloque de formularios adaptables

En lugar de navegar por procesos complejos, la creación de un formulario se puede lograr fácilmente con una hoja de cálculo. Puede definir las filas y columnas que componen la estructura del formulario. Cada fila representa un campo de formulario individual y los encabezados de columna definen las propiedades de campo correspondientes.

Por ejemplo, vea la siguiente hoja de cálculo en la que las filas describen los campos de un formulario de enquiry y los encabezados de columna definen sus propiedades:

Para continuar con la creación del formulario, haga lo siguiente:

1. Acceda a la carpeta del proyecto de Edge Delivery de AEM en Microsoft SharePoint o Google Drive.

2. Cree un libro de Microsoft Excel o una hoja de Google Sheets en cualquier lugar dentro del directorio del proyecto de Edge Delivery de AEM. Por ejemplo, cree una hoja de cálculo llamada enquiry en el directorio de proyectos de Edge Delivery de AEM en Google Drive.

   

3. Asegúrese de que la hoja se comparte con el usuario de AEM correspondiente (por ejemplo, helix@adobe.com) según las configuraciones especificadas para su proyecto. Conceda al usuario permiso de edición de la hoja.

4. Abra la hoja de cálculo creada y cambie el nombre de la hoja predeterminada a “shared-default”.

   

5. Para agregar los campos del formulario, inserte las filas y los encabezados de columna en la hoja “shared-default”. Cada fila debe representar un campo de formulario, con encabezados de columna que definan las propiedades del campo correspondiente.

   Para empezar rápidamente, considere la posibilidad de copiar el contenido de la hoja de cálculo de consulta en su hoja de cálculo. Después de copiar el contenido, guárdela.

   embed
   https://video.tv.adobe.com/v/3427468?quality=12&learn=on

6. Utilice AEM Sidekick para obtener una vista previa de la hoja.

   

   Con la vista previa, las nuevas pestañas del explorador muestran el contenido de la hoja en formato JSON. Asegúrese de capturar la URL de la vista previa, ya que es necesaria para procesar el formulario junto a la sección. El formato de la dirección URL es el siguiente:

   code language-json
   https://<branch>--<repository>--<owner>.hlx.live/<form-path>/<form-file-name>.json

   • <branch> hace referencia a la rama del repositorio de GitHub.
   • <repository> indica su repositorio de GitHub.
   • <owner> hace referencia al nombre de usuario de la cuenta de GitHub que aloja el repositorio de GitHub.

   Por ejemplo, si el repositorio del proyecto se llama “portal”, está ubicado en la cuenta “wkndforms” y usa la rama “principal”, la dirección URL tiene el siguiente aspecto:

   https://main--portal--wkndforms.hlx.page/enquiry.json

Hasta ahora, ha preparado la estructura del formulario. Ahora, para obtener una vista previa del formulario:

1. Abra su cuenta de Microsoft SharePoint o de Google Drive y vaya al directorio del proyecto de Edge Delivery de AEM.

2. Abra un archivo de documento (por ejemplo, un archivo de índice) para incrustar el formulario. También puede crear un nuevo documento.

3. Desplácese hasta la ubicación deseada dentro del documento donde quiere añadir el formulario.

4. Para crear un bloque de formulario para procesar el formulario. Seleccione Insertar > Tabla y cree una tabla con una columna y dos filas. Asigne el nombre “Formulario” a la tabla y pegue la dirección URL de vista previa en la segunda fila. Asegúrese de que la dirección URL tenga el formato de hipervínculo, no de texto sin formato, como se muestra a continuación:

   table 0-row-1 1-row-1
   Formulario
   https://main–wefinance–wkndforms.hlx.live/enquiry.json

   

   Este bloque sirve como marcador de posición donde está incrustado el formulario. En la segunda fila del bloque, añada la URL de vista previa de su archivo <form>.json como hipervínculo.

   note important
   IMPORTANT
   Asegúrese de que la dirección URL tenga formato de hipervínculo en lugar de mostrarse como texto sin formato.

5. Utilice AEM Sidekick para obtener una vista previa del documento. La página ahora muestra el formulario. Por ejemplo, este es el formulario basado en la hoja de cálculo consulta:

   

   Ahora, rellene el formulario y haga clic en el botón Enviar. Se producirá un error similar al siguiente, ya que la hoja de cálculo aún no está configurada para aceptar los datos.