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, o Adobe recomenda usar Componentes principais adaptáveis do Forms para criar uma Forms adaptável.

Assistente para criar um formulário 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: ao criar 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.
    • Também é possível criar um modelo do Forms adaptável (Componentes principais) do zero.
    • Também é possível implantar modelos de amostra ao 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. A variável Canvas O modelo de está incluído em todos os novos programas do AEM Forms as a Cloud Service. Também é possível 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 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. Selecionar 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 do formulário: um Modelo de dados do formulário permite integrar entidades e serviços de diferentes fontes de dados a um formulário adaptável. Escolha a opção Modelo de dados de formulário se o formulário adaptável que você está criando envolve a obtenção e 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 associado ou no modelo de dados de formulário 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 a variável Componentes principais adaptáveis do Forms para o contêiner Adaptive Forms para projetar e 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 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 Propriedades do guia ícone. A caixa de diálogo Contêiner de formulário adaptável é aberta.

  3. Clique em Envio guia.

    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. 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 Propriedades do guia ícone. A caixa de diálogo Contêiner de formulário adaptável é aberta.

  3. Abra o Envio guia.

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

    • 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 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:

  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 Propriedades do guia ícone. A caixa de diálogo Contêiner de formulário adaptável é aberta.

  3. Abra o Modelo de dados guia.

    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

  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 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 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 Propriedades 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 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.
    Clique no ícone de chave inglesa para abrir a caixa de diálogo Contêiner do formulário adaptável para configurar uma página de redirecionamento ou mensagem de agradecimento
  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.

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. 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, você poderá alternar para outro Modelo de dados de formulário.

  3. Selecionar Salvar para salvar as propriedades.

Consulte também see-also

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