Introducción a Edge Delivery Services para AEM Forms con el editor universal

1. Acceder a la plantilla de elementos repetitivos de AEM Forms

   • Vaya a https://github.com/adobe-rnd/aem-boilerplate-forms.

   
   Figura: Repositorio de elementos repetitivos de AEM Forms con bloque de formularios adaptables preconfigurado

2. Crear su repositorio

   • Haga clic en Usar esta plantilla > Crear un nuevo repositorio.

   
   Imagen: Uso de la plantilla para crear un nuevo repositorio

3. Configurar el repositorio

   • Propietario: seleccione su cuenta u organización de GitHub
   • Nombre del repositorio: elija un nombre descriptivo (por ejemplo, my-forms-project)
   • Visibilidad: seleccione Público (recomendado para Edge Delivery Services)
   • Haga clic en Crear repositorio.

   
   Imagen: Configuración del nuevo repositorio con visibilidad pública

Validación: confirme que tiene un nuevo repositorio de GitHub basado en la plantilla de elementos repetitivos de AEM Forms.

AEM Code Sync sincroniza automáticamente los cambios de contenido entre el entorno de creación de AEM y el repositorio de GitHub.

1. Instalación de la aplicación de GitHub

   • Vaya a https://github.com/apps/aem-code-sync/installations/new.

2. Configurar permisos de acceso

   • Seleccione Solo seleccionar repositorios.
   • Elija el repositorio recién creado.
   • Haga clic en Guardar.

   
   Imagen: instalando AEM Code Sync con permisos específicos del repositorio

Punto de comprobación: AEM Code Sync ya está instalado y tiene acceso a su repositorio.

El archivo fstab.yaml conecta el repositorio de GitHub con el entorno de creación de AEM para la sincronización de contenido.

1. Vaya a su repositorio

   • Vaya al repositorio de GitHub recién creado
   • Debería ver los archivos Boilerplate de AEM Forms

2. Crear el archivo fstab.yaml

   • Haga clic en Agregar archivo > Crear nuevo archivo en el directorio raíz
   • Nombre al archivo fstab.yaml

   
   Figura: crear el archivo de configuración fstab.yaml

3. Agregue sus datos de conexión de AEM

   Copie y pegue la siguiente configuración, reemplazando los marcadores de posición:

   code language-yaml
   mountpoints: /: https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main

   Reemplazar:

   • <aem-author>: su URL de autor de AEM as a Cloud Service (por ejemplo, author-p12345-e67890.adobeaemcloud.com)
   • <owner>: su nombre de usuario u organización de GitHub
   • <repository>: el nombre de su repositorio

   Ejemplo:

   code language-yaml
   mountpoints: /: https://author-p12345-e67890.adobeaemcloud.com/bin/franklin.delivery/mycompany/my-forms-project/main

   
   Figura: configuración del punto de montaje para la integración de AEM

4. Confirme la configuración

   • Añada el mensaje de compromiso: “Añadir configuración de la integración de AEM”
   • Haga clic en Confirmar nuevo archivo

   
   Figura: confirmando la configuración de fstab.yaml

Validación: confirme la conexión del repositorio de GitHub a AEM.

<div class="extension nota">
<div>NOTA</div>
<div>
<p>¿Tiene problemas de compilación? Consulte <a href="#troubleshooting-github-build-issues">Solución de problemas de compilación de GitHub</a>.</p>
</div>
</div>

1. Acceder a la consola de AEM Sites

   • Inicie sesión en la instancia de creación de AEM as a Cloud Service.
   • Vaya a Sites

   
   Figura: acceso a la consola de AEM Sites

2. Iniciar creación de sitios

   • Haga clic en Crear > Sitio a partir de una plantilla

   
   Figura: creación de un nuevo sitio a partir de una plantilla

3. Seleccionar plantilla de Edge Delivery Services

   • Elija la plantilla sitio de Edge Delivery Services
   • Haga clic en Siguiente

   
   Figura: seleccionar la plantilla del sitio de Edge Delivery Services

   note note
   NOTE
   ¿Plantilla no disponible? Si no ve la plantilla de Edge Delivery Services:
   Haga clic en Importar para cargar la plantilla Descargar plantillas de versiones de GitHub

4. Configure el sitio

   Especifique la siguiente información:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Campo	Valor	Ejemplo
   Título del sitio	Nombre descriptivo del sitio	"Mi proyecto de Forms"
   Nombre del sitio	Nombre descriptivo de la URL	"mi-proyecto-forms"
   URL de GitHub	URL del repositorio	https://github.com/mycompany/my-forms-project

   
   Figura: configuración del nuevo sitio de AEM con la integración de GitHub

5. Creación completa de sitios

   • Revise sus ajustes
   • Haga clic en Crear

   
   Figura: confirmación de la creación del sitio

   ¡Correcto! El sitio de AEM se ha creado y conectado a GitHub.

6. Abrir en el editor universal

   • En la consola Sitios, busque el nuevo sitio
   • Seleccione la página index
   • Haga clic en Editar.

   
   Imagen: abrir el sitio para editarlo

   El editor universal se abre en una nueva pestaña, que proporciona funciones de creación de WYSIWYG.

   
   Imagen: el sitio se abrió en el editor universal para la edición de WYSIWYG

Validación: confirme que su sitio de AEM está listo para la creación de formularios.

La publicación hace que el sitio esté disponible en Edge Delivery Services para su acceso global.

1. Publicación rápida desde la consola Sitios

   • Vuelva a la consola de AEM Sites.
   • Seleccione las páginas del sitio (o seleccione todo con Ctrl+A)
   • Haga clic en Publicación rápida

   
   Figura: seleccionando páginas para la publicación rápida

2. Confirmar publicación

   • En el cuadro de diálogo de confirmación, haga clic en Publicar

   
   Figura: confirmando la acción de publicación

   Alternativa: también puede publicar directamente desde el Editor universal pulsando el botón Publicar.

   
   Figura: publicación directamente desde el editor universal

3. Acceda a su sitio activo

   Su sitio está ahora activo en:

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   Estructura URL explicada:

   • <branch>: rama de GitHub (normalmente main)
   • <repo>: el nombre de su repositorio
   • <owner>: su nombre de usuario u organización de GitHub
   • <site-name>: el nombre de su sitio de AEM

   Ejemplo:

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

Validación: confirme que su sitio está activo en Edge Delivery Services.

Siguiente:creación del primer formulario

1. Vaya a su proyecto local

   code language-bash
   cd /path/to/your/aem-project

2. Descargue los archivos necesarios de las plantillas de AEM Forms

   Copie estos archivos del repositorio de AEM Forms Boilerplate:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Origen	Destino	Función
   blocks/form/	blocks/form/	Funcionalidad de formulario principal
   scripts/form-editor-support.js	scripts/form-editor-support.js	Integración del editor universal
   scripts/form-editor-support.css	scripts/form-editor-support.css	Estilo del editor

3. Compatibilidad con el editor de actualizaciones

   • Reemplace su archivo /scripts/editor-support.js por editor-support.js de AEM Forms Boilerplate

Validación: confirme que los archivos de bloque de formulario se encuentran en el proyecto.

1. Actualizar modelo de sección

   Abra /models/_section.json y agregue componentes de formulario a los filtros:

   code language-json
   { "filters": [ { "id": "section", "components": [ "text", "image", "button", "form", "embed-adaptive-form" ] } ] }

   Qué hace: habilita los componentes de formulario en el selector de componentes del editor universal.

Validación: confirme que los componentes de formulario aparecen en el editor universal.

Por qué este paso: evita los errores de identificación de los archivos específicos del formulario y configura las reglas de validación adecuadas.

1. Actualizar .eslintignore

   Añada estas líneas a /.eslintignore:

   code language-bash
   # Form block rule engine files blocks/form/rules/formula/* blocks/form/rules/model/* blocks/form/rules/functions.js scripts/editor-support.js scripts/editor-support-rte.js

2. Actualizar .eslintrc.js

   Añada estas reglas al objeto rules en /.eslintrc.js:

   code language-javascript

   { "rules": { // Existing rules... // Form component cell limits 'xwalk/max-cells': ['error', { '*': 4, // default limit form: 15, wizard: 12, 'form-button': 7, 'checkbox-group': 20, checkbox: 19, 'date-input': 21, 'drop-down': 19, email: 22, 'file-input': 20, 'form-fragment': 15, 'form-image': 7, 'multiline-input': 23, 'number-input': 22, panel: 17, 'radio-group': 20, 'form-reset-button': 7, 'form-submit-button': 7, 'telephone-input': 20, 'text-input': 23, accordion: 14, modal: 11, rating: 18, password: 20, tnc: 12 }], // Disable this rule for forms 'xwalk/no-orphan-collapsible-fields': 'off' } }

Validación: confirme que ESLint funciona con los componentes del formulario.

1. Instalar dependencias y generar

   code language-bash
   # Install any new dependencies npm install # Build component definitions npm run build:json

   Qué hace esto:

   • Actualiza component-definition.json con componentes de formulario
   • Genera component-models.json con modelos de formulario
   • Crea component-filters.json con reglas de filtrado

2. Verificar archivos generados

   Compruebe que estos archivos de la raíz del proyecto contengan objetos relacionados con el formulario:

   • component-definition.json
   • component-models.json
   • component-filters.json

3. Confirmar y enviar cambios

   code language-bash
   git add . git commit -m "Add Adaptive Forms Block integration" git push origin main

Validación: confirme que el proyecto incluye capacidades de formulario.

1. Abrir la página en el editor universal

   • Vaya a la consola Sitios en AEM.
   • Seleccione la página donde desea añadir un formulario (por ejemplo, index).
   • Haga clic en Editar.

   La página se abrirá en el editor universal para la edición WYSIWYG.

2. Añadir el componente de formulario adaptable

   • Abra el panel Árbol de contenido (barra lateral izquierda).
   • Vaya a la sección donde desee añadir el formulario.
   • Haga clic en el icono Añadir (+).
   • Seleccione Formulario adaptable en la lista de componentes.

   .
   Figura: Añadir un bloque de formulario adaptable a la página

Validación: confirme que tiene un contenedor de formulario vacío.

1. Vaya al bloque de formulario

   • En el árbol de contenido, busque la sección Formulario adaptable recién añadida.

   
   Figura: bloque de formulario adaptable en el árbol de contenido

2. Añadir componentes de formulario

   Puede añadir componentes de las siguientes dos maneras:

   Método A: haga clic en Agregar

   • Haga clic en el icono Agregar (+) en la sección del formulario
   • Seleccione los componentes de la lista Componentes de formularios adaptables.

   Método B: Arrastrar y soltar

   • Arrastre los componentes directamente desde el panel de componentes al formulario

   
   Figura: añadir componentes al formulario

   Componentes de inicio recomendados

   • Entrada de texto (para el nombre, correo electrónico)
   • Área de texto (para mensajes)
   • Botón Enviar

3. Configure propiedades de los componentes

   • Seleccione cualquier componente del formulario

   • Utilice el panel Propiedades (barra lateral derecha) para configurar:

     • Etiquetas y marcadores de posición
     • Reglas de validación
     • Configuración de campos obligatoria

   
   Figura: configuración de propiedades del componente

4. Seleccionar un formulario

   El formulario tendrá un aspecto similar al siguiente:

   
   Figura: formulario de ejemplo creado con el editor universal

Validación: confirme que el formulario está listo para su publicación.

1. Publicar desde el editor universal

   • Haga clic en el botón Publicar del Editor universal

   
   Imagen: publicación del formulario desde el Editor universal

2. Confirmar publicación

   • En el cuadro de diálogo de confirmación, haga clic en Publicar.

   
   Figura: confirmando la acción de publicación

   Verá un mensaje que confirma la publicación con éxito.

   
   Figura: confirmación de publicación correcta

3. Ver el formulario activo

   El formulario ya está activo en:

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   URL de ejemplo:

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

   
   Imagen: la página de formulario publicada en Edge Delivery Services

¡Enhorabuena! El formulario está ahora activo y listo para recopilar envíos.

1. Instalación de la CLI de AEM

   La CLI de AEM simplifica las tareas de desarrollo local:

   code language-bash
   npm install -g @adobe/aem-cli

2. Clone su repositorio

   code language-bash
   git clone https://github.com/<owner>/<repo> cd <repo>

   Reemplace <owner> y <repo> con la información real de GitHub.

3. Inicie el servidor de desarrollo local

   code language-bash
   aem up

   Esto inicia un servidor local con capacidades de recarga en caliente.

4. Realice personalizaciones

   • Editar archivos en el directorio blocks/form/ para determinar el estilo y el comportamiento del formulario
   • Modifique form.css para determinar el estilo
   • Actualice form.js para determinar el comportamiento

   Vea los cambios al instante en el explorador en http://localhost:3000

5. Implemente los cambios

   code language-bash
   git add . git commit -m "Custom form styling" git push origin main

   Los cambios estarán disponibles en:

   • Vista previa: https://<branch>--<repo>--<owner>.aem.page/content/<site-name>
   • Producción: https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

Problema: errores de compilación o errores de vinculación

Solución 1: Controlar errores de vinculación

Si se producen errores de vinculación:

1. Abra package.json en la raíz del proyecto

2. Busque el script lint:

   code language-json
   "scripts": { "lint": "npm run lint:js && npm run lint:css" }

3. Deshabilitar la vinculación temporalmente:

   code language-json
   "scripts": { "lint": "echo 'skipping linting for now'" }

4. Confirmar e insertar los cambios

Solución 2: Errores de ruta de módulo

Si ve "No se puede resolver la ruta al módulo '/scripts/lib-franklin.js'":

1. Navegue hasta blocks/form/form.js

2. Actualice la instrucción de importación:

   code language-javascript
   // Change this: import { ... } from '/scripts/lib-franklin.js'; // To this: import { ... } from '/scripts/aem.js';

Problema: los envíos de formularios no funcionan

Soluciones:

• Asegúrese de que tiene un componente de botón de envío
• Compruebe la configuración de la URL de acción del formulario
• Verifique las reglas de validación de formularios
• Pruebe primero en el modo de vista previa

Problema: Problemas de estilo

Soluciones:

• Compruebe las rutas de archivo CSS en blocks/form/
• Borre la caché del explorador
• Verifique la sintaxis CSS
• Haga la prueba en el entorno de desarrollo local

Problema: los componentes del formulario no aparecen en el editor universal

Soluciones:

• Compruebe que AEM Code Sync está instalado y en ejecución
• Compruebe que fstab.yaml tenga la dirección URL de autor de AEM correcta
• Asegúrese de que la instancia de AEM tenga habilitado el acceso anticipado
• Confirmar que component-definition.json incluye componentes de formulario

Problema: los cambios no son visibles después de la publicación

Soluciones:

• Espere a que se actualice la caché de la CDN
• Compruebe la caché del explorador (pruebe el modo incógnito/privado)
• Compruebe que se está utilizando el formato de dirección URL correcto