Crie seu primeiro formulário adaptável

01-create-first-adaptive-form-herói-image

Introdução

Você está procurando uma experiência com formulários para dispositivos móveis que simplifique os inscritos, aumente o envolvimento e reduza o tempo de resposta, formulários adaptativos é a melhor opção 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.

create-daptive-form-workflow

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 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 AEM.

  • Instale complemento 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 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.

adaptiveformdata

Etapa 1: Criar um formulário adaptável

03-create-adaptive-form-main-image_small_new

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. A AEM Forms fornece um editor WYSIWYG para 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.

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

    see-the-guide-sm

Etapa 2: Criar Modelo de Dados de Formulário

05-create-form-data-model-main_small

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

    see-the-guide-sm

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

07-apply-rules-to-adaptive-form_small

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

09-Estilo-sua-forma-adaptativa_pequena

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

    see-the-guide-sm

Etapa 5: Teste o formulário adaptável

11-teste-sua-forma adaptativa

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

  • Instalar o Calvin SDK
  • Criar conjunto de testes e casos de teste para o formulário de endereço de alteração

Para saber mais sobre o SDK, consulte Usando testes automatizados com AEM Formulário adaptável.

Etapa 6: Publicar o formulário adaptativo

12-publish-your-adaptive-form-_small

Você pode publicar formulários adaptativos como um formulário independente (aplicativo de página única), incluir em AEM página de sites ou lista em um site AEM usando Forms Portal.

Objetivos:

  • Publicar o formulário adaptável como um aplicativo de página única

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free