Criar componentes principais com base no Forms adaptável

O Adobe recomenda usar os Componentes principais para adicionar o Adaptive Forms a uma página do AEM Sites ou para criar Forms adaptável independente.

Aplicável a: ❎ Dos Componentes Principais Do Formulário Adaptável Componentes de base do formulário adaptável.

Formulários adaptáveis permitem criar formulários envolventes, responsivos, dinâmicos e adaptáveis. O AEM Forms fornece uma interface de usuário empresarial fácil de usar para criar rapidamente o Adaptive Forms. A interface do usuário oferece navegação rápida por guias para selecionar facilmente o modelo pré-configurado, o estilo, os campos e as opções de envio para criar um Formulário adaptável.

Antes de começar, saiba mais sobre o tipo de componentes do Forms disponíveis para você:

• Componentes principais de formulários adaptáveis: Esses são componentes de captura de dados padronizados. Esses componentes oferecem recursos de personalização, redução do tempo de desenvolvimento e dos custos de manutenção para suas experiências de inscrição digital. Um desenvolvedor pode personalizar e estilizar facilmente esses componentes. A Adobe recomenda o uso desses componentes modernos e extensíveis para desenvolver o Adaptive Forms.

• Componentes de fundamentais de formulários adaptáveis: esses são componentes clássicos (antigos) de captura de dados. Você pode continuar usando-os para editar seus componentes fundamentais já existentes com base no formulário adaptável. Se você estiver criando formulários, o Adobe recomenda usar Componentes principais adaptáveis do Forms para criar uma Forms adaptável.

Pré-requisitos

Você precisará do seguinte para criar um formulário adaptável:

• Ativar os Componentes principais adaptáveis do Forms para o seu ambiente: o projeto do Arquétipo AEM versão 41 ou posterior é necessário para ativar os Componentes principais para o seu ambiente. Ao ativar os Componentes principais para seu ambiente, a variável Forms adaptável (componente principal) O modelo e o tema da Tela de desenho são adicionados ao seu ambiente.

• Um modelo de formulário adaptável: um modelo fornece uma estrutura básica e define a aparência (layouts e estilos) de um formulário adaptável. Ele tem componentes pré-formatados que contêm determinadas propriedades e estrutura de conteúdo. Também fornece as opções para definir um tema e uma ação de envio. O tema define a aparência, e a ação de envio define a ação a ser executada no envio de um formulário adaptável. Também é possível implantar modelos de amostra ao seu ambiente. Isso o ajuda a começar a criar formulários rapidamente.

  OBSERVAÇÃO

  Se você não tiver o modelo Formulários adaptáveis (componente principal) em seu ambiente, Habilite os Componentes principais dos formulários adaptáveis para o seu ambiente. Ao habilitar os componentes principais no seu ambiente, o modelo Formulários adaptáveis (Componente principal) será adicionado ao seu ambiente.

• Um tema de formulários adaptáveis: um tema contém detalhes de estilo para os componentes e painéis. Os estilos incluem propriedades como cores de fundo, cores de estado, transparência, alinhamento e tamanho. Ao aplicar um tema, o estilo especificado é refletido nos componentes correspondentes. A variável Canvas o tema é adicionado por padrão ao ativar os componentes principais para seu ambiente. Você pode baixar e personalizar os temas padrão. Para pronto para uso temas que você pode implantar temas de amostra ao seu ambiente. Isso o ajuda a começar a estilizar seus formulários e a fornecer uma estrutura básica para criar ou personalizar um tema de acordo com os requisitos da empresa.

• Permissões: adicionar usuários ao grupo forms-users. Os membros do grupo forms-users tem permissões para criar formulários adaptáveis. Para obter uma lista detalhada de grupos de usuários específicos de formulários, consulte Grupos e permissões.

Criação de um Formulário adaptável

1. Faça logon no local Instância de autor AEM.

2. Insira suas credenciais na página de logon do Experience Manager. Depois de fazer logon, no canto superior esquerdo, selecione Adobe Experience Manager > Forms > Forms e documentos.

3. Selecionar Criar > Criar Forms adaptável.

4. Selecione um modelo dos Componentes principais adaptáveis do Forms e clique em Próxima.

5. A variável Adicionar propriedades é exibida. Especifique os valores para os seguintes campos de propriedade. Os campos Título e Nome são obrigatórios:

   • Título: Especifica o nome de exibição do formulário. O título ajuda a identificar o formulário na interface do usuário do Experience Manager Forms.
   • Nome: especifica o nome do formulário. Um nó com o nome especificado será criado no repositório. Ao começar a digitar um título, o valor do campo de nome é gerado automaticamente. É possível alterar o valor sugerido. O campo de nome pode incluir apenas caracteres alfanuméricos, hifens e sublinhados.
   • Descrição: Especifica as informações detalhadas sobre o formulário.
   • Biblioteca de temas do cliente: Especifica o tema para um Formulário adaptável. Por padrão, a variável adaptiveform.theme.canvas3 o tema está selecionado. Você também pode escolher um tema diferente do Biblioteca de temas do cliente menu suspenso.
   • Contêiner de configuração: Define um local onde os arquivos de configuração do Adaptive Forms são armazenados. Esses arquivos de configuração contêm configurações e propriedades relacionadas ao comportamento e à aparência do Forms adaptável.
   • Tags: Especifica tags para identificar exclusivamente o Formulário adaptável. A ajuda das tags na pesquisa do formulário. Para criar tags, digite os novos nomes das tags na caixa Tags caixa.

6. Selecione Criar. Um formulário adaptável é criado e uma caixa de diálogo para abrir o formulário para edição é exibida.

7. Selecionar Editar para abrir o formulário recém-criado em uma nova guia. O formulário é aberto para edição e exibe o conteúdo disponível no template. Ele também exibe a barra lateral para personalizar o formulário recém-criado.

Usar os Componentes principais adaptáveis do Forms para criar seu formulário

Depois de abrir o formulário para edição, você pode usar os Componentes principais do Adaptive Forms disponíveis para adicionar campos de formulário ao formulário. Você pode arrastar e soltar ou usar o sinal + [inserir componente] opção para adicionar esses componentes a um formulário. Consulte Documentação dos Componentes principais do AEM para saber mais sobre os Componentes principais adaptáveis do Forms. Você também pode visitar https://aemcomponents.dev/ para ver os componentes principais disponíveis em ação.

Configurar a ação enviar para um formulário adaptável

Uma ação enviar permite escolher o destino dos dados capturados por meio de um formulário adaptável. É acionado quando um usuário clica no botão Enviar em um Formulário adaptável. Os formulários adaptáveis incluem algumas ações de envio prontas para uso. Você também pode estender ações de envio padrão para criar sua própria ação de envio personalizada. Para configurar uma Ação de envio para o formulário:

1. Abra o Navegador de conteúdo e selecione a variável Contêiner do guia componente do seu Formulário adaptável.

2. Clique nas propriedades do Container do guia ícone. A caixa de diálogo Contêiner de formulário adaptável é aberta.

3. Clique em Envio guia.

   

4. Selecionar e configurar um Enviar ação, com base nas suas necessidades. Para obter informações detalhadas sobre Ações de Envio, consulte Ação de envio do formulário adaptável

Redirecionar o usuário para uma página ou mostrar uma mensagem de agradecimento no envio do formulário

No envio de um formulário, você pode redirecionar o usuário para outra página da Web ou uma mensagem. Para redirecionar o usuário ou configurar a mensagem de agradecimento:

1. Abra o Navegador de conteúdo e selecione a variável Contêiner do guia componente do seu Formulário adaptável.

2. Clique nas propriedades do Container do guia ícone. A caixa de diálogo Contêiner de formulário adaptável é aberta.

3. Abra o Envio guia.

   

   • Para configurar um URL de redirecionamento, para na opção Enviar, selecione o Redirecionar para URL e procure e selecione uma página do AEM Sites ou forneça o URL de uma página externa.

   • Para configurar uma mensagem personalizada ou de agradecimento, para na opção Enviar, selecione o Mostrar mensagem e forneça uma mensagem na caixa de diálogo Conteúdo da mensagem caixa. É uma caixa de rich text, você pode usar a opção de tela cheia para exibir todos os itens de rich text disponíveis.

Configurar um esquema ou modelo de dados de formulário para um formulário adaptável

Você pode usar o Modelo de dados de formulário para conectar um formulário a uma Fonte de dados para enviar e receber dados com base nas ações do usuário. Você também pode conectar um formulário a um esquema JSON para receber os dados enviados em um formato predefinido. Com base no requisito, conecte seu formulário a um esquema JSON ou modelo de dados de formulário:

• Crie um esquema JSON e faça upload para o seu ambiente
• Criar um modelo de dados de formulário

Configurar um esquema JSON ou um modelo de dados de formulário para o formulário

Para configurar um Esquema JSON ou um Modelo de dados de formulário para seu formulário:

1. Abra o Navegador de conteúdo e selecione a variável Contêiner do guia componente do seu Formulário adaptável.

2. Clique nas propriedades do Container do guia ícone. A caixa de diálogo Contêiner de formulário adaptável é aberta.

3. Abra o Modelo de dados guia.

   

4. Selecione e configure um esquema JSON ou um modelo de dados de formulário, com base em seus requisitos:

   • Ao selecionar a variável Modelo de formulário , use o Selecionar modelo de dados do formulário opção para selecionar um modelo de dados de formulário pré-configurado.
   • Ao selecionar a variável Esquema , use o Esquema opção para selecionar um esquema JSON para o formulário.

5. Clique em Concluído.

Configurar um serviço de preenchimento

Você pode usar o serviço de preenchimento prévio para preencher automaticamente os campos de um Formulário adaptável usando dados existentes. Quando um usuário abre um formulário, os valores desses campos são preenchidos previamente. É possível:

• Criar um serviço de preenchimento prévio personalizado
• Usar o serviço de preenchimento do modelo de dados de formulário

Usar o serviço de preenchimento do modelo de dados de formulário para preencher previamente os campos de um formulário adaptável

Você pode usar o serviço de preenchimento do modelo de dados de formulário para preencher previamente os campos de um formulário adaptável usando um modelo de dados de formulário ou um serviço de preenchimento prévio personalizado. O serviço de Preenchimento do modelo de dados de formulário usa o Obter serviço do modelo de dados de formulário configurado para recuperar dados. Para usar o serviço de Preenchimento de modelo de dados de formulário para um Formulário adaptável:

1. Abra o Navegador de conteúdo e selecione a variável Contêiner do guia componente do seu Formulário adaptável.
2. Clique nas propriedades do Container do guia ícone. A caixa de diálogo Contêiner de formulário adaptável é aberta.
3. Clique nas propriedades do Contêiner de formulário adaptável ícone. A caixa de diálogo Contêiner de formulário adaptável para configurar os Modelos de dados é aberta.
   
4. Selecione um modelo de dados de formulário. Abra o Básico guia. No serviço de preenchimento, selecione Serviço de preenchimento do modelo de dados de formulário.
5. Clique em Concluído. O formulário adaptável agora está configurado para usar o Preenchimento prévio do modelo de dados de formulário. Agora você pode, use o editor de regras para criar regras para preencher previamente os campos do formulário.

O que vem a seguir

• Usar o editor de regras para adicionar comportamento dinâmico ao formulário
• Criar ou personalizar temas para Componentes principais com base no Forms adaptável

Consulte também:

• Criar um formulário adaptável baseado nos Componentes principais
• Criar ou adicionar um formulário adaptável a uma página do AEM Sites ou a um fragmento de experiência
• Modelos de temas de amostra e modelos de dados de formulário