Publicar Forms adaptável com o Edge Delivery Services

1. Acessar o formulário: Abra o formulário adaptável no Editor Universal

2. Iniciar publicação: clique no ícone Publicar na barra de ferramentas

   

1. Revisar ativos de publicação: o sistema mostra todos os ativos que estão sendo publicados, incluindo o formulário

   

2. Confirmar publicação: Clique em Publicar para continuar

3. Verificar êxito: procure a mensagem de confirmação

   

Verificar status: clique no ícone Publicar novamente para exibir o status atual

Ponto de Verificação de Validação:

• Formulário mostra o status "Publicado" no editor
• Nenhuma mensagem de erro durante o processo de publicação
• O formulário aparece na lista de ativos publicados

Para desfazer a publicação de um formulário:

1. Abrir o formulário no editor
2. Clique no menu de três pontos () no canto superior direito
3. Selecione Cancelar publicação

Para habilitar envios seguros de formulários, você deve definir configurações de segurança que:

• Permitir que o Edge Delivery Services envie dados para o AEM
• Impedir acesso não autorizado à sua instância do AEM
• Ativar o CORS (Cross-Origin Resource Sharing) para envios de formulários
• Filtrar solicitações para permitir somente domínios legítimos do Edge Delivery

Propósito: envios diretos de formulários para sua instância do AEM

Local do Arquivo: blocks/form/constant.js em seu projeto do Edge Delivery Services

Exemplos de Configuração:

// 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';

Ponto de Verificação de Validação:

• constant.js arquivo atualizado com a URL de publicação correta do AEM
• O URL corresponde ao seu ambiente (produção, preparo ou local)
• Nenhuma barra à direita no URL

Propósito: permitir solicitações de envio de formulário de domínios do Edge Delivery Services

Implementação: adicionar a configuração do CORS ao Dispatcher do AEM ou à configuração do 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

Ponto de Verificação de Validação:

• Regras do CORS aplicadas à configuração do dispatcher
• Todos os domínios necessários (localhost, hlx.page, hlx.live) estão incluídos
• Configuração implantada no ambiente de destino

Documentação de referência:

• Guia de Configuração do CORS
• Documentação de Filtro do Referenciador

Propósito: restringir operações de gravação a domínios autorizados do Edge Delivery Services

Método de implementação: configurar via Cloud Manager no AEM as a Cloud Service

Arquivo de configuração: adicione à configuração OSGi do seu projeto

{
  "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": [
    ""
  ]
}

Detalhamento da Configuração:

• allow.empty: rejeita solicitações sem cabeçalhos do referenciador
• allow.hosts.regexp: permite solicitações de domínios do Edge Delivery Services
• filter.methods: Aplica filtragem a esses métodos HTTP
• exclude.agents.regexp: Agentes do usuário excluídos da filtragem

Ponto de Verificação de Validação:

• Configuração de filtro referenciador implantada via Cloud Manager
• Configuração ativa na instância de publicação do AEM
• O envio do formulário de teste funciona no domínio Edge Delivery Services
• Domínios não autorizados estão impedidos de enviar formulários

Documentação de referência:

• Configurar Filtro Referenciador via Cloud Manager

Formato de URL Padrão:

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

Componentes da URL:

• <branch>: Nome da ramificação Git (normalmente main)
• <repo>: Nome do repositório
• <owner>: Organização ou nome de usuário do GitHub
• <form_name>: Nome do seu formulário (minúsculas, hifenizadas)

URLs Específicas do Ambiente:

# 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 Acessibilidade de Formulário:

1. Testar carregamento do formulário: visite a URL do formulário e confirme se ele é carregado corretamente
2. Enviar formulário de teste: preencha e envie o formulário para verificar o processamento de dados
3. Verificar design responsivo: Testar formulário em diferentes dispositivos e tamanhos de tela
4. Validar segurança: verifique se o CORS e o filtro de referenciador estão funcionando corretamente

Resultados esperados:

• Carregamentos de formulário sem erros
• Todos os campos de formulário são renderizados corretamente
• Processos de envio de formulário com sucesso
• Os dados aparecem no destino configurado (planilha, email etc.)
• Nenhum erro de console relacionado ao CORS ou às políticas de segurança