Incorpore um formulário adaptável ou a Comunicação interativa no aplicativo de página única do AEM Sites

O Adobe recomenda o uso da captura de dados moderna e extensível Componentes principais para criação de um novo Forms adaptável ou adição de Forms adaptável às páginas do AEM Sites. Esses componentes representam um avanço significativo na criação do Forms adaptável, garantindo experiências de usuário impressionantes. Este artigo descreve a abordagem mais antiga para criar o Forms adaptável usando componentes de base.

Visão geral

O AEM Forms permite que desenvolvedores de formulários incorporem formulários adaptáveis e comunicações interativas em um aplicativo de página única (SPA) do AEM Sites. O formulário adaptável incorporado e a Comunicação interativa são totalmente funcionais e os usuários podem preencher e enviar o formulário sem sair da página. Ele ajuda o usuário a permanecer no contexto de outros elementos na página da Web e interagir simultaneamente com o formulário adaptável ou a Comunicação interativa.

No Aplicativo de página única do AEM Sites, é possível adicionar um formulário adaptável ou a Comunicação interativa usando o Componente de container do AEM Forms SPA . É um componente do AEM Forms para AEM Sites SPA que pode ser adicionado à página Sites.

Para obter informações sobre como incorporar um formulário adaptável em um AEM Sites não SPA, consulte Incorpore um formulário adaptável ou a comunicação interativa na página do AEM Sites.

Pré-requisitos

Para incorporar um formulário adaptável ou a Comunicação interativa em um SPA de sites AEM usando o componente de Contêiner AEM Forms SPA, verifique se você instalou:

• Java SE Development Kit 8 ou mais recente
• Apache Maven 3.3.1 ou mais recente
• Instância de autor AEM
• Pacote complementar do AEM Forms 6.4.2 na instância do autor

Instalar o componente de Contêiner do AEM Forms SPA

Execute as seguintes etapas para instalar o componente de Contêiner SPA do AEM Forms:

1. Clonar ou baixar o componente AEM Forms para SPA.

2. Instale o componente AEM Forms para SPA. As instruções para instalar o componente estão disponíveis no README.md arquivo.

   O componente inclui uma componente React de amostra que pode ser usado para integrar o componente do contêiner SPA com um projeto SPA baseado no React.

3. Clonar ou baixar um projeto de SPA baseado no React.

4. Integre o componente de contêiner SPA a um projeto SPA baseado no React usando as instruções disponíveis na README.md arquivo.

   Depois de instalar o componente de Contêiner do AEM Forms SPA e integrar o componente com um projeto SPA baseado no React, você pode incorporar formulários adaptáveis e Comunicações interativas na página do AEM Sites.

Incorpore um formulário adaptável ou a comunicação interativa

Para incorporar um formulário adaptável ou a Comunicação interativa usando o AEM Forms para o componente de Contêiner SPA:

1. Abra a página de sites do AEM, no modo de edição, na qual você deseja incorporar um formulário adaptável ou a Comunicação interativa.

2. Insira o Forma de AEM para SPA na página usando uma das seguintes opções:

   • Selecione o contêiner de layout na página Sites e selecione + e selecione o Forma de AEM para SPA componente.

   • No painel Navegador de componentes, arraste e solte a Forma de AEM para SPA componente na página.

   • Procure um formulário adaptável ou Comunicação interativa no navegador de Ativos e arraste-o e solte-o na página Sites. Ele incorpora o formulário em um contêiner de componente AEM Forms for SPA.

   OBSERVAÇÃO

   A renderização de vários componentes do Contêiner do AEM Forms SPA em uma página não é suportada. Você pode ter vários Containers AEM Forms SPA em uma página, mas apenas um componente é renderizado de cada vez. Para evitar discrepâncias, verifique se apenas um componente está visível em uma página.

3. Selecione o componente de Contêiner de SPA do AEM Forms incorporado na página Sites e selecione na barra de ações. A variável Editar contêiner do AEM Forms SPA será aberta.

4. No Editar contêiner do AEM Forms especifique o seguinte:

   • Tipo de ativo: Selecione o tipo de ativo a ser incorporado. As opções são Formulário adaptável e Comunicação interativa

   • Caminho do ativo: Procure e selecione o formulário adaptável ou a Comunicação interativa a ser incorporada. O campo é preenchido automaticamente se um formulário adaptável ou comunicação interativa for inserido usando o navegador de ativos.

   • Canal (Somente comunicação interativa): selecione o tipo de canal interativo a ser incorporado. As opções são Canal da Web e Canal de impressão.

   • Tema: selecione um tema que define o estilo dos componentes do seu formulário adaptável ou da Comunicação interativa. O estilo inclui propriedades de aparência, como estilo da fonte, cor do plano de fundo, dimensões e alinhamento.

5. Selecionar para salvar as configurações. O formulário adaptável ou a Comunicação interativa agora está incorporado na página.

Publicar formulário adaptável incorporado e comunicação interativa

Considere os seguintes cenários para publicar um ativo incorporado (formulário adaptável ou Comunicação interativa) na página do AEM Sites:

• Se você estiver publicando a página do AEM Sites pela primeira vez e ela incluir um formulário adaptável incorporado ou a Comunicação interativa, publique a página Sites e o ativo incorporado.
• Se você modificou somente o formulário adaptável incorporado ou a Comunicação interativa em uma página do Sites publicada, publique o ativo original e as alterações refletirão na página do Sites publicada. A página Sites publicada inclui uma referência ao ativo e não requer a republicação da página.
• Se você modificou a página Sites e o formulário adaptável incorporado ou a Comunicação interativa, republique a página Sites e o ativo incorporado.

Modificar o formulário adaptável incorporado e a comunicação interativa

A página de sites do AEM mantém uma referência ao formulário adaptável e à Comunicação interativa no AEM Forms Container. Portanto, todas as configurações e propriedades, como o tema, os estilos e a ação de envio, configuradas no formulário adaptável original e na Comunicação interativa são mantidas no formulário adaptável incorporado e na Comunicação interativa.

Para modificar qualquer configuração ou propriedade do formulário adaptável incorporado e da Comunicação interativa, execute um dos procedimentos a seguir.

• Abra o formulário original em formulários adaptáveis ou Comunicação interativa nos respectivos editores e modifique-os.
• Selecione o formulário adaptável ou a Comunicação interativa na página Sites no modo de edição e selecione Editar em uma nova janela. O formulário original é aberto no modo de edição.

Considerações e práticas recomendadas

Lembre-se dos seguintes pontos ao incorporar formulários adaptáveis em páginas de sites AEM:

• O cabeçalho e o rodapé no formulário original não estão incluídos no formulário incorporado.
• Os rascunhos e envios de formulários incorporados pelo usuário são suportados e ficam visíveis nas guias Rascunhos e Forms enviados no portal de formulários.
• A ação de envio configurada no formulário original é retida no formulário incorporado.
• O direcionamento de experiência e os testes A/B configurados no formulário original não funcionam no formulário incorporado. No entanto, você pode usar o direcionamento de experiência na página Sites para apresentar diferentes formulários com base nos perfis do usuário.
• Se o Adobe Analytics estiver configurado para o formulário original, os dados de análise do formulário incorporado serão capturados no Adobe Analytics. No entanto, não está disponível no relatório de análise de formulários.