Criar componentes principais com base no Forms adaptável creating-an-adaptive-form-core-components
O Adobe recomenda usar os Componentes Principais para adicionar o Adaptive Forms a uma Página do AEM Sitesou para criar o Adaptive Formsindependente.
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, a Adobe recomenda o uso dos Componentes principais do Adaptive Forms para criar um Adaptive Forms.
Pré-requisitos
Você precisará do seguinte para criar um formulário adaptável:
-
Habilitar os Componentes Principais do Forms Adaptive para seu ambiente: o projeto AEM Archetype versão 41 ou posterior é necessário para habilitar os Componentes Principais para seu ambiente. Ao habilitar os Componentes principais para o seu ambiente, o modelo Forms adaptável (Componente principal) e o tema da Tela 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. Você também pode implantar modelos de amostra em seu ambiente. Isso o ajuda a começar a criar formulários rapidamente.
note note NOTE 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. O tema
Canvasé adicionado por padrão quando você habilita os componentes principais para o seu ambiente. Você pode baixar e personalizar os temas padrão. Para temas prontos, você pode implantar temas de amostra em 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 create-an-adaptive-form
-
Faça logon na instância de autor do AEM local.
-
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.
-
Selecione Criar > Criar Forms Adaptável.
-
Selecione um modelo dos Componentes principais adaptáveis do Forms e clique em Avançar.
-
A opção 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 de Cliente: Especifica o tema para um Formulário Adaptável. Por padrão, o tema
adaptiveform.theme.canvas3é selecionado. Você também pode escolher um tema diferente do menu suspenso Biblioteca de Temas do Cliente. - 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.
- Marcas: especifica as marcas para identificar exclusivamente o Formulário adaptável. A ajuda das tags na pesquisa do formulário. Para criar marcas, digite novos nomes de marcas na caixa Marcas.
-
Selecione Criar. Um formulário adaptável é criado e uma caixa de diálogo para abrir o formulário para edição é exibida.
-
Selecione 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 a opção + [inserir componente] para adicionar esses componentes a um formulário. Consulte a 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 configure-submit-action-for-form
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:
-
Abra o navegador Conteúdo e selecione o componente Contêiner do Guia do seu Formulário adaptável.
-
Clique no ícone de propriedades do Guia Contêiner
-
Clique na guia Envio.
-
Selecione e configure uma Ação de envio, com base em 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:
-
Abra o navegador Conteúdo e selecione o componente Contêiner do Guia do seu Formulário adaptável.
-
Clique no ícone de propriedades do Guia Contêiner
-
Abra a guia Envio.
-
Para configurar uma URL de Redirecionamento, para a opção Enviar, selecione a opção Redirecionar para URL e procure e selecione uma página do AEM Sites ou forneça a URL de uma página externa.
-
Para configurar uma mensagem personalizada ou de agradecimento, para a opção Enviar, selecione a opção Mostrar Mensagem e forneça uma mensagem na caixa Conteúdo da Mensagem. É 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 configure-schema-or-data-model-for-form
Você pode usar o modelo de dados do formulário e conectar um formulário a uma fonte de dados para enviar e receber dados com base nas ações do usuário. Também é possível conectar um formulário a um esquema JSON para receber os dados enviados em um formato predefinido. De acordo com os requisitos, conecte o formulário a um esquema JSON ou modelo de dados do 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:
-
Abra o navegador Conteúdo e selecione o componente Contêiner do Guia do seu Formulário adaptável.
-
Clique no ícone de propriedades do Guia Contêiner
-
Abra a guia Modelo de Dados.
-
Selecione e configure um esquema JSON ou um modelo de dados de formulário, com base em seus requisitos:
- Ao selecionar a opção Modelo de formulário, use a opção Selecionar modelo de dados de formulário para selecionar um modelo de dados de formulário pré-configurado.
- Ao selecionar a opção Esquema, use a opção Esquema para selecionar um esquema JSON para o formulário.
-
Clique em Concluído.
Configurar um serviço de preenchimento configure-prefill-service-for-form
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:
Usar o serviço de preenchimento do modelo de dados de formulário para preencher previamente os campos de um formulário adaptável fdm-prefill-service
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 de 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:
- Abra o navegador Conteúdo e selecione o componente Contêiner do Guia do seu Formulário adaptável.
- Clique no ícone de propriedades do Guia Contêiner
- Clique no ícone de propriedades do Contêiner de formulário adaptável
- Selecione um modelo de dados de formulário. Abra a guia Básico. No serviço de preenchimento, selecione Serviço de Preenchimento de Modelo de Dados de Formulário.
- 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 usar o editor de regras para criar regras e preencher previamente os campos do formulário.
Como renomear um formulário adaptável para AEM? rename-an-AEM-Adaptive-Form
Para renomear um formulário adaptável, execute as seguintes etapas:
-
Selecione um formulário adaptável na interface do usuário do AEM Forms.
-
Clique nas Propriedades localizadas no painel superior.
-
Altere o nome do formulário na guia Título, conforme mostrado na imagem abaixo.
-
Clique em Salvar e fechar.
