Introdução ao Edge Delivery Services para AEM Forms usando o Universal Editor

1. Acessar o modelo do AEM Forms Boilerplate

   • Ir para https://github.com/adobe-rnd/aem-boilerplate-forms

   
   Figura: repositório padrão do AEM Forms com bloco Forms adaptável pré-configurado

2. Criar seu repositório

   • Clique em Usar este modelo > Criar um novo repositório

   
   Figura: usando o modelo para criar um novo repositório

3. Definir configurações do repositório

   • Proprietário: selecione sua conta ou organização do GitHub
   • Nome do repositório: escolha um nome descritivo (por exemplo, my-forms-project)
   • Visibilidade: Selecionar Público (recomendado para o Edge Delivery Services)
   • Clique em Criar repositório

   
   Figura: configurando seu novo repositório com visibilidade pública

Validação: confirme se você tem um novo repositório GitHub com base no modelo AEM Forms Boilerplate.

A sincronização de código do AEM sincroniza automaticamente as alterações de conteúdo entre o ambiente de criação do AEM e o repositório do GitHub.

1. Instalar o aplicativo GitHub

   • Ir para https://github.com/apps/aem-code-sync/installations/new

2. Configurar permissões de acesso

   • Selecionar Selecionar apenas repositórios
   • Escolha o repositório recém-criado
   • Clique em Salvar

   
   Figura: instalando a sincronização de código do AEM com permissões específicas do repositório

Ponto de verificação: a Sincronização de código do AEM agora está instalada e tem acesso ao seu repositório.

O arquivo fstab.yaml conecta seu repositório GitHub ao ambiente de criação do AEM para sincronização de conteúdo.

1. Navegue até o repositório

   • Acesse o repositório GitHub recém-criado
   • Você deve ver os arquivos de chapa do AEM Forms

2. Criar o arquivo fstab.yaml

   • Clique em Adicionar arquivo > Criar novo arquivo no diretório raiz
   • Nomeie o arquivo fstab.yaml

   
   Figura: Criando o arquivo de configuração fstab.yaml

3. Adicionar detalhes da conexão com o AEM

   Copie e cole a seguinte configuração, substituindo os espaços reservados:

   code language-yaml
   mountpoints: /: url: https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main type: "markup" suffix: ".html"

   Substituir:

   • <aem-author>: Sua URL do autor do AEM as a Cloud Service (por exemplo, author-p12345-e67890.adobeaemcloud.com)
   • <owner>: seu nome de usuário ou organização do GitHub
   • <repository>: Seu nome de repositório

   Exemplo:

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

   
   Figura: configurando o ponto de montagem para a integração do AEM

4. Confirmar a configuração

   • Adicione uma mensagem de confirmação: "Adicionar configuração de integração do AEM"
   • Clique em Confirmar novo arquivo

   
   Figura: Confirmando a configuração fstab.yaml

Validação: confirme a conexão do repositório GitHub com o AEM.

1. Acessar o console do AEM Sites

   • Faça logon na instância de criação do AEM as a Cloud Service
   • Navegar até Sites

   
   Figura: acessando o console do AEM Sites

2. Iniciar criação de site

   • Clique em Criar > Site do modelo

   
   Figura: criando um novo site a partir do modelo

3. Selecione o modelo do Edge Delivery Services

   • Escolha o modelo do Site do Edge Delivery Services
   • Clique em Avançar

   
   Figura: seleção do modelo de site do Edge Delivery Services

   note note
   NOTE
   Modelo não disponível? Se você não vir o modelo do Edge Delivery Services:
   Clique em Importar para carregar o modelo Baixar modelos das versões do GitHub

4. Configurar seu site

   Insira as seguintes informações:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Texto	Valor	Exemplo
   Título do site	Nome descritivo do site	"Meu projeto do Forms"
   Nome do Site	Nome amigável de URL	"my-forms-project"
   URL do GitHub	O URL do seu repositório	https://github.com/mycompany/my-forms-project

   
   Figura: configurando seu novo site do AEM com a integração do GitHub

5. Concluir criação de site

   • Revisar suas configurações
   • Clique em Criar

   
   Figura: confirmando a criação do site

   Sucesso! Seu site do AEM foi criado e está conectado ao GitHub.

6. Abrir no Editor Universal

   • No console Sites, localize o novo site
   • Selecione a página index
   • Clique em Editar

   
   Figura: Abrindo seu site para edição

   O Editor universal é aberto em uma nova guia, fornecendo recursos de criação do WYSIWYG.

   
   Figura: seu site foi aberto no Editor Universal para edição no WYSIWYG

Validação: Confirme se o site do AEM está pronto para a criação de formulários.

A publicação disponibiliza seu site no Edge Delivery Services para acesso global.

1. Publicação rápida no console Sites

   • Retorne ao console do AEM Sites
   • Selecionar as páginas do site (ou selecionar todas com Ctrl+A)
   • Clique em Publicação rápida

   
   Figura: seleção de páginas para publicação rápida

2. Confirmar publicação

   • No diálogo de confirmação, clique em Publicar

   
   Figura: Confirmando a ação de publicação

   Alternativa: você também pode publicar diretamente do Editor Universal usando o botão Publicar.

   
   Figura: Publicando diretamente do Editor Universal

3. Acessar seu site online

   Seu site agora está ativo em:

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

   Estrutura de URL Explicada:

   • <branch>: ramificação GitHub (geralmente main)
   • <repo>: Seu nome de repositório
   • <owner>: seu nome de usuário ou organização do GitHub
   • <site-name>: O nome do seu site do AEM

   Exemplo:

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

Validação: Confirme se seu site está ativo no Edge Delivery Services.

Próximo: Criar o primeiro formulário

1. Navegar até o projeto local

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

2. Baixar os arquivos necessários do AEM Forms Boilerplate

   Copie estes arquivos do repositório do AEM Forms Boilerplate:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Origem	Destino	Propósito
   blocks/form/	blocks/form/	Funcionalidade de formulário principal
   scripts/form-editor-support.js	scripts/form-editor-support.js	Integração do Editor universal
   scripts/form-editor-support.css	scripts/form-editor-support.css	Estilo do editor

3. Suporte ao editor de atualizações

   • Substitua o arquivo /scripts/editor-support.js pelo editor-support.js da AEM Forms Boilerplate

Validação: Confirme se os arquivos de bloco de formulário estão no seu projeto.

1. Atualizar modelo de seção

   Abra /models/_section.json e adicione componentes de formulário aos filtros:

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

   O que isto faz: Habilita componentes de formulário no seletor de componentes do Editor Universal.

Validação: a confirmação dos componentes do formulário aparece no Editor Universal.

Por que esta etapa: impede a listagem de erros de arquivos específicos do formulário e configura as regras de validação adequadas.

1. Atualizar .eslintignore

   Adicionar estas linhas 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. Atualizar .eslintrc.js

   Adicionar estas regras ao objeto rules em /.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' } }

Validação: Confirme se o ESLint funciona com componentes de formulário.

1. Instalar dependências e compilar

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

   O que isto faz:

   • Atualizações component-definition.json com componentes de formulário
   • Gera component-models.json com modelos de formulário
   • Cria component-filters.json com regras de filtragem

2. Verificar arquivos gerados

   Verifique se esses arquivos na raiz do projeto contêm objetos relacionados ao formulário:

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

3. Confirmar e enviar alterações

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

Validação: confirme se o projeto inclui recursos de formulário.

1. Abrir sua página no Editor Universal

   • Navegue até o console Sites no AEM
   • Selecione a página à qual deseja adicionar um formulário (por exemplo, index)
   • Clique em Editar

   Sua página é aberta no Universal Editor para edição em WYSIWYG.

2. Adicionar o componente de Formulário Adaptável

   • Abra o painel Árvore de conteúdo (barra lateral esquerda)
   • Navegue até a seção onde deseja adicionar o formulário
   • Clique no ícone Adicionar (+)
   • Selecione Formulário adaptável na lista de componentes

   
   Figura: adicionando um bloco de formulário adaptável à sua página

Validação: Confirme se você tem um contêiner de formulário vazio.

1. Navegar até o bloco de formulários

   • Na árvore de conteúdo, localize a seção Formulário adaptável recém-adicionada

   
   Figura: bloco de formulário adaptável na árvore de conteúdo

2. Adicionar componentes de formulário

   Você pode adicionar componentes de duas maneiras:

   Método A: clique para adicionar

   • Clique no ícone Adicionar (+) na seção do formulário
   • Selecione componentes na lista Componentes de formulários adaptáveis

   Método B: arrastar e soltar

   • Arraste os componentes diretamente do painel do componente para o formulário

   
   Figura: adicionando componentes ao formulário

   Componentes iniciais recomendados:

   • Entrada de texto (para nome, email)
   • Área de texto (para mensagens)
   • Botão de enviar

3. Configurar propriedades do componente

   • Selecionar qualquer componente de formulário

   • Use o painel Propriedades (barra lateral direita) para configurar:

     • Rótulos e espaços reservados
     • Regras de validação
     • Configurações de campo obrigatórias

   
   Figura: configurando propriedades do componente

4. Visualizar o formulário

   Seu formulário será semelhante a:

   
   Figura: Exemplo de formulário criado com o Editor Universal

Validação: Confirme se o formulário está pronto para publicação.

1. Publicar pelo Editor Universal

   • Clique no botão Publicar no Editor Universal

   
   Figura: Publicando seu formulário pelo Editor Universal

2. Confirmar publicação

   • No diálogo de confirmação, clique em Publicar

   
   Figura: Confirmando a ação de publicação

   Você verá uma mensagem de sucesso confirmando a publicação.

   
   Figura: confirmação da publicação com êxito

3. Exibir seu formulário disponível

   Seu formulário agora está disponível em:

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

   Exemplo de URL:

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

   
   Figura: sua página de formulário publicada no Edge Delivery Services

Parabéns! Seu formulário agora está disponível e pronto para coletar envios.

1. Instalar AEM CLI

   A CLI do AEM simplifica as tarefas de desenvolvimento locais:

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

2. Clonar seu repositório

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

   Substitua <owner> e <repo> pelos detalhes reais do GitHub.

3. Iniciar o servidor de desenvolvimento local

   code language-bash
   aem up

   Isso inicia um servidor local com recursos de recarregamento a quente.

4. Fazer personalizações

   • Editar arquivos no diretório blocks/form/ para estilo e comportamento do formulário
   • Modificar form.css para estilo
   • Atualizar form.js para comportamento

   Ver alterações instantaneamente no seu navegador em http://localhost:3000

5. Implante suas alterações

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

   Suas alterações estarão disponíveis em:

   • Visualizar: https://<branch>--<repo>--<owner>.aem.page/content/<site-name>
   • Produção: https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

Problema: falhas de compilação ou erros de listagem

Solução 1: Manipular Erros de Linting

Se encontrar erros de impressão:

1. Abrir package.json na raiz do projeto

2. Localizar o script lint:

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

3. Desativar temporariamente a impressão:

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

4. Confirmar e enviar as alterações

Solução 2: Erros de Caminho do Módulo

Se você vir "Não é possível resolver o caminho para o módulo '/scripts/lib-franklin.js'":

1. Navegue até blocks/form/form.js

2. Atualize o demonstrativo de importação:

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

Problema: os envios de formulários não estão funcionando

Soluções:

• Verifique se você tem um componente de botão enviar
• Verificar a configuração da URL de ação do formulário
• Verificar regras de validação de formulário
• Testar primeiro no modo de visualização

Problema: problemas de estilo

Soluções:

• Verificar caminhos de arquivo CSS em blocks/form/
• Limpar cache do navegador
• Verificar sintaxe de CSS
• Testar no ambiente de desenvolvimento local

Problema: componentes de formulário não aparecem no Editor Universal

Soluções:

• Verifique se a sincronização de código do AEM está instalada e em execução
• Verifique se fstab.yaml tem a URL correta do autor do AEM
• Verifique se a instância do AEM tem acesso antecipado ativado
• Confirmar se component-definition.json inclui componentes de formulário

Problema: alterações não visíveis após a publicação

Soluções:

• Aguardar atualização do cache da CDN
• Verificar o cache do navegador (tentar modo incógnito/privado)
• Verifique se o formato correto de URL está sendo usado