Show Menu
TÓPICOS×

Tutorial:Criar seu primeiro formulário adaptável

Introdução

Você está procurando uma experiência de formulários para dispositivos móveis que simplifique as inscrições, aumente o envolvimento e reduza o tempo de resposta, os formulários adaptáveis são adequados para você? Formulários adaptáveis oferecem uma experiência móvel, de automação e de formulários compatíveis com análises. Você pode criar facilmente formulários responsivos e interativos na 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árias guias. Cada guia o ajuda a aprender e adicionar novos recursos ao formulário adaptativo criado neste tutorial. Você tem um formulário adaptativo funcionando depois de cada guia. O guia para criar um formulário adaptável está disponível. Guias subsequentes estarão disponíveis em breve. No final deste tutorial, você poderá:
  • Crie um formulário adaptável e um modelo de dados de formulário.
  • Estilo do 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.
A jornada começa com o aprendizado do caso de uso:
Um site da Web oferece uma variedade de produtos para diversos clientes. Os clientes navegam pelo portal, selecionam e solicitam os produtos. Cada cliente cria uma conta e fornece endereços de remessa e faturamento. Uma cliente já 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 o 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 a adição de endereço e o formulário de atualização para recuperar e exibir endereços disponíveis. Eles também usam o formulário adaptável para aceitar endereços atualizados e novos.

Pré-requisitos

  • Configure uma instância do autor do AEM.
  • Instale o complemento Instalar e configurar os recursos de captura de dados do AEM Forms na instância do autor.
  • Obtenha o driver de banco de dados JDBC (arquivo JAR) do provedor de banco de dados. Os exemplos no tutorial são baseados no banco de dados MySQL e usam o driver de banco de dados MySQL JDBC da Oracle.
  • 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 do formulário e os recursos de persistência do AEM Forms.

Etapa 1: Criar um formulário adaptável

Os formulários adaptáveis são de nova geração, envolventes, responsivos, dinâmicos e adaptáveis na natureza. Usando formulários adaptáveis, você pode fornecer experiências personalizadas e direcionadas. O AEM Forms fornece um editor WYSIWYG 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.
Objetivos:
  • Criar um formulário adaptável que permita ao 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
  • Criar ação de envio para enviar um email contendo conteúdo de formulário
  • Visualizar e enviar um formulário adaptável

Step 2: Create Form Data Model

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 do AEM, serviços Web RESTful, serviços da Web baseados em SOAP, serviços OData e bancos de dados relacionais. Um modelo de dados de formulário é um esquema unificado de representação de dados de entidades de negócios e serviços 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 a fontes de dados conectadas.
Objetivos:
  • Configurar a instância do banco de dados do site (banco de dados MySQL) como fontes de dados
  • Criar o modelo de dados de formulário usando o banco de dados MySQL como uma fonte de dados
  • Adicionar objetos de modelo de dados ao modelo de dados de formulário
  • Configurar serviços de leitura e gravação para o modelo de dados de formulário
  • Testar modelo de dados de formulário e serviços configurados com dados de teste

Etapa 3: Aplicar regras a campos de formulário adaptáveis

Formulários adaptáveis fornecem um editor para escrever regras em objetos de formulário adaptáveis. Essas regras definem ações para acionar objetos de formulário com base em condições predefinidas, entradas do usuário e ações do usuário no formulário. Ele ajuda a garantir a precisão e acelera a experiência de preenchimento do formulário.
Objetivos:
  • Criar e aplicar regras a campos de formulário adaptáveis
  • Usar regras para acionar serviços de modelo de dados de formulário para atualizar dados para o banco de dados

Etapa 4:Estilo do formulário adaptável

Os formulários adaptativos fornecem temas e um editor para criar temas para os formulários adaptativos. Um tema contém detalhes de estilização para componentes e painéis, e você pode reutilizar um tema em diferentes formas. Os estilos incluem propriedades como cores de plano de fundo, cores de estado, transparência, alinhamento e tamanho. Quando o tema é aplicado ao formulário, o estilo especificado é refletido nos componentes correspondentes do formulário. Formulários adaptáveis também suportam estilos em linha para estilos específicos de um formulário.
Objetivos:
  • Aplicar um tema predefinido a um formulário adaptável
  • Criar um tema para formulário adaptável usando o editor de temas
  • Usar fontes da Web em um tema personalizado

Etapa 5: Teste o formulário adaptável

Formulários adaptáveis são parte integrante das interações do cliente. É importante testar seus formulários adaptáveis com todas as alterações feitas neles. Testar cada campo de um formulário é tedioso. O AEM Forms fornece um SDK (Calvin SDK) para automatizar o teste de formulários adaptáveis. O Calvin permite que você automatize o teste de seus formulários adaptáveis no navegador da Web.
Objetivos:
  • Criar conjunto de testes para o formulário adaptável
  • Criar casos de teste para formulários adaptáveis
  • Execute os casos de teste

Etapa 6: Publicar seu formulário adaptativo

Você pode publicar formulários adaptáveis como um formulário independente (aplicativo de página única), incluir na página Incorporar um formulário adaptável ou uma comunicação interativa na página de sites do AEM de sites do AEM ou listar em um site do AEM usando o Portal de formulários.
Objetivos:
  • Publicar o formulário adaptativo como uma página do AEM
  • Incorporar o formulário adaptável em uma página do AEM Sites
  • Incorporar o formulário adaptativo em uma página da Web externa (uma página da Web que não seja do AEM hospedada fora do AEM)