Criação de um Formulário adaptável creating-an-adaptive-form-core-components

Versão
Link do artigo
AEM 6.5
Clique aqui
AEM as a Cloud Service
Este artigo

Formulários adaptáveis permitem criar formulários envolventes, responsivos, dinâmicos e adaptáveis. O AEM Forms fornece um assistente comercial fácil de usar para criar rapidamente formulários adaptáveis. O assistente fornece uma navegação por guias rápidas para selecionar facilmente modelos pré-configurados, estilos, 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 novos formulários, a Adobe recomenda o uso dos Componentes principais do Adaptive Forms para criar um Forms Adaptável.

Assistente para criar um formulário adaptável

Pré-requisitos

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

  • Habilitar os Componentes principais adaptáveis do Forms para o seu ambiente: quando você cria um programa, os Componentes principais adaptáveis do Forms já estão habilitados para o seu ambiente. Se possuir um ambiente do Forms as a Cloud Service baseado no arquétipo 39 ou anterior, Habilite os componentes principais dos formulários adaptáveis no seu ambiente. Ao habilitar os componentes principais no seu ambiente, o modelo Formulários adaptáveis (Componente principal) e o tema da tela são adicionados ao seu ambiente. Se sua versão do SDK do AEM for anterior à 2023.02.0, certifique-se de queprerelease o sinalizador esteja habilitado em seu ambiente, pois os componentes principais dos formulários adaptáveis faziam parte do pré-lançamento antes da versão 2023.02.0.

  • 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. Por exemplo, enviar os dados coletados para uma fonte de dados. O serviço de nuvem fornece um modelo OOTB, chamado de em branco:

    • O modelo blank está incluído em todos os novos programas do AEM Forms as a Cloud Service.
    • É possível instalar o pacote de referência, por meio do Gerenciador de pacotes, para adicionar o modelo blank para o seu programa do AEM Forms as a Cloud Service.
    • Você também pode criar um modelo Adaptive Forms (Componentes principais) do zero.
    • Você também pode implantar modelos de amostra em seu ambiente. Isso o ajuda a começar a criar formulários rapidamente.
  • 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 modelo Canvas é incluído em todos os novos programas as a Cloud Service do AEM Forms. Você também 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-core-components

  1. Faça logon na Instância do autor do Experience Manager Forms. Pode ser uma instância da nuvem ou uma instância de desenvolvimento local.

  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. Selecione Criar > Forms Adaptável. O Assistente será aberto. Na guia Origem, selecione um modelo:

    Modelo dos componentes principais

    Ao selecionar um modelo, o tema e a ação de envio especificados no modelo são selecionados automaticamente e o botão Criar será habilitado. Você pode ir para as guias Estilo ou Envio para selecionar um tema ou uma ação de envio diferente. Se o modelo selecionado não especificar um tema, o botão criar permanecerá desabilitado. É possível ir para a guia Estilos para selecionar um tema manualmente.

    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.
  4. Na guia Estilo, selecione um tema:

    • Quando o modelo selecionado especifica um tema, ele é selecionado automaticamente no assistente. Você também pode escolher um tema diferente da guia de Estilo.

    • Se o modelo selecionado não especificar um tema, será possível usar a guia de Estilo para escolher um tema. O botão Criar só será ativado depois que um tema for selecionado.

  5. (Opcional) Na guia Dados, selecione um modelo de dados:

    • Modelo de dados de formulário (FDM): o Modelo de Dados de Formulário permite integrar entidades e serviços de diferentes fontes de dados a um Formulário adaptável. Escolha Modelo de dados de formulário (FDM) se o Formulário adaptável que você está criando envolver a busca e a gravação de dados de e para várias fontes de dados.

    • Esquema JSON: Esquema JSON nosso formulário adaptável baseado em componentes principais permite a integração perfeita com o sistema back-end da sua organização, fornecendo a capacidade de associar um esquema JSON, que representa a estrutura dos dados que estão sendo produzidos ou consumidos. Essa associação permite que os autores adicionem conteúdo dinamicamente ao Formulário adaptável usando os elementos do esquema. Os elementos do esquema são facilmente acessíveis na guia Objetos do modelo de dados do navegador de conteúdo durante o processo de criação e todos os campos são adicionados automaticamente a qualquer formulário adaptável criado.

    Por padrão, todos os campos do esquema JSON associado são selecionados e convertidos automaticamente nos componentes de Formulários adaptáveis correspondentes, simplificando o processo de criação. O assistente oferece a conveniência adicional de permitir a escolha seletiva de quais campos devem ser incluídos no Formulário adaptável usando caixas de seleção.

  6. Na guia Envio, selecione uma ação de envio:

    • Ao selecionar um modelo, a ação de envio especificada no modelo é selecionada automaticamente. É possível selecionar uma ação de envio diferente na guia Envio. A guia Envio exibe todas as ações de envio disponíveis.

    • Quando o modelo selecionado não especificar uma ação de envio, você poderá usar a guia Envio para selecionar uma

  7. (Opcional) Na guia Entrega, é possível especificar uma data de publicação ou cancelamento da publicação para um Formulário adaptável.

  8. Selecione Criar. Uma caixa de diálogo para especificar o título, o nome e o local para salvar o Formulário adaptável será exibida:

    • 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. Todas as entradas inválidas são substituídas por um hífen.
    • Caminho: especifica o local no qual o Formulário adaptável deverá ser salvo. É possível salvar o formulário adaptável diretamente em /content/dam/formsanddocuments ou criar uma pasta como /content/dam/formsanddocuments/adaptiveforms para salvar um Formulário adaptável. Certifique-se de criar a pasta antes de usá-la no caminho. O campo Caminho não cria uma pasta automaticamente.
  9. Selecione Criar. Um Formulário adaptável será criado e aberto no editor de Formulários adaptáveis. O editor exibirá o conteúdo disponível no modelo. Com base no tipo de Formulário adaptável, os elementos de formulário presentes no esquema JSON do associado ou no Modelo de Dados de Formulário (FDM) são exibidos na guia Objetos do Modelo de Dados do Navegador de Conteúdo na barra lateral. Também é possível arrastar e soltar esses elementos para criar seu formulário adaptável.

Agora você pode arrastar e soltar os Componentes principais do Forms adaptável no contêiner do Adaptive Forms para criar o formulário. 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:

  1. Abra o navegador Conteúdo e selecione o componente Contêiner do Guia do seu Formulário adaptável.

  2. Clique no ícone de propriedades do Guia Contêiner Propriedades do Guia . A caixa de diálogo Contêiner de formulário adaptável é aberta.

  3. Clique na guia Envio.

    Clique no ícone de chave inglesa para abrir a caixa de diálogo Contêiner de formulário adaptável para configurar uma ação de envio

  4. 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:

  1. Abra o navegador Conteúdo e selecione o componente Contêiner do Guia do seu Formulário adaptável.

  2. Clique no ícone de propriedades do Guia Contêiner Propriedades do Guia . A caixa de diálogo Contêiner de formulário adaptável é aberta.

  3. Abra a guia Envio.

    Clique no ícone de chave inglesa para abrir a caixa de diálogo Contêiner de formulário adaptável e configurar uma página de redirecionamento ou mensagem de agradecimento

    • 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 (FDM) para um Formulário adaptável configure-schema-or-data-model-for-form

Você pode usar o Modelo de dados de formulário (FDM) para conectar um formulário a um Source 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. Com base no requisito, conecte seu formulário a um esquema JSON ou Modelo de dados de formulário (FDM):

Configure um Esquema JSON ou um Modelo de dados de formulário (FDM) para o seu formulário

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

  1. Abra o navegador Conteúdo e selecione o componente Contêiner do Guia do seu Formulário adaptável.

  2. Clique no ícone de propriedades do Guia Contêiner Propriedades do Guia . A caixa de diálogo Contêiner de formulário adaptável é aberta.

  3. Abra a guia Modelo de Dados.

    Clique no ícone de chave inglesa para abrir a caixa de diálogo Contêiner de formulário adaptável para configurar um esquema JSON ou um modelo de dados de formulário (FDM)

  4. Selecione e configure um Esquema JSON ou um Modelo de dados de formulário (FDM), 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 (FDM) pré-configurado.
    • Ao selecionar a opção Esquema, use a opção Esquema para selecionar um esquema JSON para o formulário.
  5. 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:

  1. Abra o navegador Conteúdo e selecione o componente Contêiner do Guia do seu Formulário adaptável.
  2. Clique no ícone de propriedades do Guia Contêiner Propriedades do Guia . A caixa de diálogo Contêiner de formulário adaptável é aberta.
  3. Clique no ícone de propriedades do Contêiner de formulário adaptável propriedades do Contêiner de formulário adaptável . A caixa de diálogo Contêiner de formulário adaptável para configurar os Modelos de dados é aberta.
    Clique no ícone de chave inglesa para abrir a caixa de diálogo Contêiner de formulário adaptável e configurar uma página de redirecionamento ou mensagem de agradecimento
  4. Selecione um modelo de dados de formulário (FDM). Abra a guia Básico. No serviço de preenchimento, selecione Serviço de Preenchimento de 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 usar o editor de regras para criar regras e preencher previamente os campos do formulário.

Edição das propriedades do modelo de formulário de um formulário adaptável edit-form-model

  1. Selecione o Formulário adaptável e selecione Informações da página > Abrir propriedades. A página Propriedades do formulário será aberta.

  2. Vá para a guia Modelo de formulário e escolha um modelo de formulário. Se o Formulário adaptável não tiver um modelo de formulário, você terá a liberdade de escolher um esquema JSON ou um modelo de dados de formulário (FDM). Por outro lado, se o formulário adaptável já estiver baseado em um modelo de formulário, você terá a opção de alternar para outro modelo de formulário do mesmo tipo. Por exemplo, se o formulário estiver usando um esquema JSON, você poderá alternar facilmente para outro esquema JSON e, de forma semelhante, se o formulário estiver usando um Modelo de dados de formulário (FDM), será possível alternar para outro Modelo de dados de formulário (FDM).

  3. Selecione Salvar para salvar as propriedades.

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:

  1. Selecione um formulário adaptável na interface do usuário do AEM Forms.
  2. Clique nas Propriedades localizadas no painel superior.
  3. Altere o nome do formulário na guia Título, conforme mostrado na imagem abaixo.
  4. Clique em Salvar e fechar.

Renomear um Formulário adaptável de AEM

Consulte também see-also

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