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 a análise. Você pode criar facilmente formulários que sejam 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 start com o aprendizado do caso de uso:
Um site oferta 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 on-line 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 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 AEM.
  • Instale o complemento 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 MySQL banco de dados e usam o driver Oracle's de banco de dados JDBC 5.1.html 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 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. AEM Forms fornecer 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:
  • Crie 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
  • Pré-visualização e envio de 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, AEM perfil do usuário, 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 schema de representação de dados unificado 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 dadosMySQL ) 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 adaptáveis. 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. AEM Forms fornecer 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 AEM página Sites ou lista em um AEM usando o Site Forms Portal Introdução à publicação de formulários em um portal .
Objetivos:
  • Publicar o formulário adaptativo como uma página AEM
  • Incorporar o formulário adaptativo em uma Sites página AEM
  • Incorporar o formulário adaptativo em uma página da Web externa (uma página da Web não AEM hospedada fora do AEM)