Publicar formularios adaptables con Edge Delivery Services

1. Acceder al formulario: abrir el formulario adaptable en el editor universal

2. Comenzar a publicar: hacer clic en el icono Publicar de la barra de herramientas

   

1. Revisar recursos de publicación: el sistema muestra todos los recursos que se están publicando, incluido el formulario

   

2. Confirmar publicación: hacer clic en Publicar para continuar

3. Verificar que la oeperación es correcta: buscar el mensaje de confirmación

   

Comprobar estado: volver a hacer clic en el icono Publicar para ver el estado actual

Punto de comprobación de validación:

• El formulario muestra el estado “Publicado” en el editor
• No hay mensajes de error durante el proceso de publicación
• El formulario aparece en la lista de recursos publicados

Para cancelar la publicación de un formulario:

1. Abrir el formulario en el editor
2. Hacer clic en el menú de tres puntos (⋯) situado en la esquina superior derecha
3. Seleccionar Cancelar la publicación

Para habilitar los envíos de formularios seguros, debe configurar opciones de seguridad que:

• Permitan que Edge Delivery Services envíe datos a AEM
• Impidan el acceso no autorizado a la instancia de AEM
• Habiliten CORS (uso compartido de recursos de origen cruzado) para envíos de formularios
• Filtren solicitudes para permitir solo dominios de Edge Delivery legítimos

Propósito: enviar formularios directamente a la instancia de AEM

Ubicación de archivos: blocks/form/constant.js en el proyecto de Edge Delivery Services

Ejemplos de configuración:

// Production Environment
export const submitBaseUrl = 'https://publish-p120-e12.adobeaemcloud.com';

// Local Development Environment
export const submitBaseUrl = 'http://localhost:4503';

// Staging Environment
export const submitBaseUrl = 'https://publish-staging-p120-e12.adobeaemcloud.com';

Punto de comprobación de validación:

• Archivo constant.js actualizado con la URL de publicación de AEM correcta
• La URL coincide con el entorno (producción, ensayo o local)
• No hay barra diagonal al final en la URL

Propósito: permitir solicitudes de envío de formularios de dominios de Edge Delivery Services

Implementación: añadir la configuración de CORS a su configuración de AEM Dispatcher o Apache

# Local Development Environment
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(http://localhost(:\d+)?$)#" CORSTrusted=true

# Edge Delivery Services - Preview/Stage Environment
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(https://.*\.hlx\.page$)#" CORSTrusted=true

# Edge Delivery Services - Production Environment
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(https://.*\.hlx\.live$)#" CORSTrusted=true

Punto de comprobación de validación:

• Reglas de CORS aplicadas a la configuración de Dispatcher
• Se incluyen todos los dominios necesarios (localhost, hlx.page, hlx.live)
• Configuración implementada en el entorno de destino

Documentación de referencia:

• Guía de configuración de CORS
• Documentación del filtro de referente

Propósito: restringir las operaciones de escritura a dominios de Edge Delivery Services autorizados

Método de implementación: configurar mediante Cloud Manager en AEM as a Cloud Service

Archivo de configuración: añadir a la configuración OSGi del proyecto

{
  "allow.empty": false,
  "allow.hosts": [],
  "allow.hosts.regexp": [
    "https://.*\\.hlx\\.page:443",
    "https://.*\\.hlx\\.live:443"
  ],
  "filter.methods": [
    "POST",
    "PUT",
    "DELETE",
    "COPY",
    "MOVE"
  ],
  "exclude.agents.regexp": [
    ""
  ]
}

Desglose de la configuración:

• allow.empty: rechaza solicitudes sin encabezados de referente
• allow.hosts.regexp: permite solicitudes de dominios de Edge Delivery Services
• filter.methods: aplica el filtrado a estos métodos HTTP
• exclude.agents.regexp: agentes de usuario excluidos del filtrado

Punto de comprobación de validación:

• Configuración del filtro de referente implementada mediante Cloud Manager
• Configuración activa en la instancia de publicación de AEM
• El envío de formularios de prueba funciona desde el dominio de Edge Delivery Services
• Los dominios no autorizados no pueden enviar formularios

Documentación de referencia:

• Configurar el filtro de referente a través de Cloud Manager

Formato de URL estándar:

https://<branch>--<repo>--<owner>.aem.live/content/forms/af/<form_name>

Componentes de URL:

• <branch>: nombre de rama de Git (normalmente main)
• <repo>: nombre del repositorio
• <owner>: organización o nombre de usuario de GitHub
• <form_name>: nombre del formulario (en minúsculas, con guiones)

URL específicas del entorno:

# Production Environment (.aem.live)
https://main--universaleditor--wkndforms.aem.live/content/forms/af/wknd-form

# Preview Environment (.aem.page)
https://main--universaleditor--wkndforms.aem.page/content/forms/af/wknd-form

Verificar accesibilidad del formulario:

1. Probar la carga del formulario: visitar la dirección URL del formulario y confirmar que se carga correctamente
2. Probar el envío del formulario: completar y enviar el formulario para verificar el procesamiento de datos
3. Comprobar diseño interactivo: probar el formulario en diferentes dispositivos y tamaños de pantalla
4. Validar la seguridad: asegurarse de que CORS y el filtro de referente funcionan correctamente

Resultados inesperados:

• El formulario se carga sin errores
• Todos los campos de formulario se representan correctamente
• El envío del formulario se procesa correctamente
• Los datos aparecen en el destino configurado (hoja de cálculo, correo electrónico, etc.)
• No hay errores de consola relacionados con CORS o políticas de seguridad