Tutorial: criar o primeiro formulário adaptável tutorial-create-your-first-adaptive-form

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

01-criar-primeiro-formulário-adaptável-imagem-herói

Introdução introduction

Você está procurando uma experiência de formulários para dispositivos móveis que simplifique a inscrição, aumente o engajamento e reduza o tempo de conclusão. Os formulários adaptáveis são perfeitos para você. Os formulários adaptáveis fornecem uma experiência em formulários móveis, de automação e compatíveis com a análise. Você pode criar facilmente formulários responsivos e interativos por natureza, usar processos automatizados para reduzir tarefas administrativas e repetitivas e usar a análise de dados para melhorar e personalizar a experiência que os clientes têm com seus formulários.

Este tutorial fornece uma estrutura completa para criar um formulário adaptável. O tutorial é organizado em um caso de uso e em vários guias. Cada guia ajuda você a conhecer e adicionar novos recursos ao formulário adaptável criado neste tutorial. Você tem um formulário adaptável de trabalho depois de cada guia. O guia para criar um formulário adaptável está disponível. Guias subsequentes serão lançados em breve. No final deste tutorial, você poderá fazer o seguinte:

  • Crie um formulário adaptável e um modelo de dados de formulário.
  • Estilize o formulário adaptável.
  • Use o editor de regras de formulário adaptável para criar regras de negócios.
  • Teste e publique um formulário adaptável.

create-adaptive-form-workflow

A jornada começa aprendendo o caso de uso:

Um site oferece uma variedade de produtos para clientes diversos. Os clientes navegam pelo portal, selecionam e solicitam os produtos. Cada cliente cria uma conta e fornece endereços de entrega e cobrança. Uma cliente existente, Sara Rose, está procurando adicionar seu endereço de entrega ao site. O site fornece um formulário online para adicionar e atualizar endereços de envio.

O site é executado no Adobe Experience Manager (AEM) e usa AEM Forms para captura e processamento de dados. O formulário de adição e atualização de endereço é um formulário adaptável. O site armazena os detalhes do cliente em um banco de dados. Eles usam o formulário de adição e atualização de endereço para recuperar e exibir os endereços disponíveis. Eles também usam o formulário adaptável para aceitar endereços atualizados e novos.

Pré-requisitos prerequisite

  • Configurar uma instância de autor do AEM

  • Instale o complemento do AEM Forms na instância do autor.

  • Obter o driver de banco de dados JDBC (arquivo JAR) do provedor de banco de dados. Exemplos no tutorial são baseados no banco de dados MySQL e usam o Oracle’s driver do banco de dados JDBC do MySQL.

  • Configure um banco de dados contendo dados do cliente com os campos exibidos abaixo. Um banco de dados não é essencial para criar um formulário adaptável. Este tutorial usa um banco de dados para exibir o modelo de dados de formulário e os recursos de persistência do AEM Forms.

adaptiveformdata

Etapa 1: Criar um formulário adaptável step-create-an-adaptive-form

03-criar-formulário-adaptável-imagem-principal_pequena

Os formulários adaptáveis são de nova geração, envolventes, responsivos, dinâmicos e de natureza adaptável. Usando formulários adaptáveis, você pode fornecer experiências personalizadas e direcionadas. O AEM Forms fornece um editor WYSIWYG de arrastar e soltar para criar formulários adaptáveis. Para obter mais informações sobre formulários adaptáveis, consulte Introdução à criação de formulários adaptáveis.

Metas:

  • Crie um formulário adaptável que permita a um cliente adicionar um endereço de entrega.
  • Campos de layout de um formulário adaptável para exibir e aceitar informações de um cliente.
  • Crie uma ação de envio para enviar um email com conteúdo de formulário.
  • Pré-visualize e envie um formulário adaptável.

Consulte o guia

Etapa 2: Criar modelo de dados do formulário step-create-form-data-model

05-criar-formulário-modelo-dados-principal_pequeno

Um modelo de dados de formulário permite conectar um formulário adaptável a fontes de dados diferentes. Por exemplo, perfil de usuário AEM, serviços Web RESTful, serviços Web baseados em SOAP, serviços OData e bancos de dados relacionais. Um modelo de dados de formulário é um esquema de representação de dados unificada de entidades e serviços comerciais disponíveis em fontes de dados conectadas. Você pode usar o modelo de dados de formulário com um formulário adaptável para recuperar, atualizar, excluir e adicionar dados às fontes de dados conectadas.

Metas:

  • Configure a instância do banco de dados do site (banco de dados MySQL) como uma fonte de dados.
  • Crie o modelo de dados de formulário usando o banco de dados MySQL como fonte de dados.
  • Adicione objetos de modelo de dados para poder formar o modelo de dados.
  • Configure os serviços de leitura e gravação para o modelo de dados de formulário.
  • Testar o modelo de dados do formulário e os serviços configurados com dados de teste.

Consulte o guia

Etapa 3: Aplicar regras a campos de formulário adaptáveis step-apply-rules-to-adaptive-form-fields

07-aplicar-regras-ao-formulário-adaptável_pequeno

Os formulários adaptáveis fornecem um editor para gravar regras em objetos de formulário adaptáveis. Essas regras definem as ações a serem acionadas nos objetos de formulário com base nas condições predefinidas, entradas do usuário e ações do usuário no formulário. Isso ajuda a garantir a precisão e acelera a experiência de preenchimento de formulários.

Metas:

  • Crie e aplique regras a campos de formulário adaptáveis.
  • Use regras para acionar serviços de modelo de dados de formulário para atualizar os dados para o banco de dados.

Consulte o guia

Etapa 4: Crie o estilo do formulário adaptável step-style-your-adaptive-form

estilo de formulário adaptável

Os formulários adaptáveis fornecem temas e um editor para criar temas para os formulários adaptáveis. Um tema contém detalhes de estilo para componentes e painéis, e você pode reutilizar um tema em diferentes formas. Os estilos incluem propriedades como cores de fundo, cores de estado, transparência, alinhamento e tamanho. Quando você aplica o tema ao formulário, o estilo especificado é refletido nos componentes correspondentes do formulário. Os formulários adaptáveis também aceitam estilos em linha para estilos específicos de um formulário.

Metas:

  • Aplique um tema pronto para uso a um formulário adaptável.
  • Crie um tema para formulário adaptável usando o editor de temas.
  • Use Web Fonts em um tema personalizado.

Consulte o guia

Etapa 5: Publish seu formulário adaptável step-publish-your-adaptive-form

12-publicar-seu-formulário-adaptável-pequeno_pequeno

Você pode publicar formulários adaptáveis como um formulário independente (aplicativo de página única), incluir na página Sites do AEM ou listar em um Site AEM usando o Portal Forms.

Metas:

  • Publish o formulário adaptável como uma página AEM.
  • Incorpore o formulário adaptável em uma página do AEM Sites.
  • Incorpore o formulário adaptável em uma página da Web externa (uma página da Web não AEM hospedada fora do AEM).

Consulte o guia

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2