DocumentaçãoAEM as a Cloud ServiceGuia do usuário

Criação de Forms adaptável usando o editor universal

Last update: Thu Apr 03 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Usuário

Este recurso está disponível através do programa de acesso antecipado. Para solicitar acesso, envie um email com o nome da sua organização GitHub e o nome do repositório do seu endereço oficial para aem-forms-ea@adobe.com. Por exemplo, se a URL do repositório for https://github.com/adobe/abc, o nome da organização é adobe e o nome do repositório é abc.

O Universal Editor é um editor visual versátil que fornece uma experiência "o que você vê é o que você obtém" (WYSIWYG) para editar formulários. Ele simplifica a criação de formulários responsivos e amigáveis com um recurso de arrastar e soltar, usando componentes adaptáveis do Forms disponíveis, como caixas de texto, botões de opção e caixas de seleção.

O AEM fornece um bloco, conhecido como Bloco de Forms adaptável, para ajudar você a criar facilmente o Edge Delivery Services Forms para capturar e armazenar dados usando o Editor universal. Você pode criar um novo Projeto do AEM pré-configurado com o Bloco de Forms Adaptável ou adicionar o Bloco de Forms Adaptável a um Projeto de Site do AEM existente.

Fluxo De Trabalho Do Repositório Github

Este artigo o orienta pelo processo de criação e criação de formulários independentes com o Editor universal, selecionando um modelo baseado em Edge Delivery Services no Assistente de criação de formulários.

Pré-requisitos

  • Configure seu repositório GitHub para estabelecer uma conexão entre seu ambiente AEM e o repositório GitHub.
  • Se você já estiver usando o Edge Delivery Services, adicione a versão mais recente do bloco adaptável do Forms ao seu repositório GitHub.
  • A instância do Autor do AEM Forms inclui um modelo com base no Edge Delivery Services. Verifique se a versão mais recente dos Componentes principais está instalada em seu ambiente.
  • Mantenha o URL da instância do autor do AEM Forms as a Cloud Service e do Repositório GitHub acessíveis.

Trabalhar com formulários no Editor universal

Com o Editor universal, você pode criar facilmente formulários independentes responsivos e interativos. Você pode executar as seguintes ações nos formulários no Universal Editor:

NOTE
Você também pode criar um formulário no Site do AEM usando o modelo de Site do Edge Delivery Services no Universal Editor e publicá-lo no Edge Delivery Services.

Criar um formulário

  1. Faça logon na instância de autor do AEM Forms as a Cloud Service.

  2. Selecione Adobe Experience Manager > Forms > Forms e Documentos.

  3. Selecione Criar > Forms Adaptável. O Assistente será aberto.

  4. Na guia Source, selecione um modelo de formulário baseado no Edge Delivery Services:

    Criar EDS Forms

    Quando você seleciona um modelo baseado em Edge Delivery Services, o botão Criar é habilitado.

  5. (Opcional) Nas guias Source de Dados ou Envio, você pode selecionar uma fonte de dados ou uma ação de envio.

  6. (Opcional) Na guia Entrega, você pode especificar uma data de publicação ou cancelamento da publicação para um formulário.

  7. Clique em Criar e o assistente Criar formulário será exibido.

  8. Especifique o Nome e o Título.

  9. Especifique a URL do GitHub. Por exemplo, se o repositório GitHub for nomeado como edsforms, ele estiver localizado na conta wkndforms, a URL será:
    https://github.com/wkndforms/edsforms

  10. Clique em Criar.

    Criar assistente de formulário

    Assim que você clicar em Criar, o formulário será aberto no editor universal para criação.

    crie o formulário

    Ao clicar em Criar, o formulário é aberto no Editor Universal para criação.

Criar um formulário

  1. Abra o navegador Conteúdo e navegue até o componente Formulário adaptável na Árvore de conteúdo.

    árvore de conteúdo

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

    adicionar componente

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

    abrir propriedades

    A captura de tela abaixo exibe o formulário Registration Form simples criado no Editor Universal:

    contate-nos pelo formulário

    Agora você pode configurar e personalizar as ações de envio para formulários.

Publicar um formulário

Agora publique o formulário independente no Edge Delivery Services clicando no botão Publicar no canto superior direito do Editor Universal.

formulário de publicação

NOTE
Consulte o artigo Publicar e implantar para saber como publicar um formulário no Edge Delivery Services.

Veja como acessar o formulário no Edge Delivery Services:

  • Versão Preparada (para teste): a versão preparada exibe a versão não publicada e funcional do formulário para fins de teste. Use o seguinte formato de URL para visualizar o formulário antes que ele entre em vigor:

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

    Por exemplo, se o repositório do seu projeto for chamado de "edsforms", estiver localizado na conta "wkndforms" e estiver usando a ramificação "main" e o formulário como "Registration Form", o URL da versão preparada será semelhante ao seguinte:
    https://main--edsforms--wkndforms.aem.page/content/forms/af/registration-form

  • Versão ao Vivo (formulário publicado): A versão ao vivo exibe a versão publicada mais recentemente do formulário, acessível aos usuários finais. Use o seguinte formato de URL para acessar a versão publicada e em tempo real do formulário:

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

    Por exemplo, se o repositório do seu projeto for chamado de "edsforms", estiver localizado na conta "wkndforms" e estiver usando a ramificação "main" e o formulário como "Registration Form", o URL da versão preparada será semelhante ao seguinte:
    https://main--edsforms--wkndforms.aem.live/content/forms/af/registration-form

A estrutura do URL permanece a mesma para as versões preparadas e ativas. No entanto, o conteúdo exibido é diferente com base no contexto:

Exibir formulário publicado

Gerenciar um formulário

É possível executar várias operações no formulário usando a interface do usuário do AEM Forms.

  1. Faça logon na instância de autor do AEM Forms as a Cloud Service.

  2. Selecione Adobe Experience Manager > Forms > Forms e Documentos.

  3. Selecione um formulário e a barra de ferramentas exibirá as seguintes operações que você pode executar no formulário selecionado.

Operação
Descrição
Editar
Abre o formulário no modo de edição.
Propriedades
Fornece opções para modificar as propriedades do formulário.
Copiar
Fornece opções para copiar o formulário e colá-lo no local desejado.
Visualização
Fornece opções para visualizar o formulário como HTML ou executar uma visualização personalizada mesclando dados de um arquivo XML com o formulário.
Download
Baixa o formulário selecionado.
Iniciar revisão/Gerenciar revisão
Permite iniciar e gerenciar uma revisão do formulário selecionado.
Publicar/Desfazer publicação
Publica/cancela a publicação do formulário selecionado.
Excluir
Exclui o formulário selecionado.
Comparar
Compara dois formulários diferentes para fins de visualização.

Resolução de problemas

Está tendo problemas para carregar o formulário? Estes são alguns problemas comuns e como corrigi-los:

  • URL do formulário: verifique se a URL do seu formulário não inclui a extensão ".html" no final. O Edge Deliver Service não exige essa extensão.

  • URL do Autor do AEM L: verifique se a URL do Autor do AEM listada no arquivo fstab.yaml está formatada corretamente. Ele deve incluir os seguintes detalhes:

    • O proprietário correto do GitHub
    • O nome correto do repositório
    • A ramificação específica que você está usando para o Edge Delivery Services

Começar a criar formulários

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab