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

Crie um repositório GitHub para seu projeto do AEM. Para criar um repositório:

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

   

2. Clique na opção Usar este modelo e selecione a opção Criar um novo repositório.

   

   A tela Criar um novo repositório é aberta.

3. Na tela Criar um novo repositório, selecione o proprietário e especifique o Nome do repositório. A Adobe recomenda definir o repositório como Público. Então, selecione a opção pública e clique em Criar Repositório.

   

Instale o aplicativo GitHub de sincronização de código da AEM em seu repositório. Para instalar:

1. Ir para https://github.com/apps/aem-code-sync/installations/new.
2. Na tela Instalar sincronização de código do AEM, selecione a opção Selecionar apenas repositórios e selecione o repositório recém-criado. Clique em Salvar.

Agora vincule o repositório GitHub criado por meio do AEM Forms Boilerplate ao ambiente de criação do AEM Project. Para conectar:

1. Vá para o repositório GitHub criado anteriormente usando a Matriz do AEM Forms.

2. Abra o arquivo fstab.yaml para edição.

   

3. Edite o arquivo fstab.yaml para atualizar o ponto de montagem do seu projeto. Substitua o URL pelo URL da sua instância de criação do AEM as a Cloud Service.

   https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main

   

4. Confirme o arquivo fstab.yaml atualizado, depois de atualizar a referência e tudo ficará bem.

   

   Se você encontrar problemas de compilação, consulte Solução de problemas de compilação do GitHub.

Para criar um novo projeto do AEM:

1. Faça logon na instância de criação do AEM as a Cloud Service e selecione Sites.

   

2. Clique em Criar > Site do modelo.

   

3. Selecione o modelo de Site do Edge Delivery Services e clique em Próximo.

   

   note note
   NOTE
   Se o modelo de site do Edge Delivery Services não estiver disponível na instância de criação, clique no botão Importar para fazer upload do modelo. Você pode baixar os modelos de site do Edge Delivery Services no GitHub.

4. Insira os seguintes detalhes para criar um novo projeto do AEM:

   • Título do site - Adicione um título descritivo para o site.
   • Título do site - Use o site-name que você definiu na etapa anterior.
   • URL do GitHub - Use a URL do projeto GitHub criado na etapa anterior.

   

5. A caixa de diálogo Criar Site é exibida. Clique em OK.

   

   Em apenas alguns minutos, o novo projeto do AEM será criado.

6. Navegue até o projeto do AEM recém-criado no console Sites e clique em Editar.
   Nesse caso, a página index.html é usada para ilustração.

   

   O Projeto AEM é aberto no Editor universal em uma nova guia, permitindo a criação no WYSIWYG. Agora você pode editar seu projeto do AEM.

   

Publicar o projeto criado no AEM

Depois de concluir a edição do projeto do AEM, publique-o. Para publicar:

1. No console Sites, selecione todas as páginas do Projeto do AEM e clique em Publicação rápida.

   

2. A caixa de diálogo de confirmação Publicação rápida é exibida. Clique em Publicar para iniciar o processo de publicação.

   

   Como alternativa, você pode publicar as páginas do Projeto do AEM diretamente da interface do usuário do Universal Editor.

   

Parabéns! Você tem um novo site em execução em https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/.

• <branch> refere-se à ramificação do seu repositório GitHub.
• <repository> indica seu repositório GitHub.
• <owner> refere-se ao nome de usuário da sua conta GitHub que hospeda seu repositório GitHub.
• <site-name> refere-se ao nome do site criado.

Por exemplo, se o nome da ramificação for main, o repositório for edsforms, o proprietário for wkndforms e o site-name for eds-forms, o site estará funcionando a https://main--edsforms--wkndforms.aem.page/content/eds-forms/

Adicionar arquivos e pastas necessários

1. Copie e cole as seguintes pastas e arquivos do AEM Forms Boilerplate no seu projeto do AEM:

   • Pasta bloco de formulários
   • Pasta formulário-comum
   • Pasta componentes-formulário
   • arquivo form-editor-support.js
   • Arquivo form-editor-support.css

Atualizar definições de componentes e arquivos de modelos

1. Navegue até o arquivo ../models/_component-definition.json em seu projeto do AEM e atualize-o com as alterações do arquivo _component-definition.json no Modelo do AEM Forms.

2. Navegue até o arquivo ../models/_component-models.json em seu projeto do AEM e atualize-o com as alterações do arquivo _component-models.json no Modelo do AEM Forms

Adicionar Editor de Formulário no script do editor

1. Navegue até o arquivo ../scripts/editor-support.js no seu projeto do AEM e atualize-o com as alterações do arquivo editor-support.js no Modelo do AEM Forms

Atualizar arquivo de configuração ESLint

1. Navegue até o arquivo ../.eslintignore em seu projeto do AEM e adicione a seguinte linha de códigos para evitar erros relacionados ao mecanismo de regra de Bloco de formulário:

   code language-none
   blocks/form/rules/formula/* blocks/form/rules/model/*

Confirme e envie essas alterações para o repositório de projetos do AEM no GitHub.

Adicione a seção Formulário adaptável à página Projeto do AEM. Para adicionar:

1. Navegue até o projeto do AEM no console Sites, selecione a página do site que deseja editar e clique em Editar. A página do projeto AEM é aberta no Editor universal para edição.
   Nesse caso, a página index.html é usada para ilustração.
2. Abra a árvore Conteúdo e navegue até uma seção onde deseja adicionar a seção Formulário adaptável.
3. Clique no ícone Adicionar e selecione o componente Formulário adaptável na lista de componentes.

A seção Formulário adaptável é adicionada. Agora é possível começar a adicionar componentes de formulário à página Projeto do AEM.

Adicionar componentes de formulário à seção Formulário adaptável adicionada. Para adicionar componentes de formulário:

1. Navegue até a seção Formulário adaptável adicionada na árvore Conteúdo.

   

2. Clique no ícone Adicionar e adicione os componentes desejados da lista Componentes de Formulários Adaptáveis.

   

   Você também pode arrastar e soltar os componentes necessários do Adaptive Forms, já que o Editor universal oferece um recurso intuitivo de arrastar e soltar.

3. Selecione o componente de Formulário adaptável adicionado para atualizar suas propriedades usando Propriedades.

   

4. Visualize o formulário.
   A captura de tela abaixo exibe o formulário criado no projeto do AEM usando a criação do WYSIWYG:

   

   Depois de satisfeito com a pré-visualização, o usuário pode prosseguir para publicar a página.

   note note
   NOTE
   É importante publicar a página do Projeto do AEM novamente depois de fazer as alterações; caso contrário, as atualizações não estarão visíveis no navegador.

Publique novamente a página do Projeto do AEM.

1. Clique em Publicar para publicar a página do Projeto do AEM novamente depois de adicionar o formulário.

   

2. A caixa de diálogo de confirmação Publicar aparece na tela. Clique em Publicar para iniciar a publicação.

   

   Depois de clicar no botão Publicar, a mensagem Publish started successfully será exibida.

   

Agora você pode exibir a página Projeto do AEM com o formulário do Edge Delivery Services adicionado no seguinte URL:
https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/.

Por exemplo, se o nome da ramificação for main, o repositório for edsforms, o proprietário for wkndforms e o nome do site for eds-forms, a URL será:
https://main--edsforms--wkndforms.aem.page/content/eds-forms/

Instalar a CLI do AEM: a CLI do AEM simplifica as tarefas de desenvolvimento. Vamos instalá-lo globalmente usando npm:

    npm install -g @adobe/aem-cli

Clonar seu projeto do GitHub: clone seu repositório de projetos do AEM do GitHub usando o seguinte comando, substituindo <owner> com o proprietário do repositório e <repo> com o nome do repositório:

git clone https://github.com/<owner>/<repo>

Iniciar o Ambiente Local: Navegue até o diretório do projeto e inicie a instância do AEM local com um único comando:

cd <repo>
aem up