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.
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.
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:
Execute as seguintes etapas para instalar o componente de Contêiner SPA do AEM Forms:
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.
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.
Para incorporar um formulário adaptável ou a Comunicação interativa usando o AEM Forms para o componente de Contêiner SPA:
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.
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.
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.
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.
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.
Selecionar para salvar as configurações. O formulário adaptável ou a Comunicação interativa agora está incorporado na página.
Considere os seguintes cenários para publicar um ativo incorporado (formulário adaptável ou Comunicação interativa) na página do AEM Sites:
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.
Lembre-se dos seguintes pontos ao incorporar formulários adaptáveis em páginas de sites AEM: