Tutorial: Aplicar regras a campos de formulário adaptáveis

06-apply-rules-to-adaptive-form_main

Este tutorial é uma etapa da série Criar seu primeiro formulário adaptável. A Adobe recomenda seguir a série em sequência cronológica para entender, executar e demonstrar o caso de uso do tutorial completo.

Sobre o tutorial

Você pode usar regras para adicionar interatividade, lógica comercial e validações inteligentes a um formulário adaptável. Formulários adaptáveis têm um editor de regras incorporado. O editor de regras fornece uma funcionalidade de arrastar e soltar, semelhante aos tours guiados. O método arrastar e soltar é o método mais rápido e fácil de criar regras. O editor de regras também fornece uma janela de código para usuários interessados em testar suas habilidades de codificação ou levar as regras para o próximo nível.

Você pode saber mais sobre o editor de regras em Editor de regras Adaptive Forms.

Ao final do tutorial, você aprenderá a criar regras para:

  • Chame um serviço de Modelo de dados de formulário para recuperar dados do banco de dados
  • Chame um serviço de Modelo de dados de formulário para adicionar dados ao banco de dados
  • Executar uma verificação de validações e exibir mensagens de erro

As imagens GIF interativas ao final de cada seção do tutorial ajudam você a aprender e validar a funcionalidade do formulário que está criando, dinamicamente.

Etapa 1: Recuperar um registro de cliente do banco de dados

Você criou um modelo de dados de formulário seguindo o artigo criar modelo de dados de formulário. Agora, você pode usar o editor de regras para chamar os serviços do Forms Data Model para recuperar e adicionar informações ao banco de dados.

A cada cliente é atribuído um número exclusivo de ID do cliente, que ajuda a identificar os dados relevantes do cliente em um banco de dados. O procedimento abaixo usa a ID do cliente para recuperar informações do banco de dados:

  1. Abra o formulário adaptável para edição.

    http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html

  2. Toque no campo ID do cliente e toque no ícone Editar regras. A janela Editor de regras é aberta.

  3. Toque no ícone + Criar para adicionar uma regra. Ele abre o Editor visual.

    No Editor visual, a instrução WHEN é selecionada por padrão. Além disso, o objeto de formulário (neste caso, ID do cliente) de onde você iniciou o editor de regras é especificado na instrução WHEN.

  4. Toque no menu suspenso Selecionar estado e selecione está alterado.

    whencustomeridischanged

  5. Na instrução THEN, selecione Chamar serviço no menu suspenso Selecionar ação.

  6. Selecione o serviço Recuperar Endereço de Entrega no menu suspenso Selecionar.

  7. Arraste e solte o campo ID do cliente da guia Objetos de formulário para o campo Soltar objeto ou selecione here na caixa INPUT.

    dropojetstoinputfield-retrievedata

  8. Arraste e solte o campo ID do cliente, Nome, Endereço de envio, Estado e CEP da guia Objetos de formulário para o campo Soltar objeto ou selecione here na caixa SAÍDA.

    dropobjetstooutputfield-retrievedata

    Toque em Concluído para salvar a regra. Na janela do editor de regras, toque em Close.

  9. Pré-visualização o formulário adaptável. Insira uma ID no campo ID do cliente. O formulário agora pode recuperar detalhes do cliente do banco de dados.

    retrieve-information

Etapa 2: Adicione o endereço do cliente atualizado ao banco de dados

Depois que os detalhes do cliente forem recuperados do banco de dados, você poderá atualizar o endereço de entrega, o estado e o CEP. O procedimento abaixo chama um serviço de Modelo de dados de formulário para atualizar as informações do cliente para o banco de dados:

  1. Selecione o campo Enviar e toque no ícone Editar regras. A janela Editor de regras é aberta.

  2. Selecione a regra Enviar - Clique e toque no ícone Editar. As opções para editar a regra Enviar são exibidas.

    regra de envio

    Na opção WHEN, as opções Submit e são clicadas já estão selecionadas.

    submit-is-click

  3. Na opção THEN, toque na opção + Adicionar instrução. Selecione Chamar serviço no menu suspenso Selecionar ação.

  4. Selecione o serviço Atualizar Endereço de Entrega no menu suspenso Selecionar.

    update-Shipping-address

    dropojetstoinputfield-updatedata

  5. Arraste e solte o campo Endereço de entrega, Estado e CEP da guia Objetos de formulário para a propriedade tablename correspondente .property (por exemplo, customerdetails .ShippingAddress) do objeto Solte ou selecione here na caixa INPUT. Todos os campos com prefixo tablename (por exemplo, detalhes do cliente neste caso de uso) servem como dados de entrada para o serviço de atualização. Todo o conteúdo fornecido nesses campos é atualizado na fonte de dados.

    OBSERVAÇÃO

    Não arraste e solte os campos Name e ID do cliente para o tablename.property correspondente (por exemplo, customerdetails.name). Isso ajuda a evitar a atualização do nome e da ID do cliente por engano.

  6. Arraste e solte o campo ID do cliente da guia Objetos de formulário para o campo id na caixa INPUT. Os campos sem um nome de tablet prefixo (por exemplo, detalhes do cliente neste caso de uso) servem como parâmetro de pesquisa para o serviço de atualização. O campo id neste caso de uso identifica exclusivamente um registro na tabela customerdetails.

  7. Toque em Concluído para salvar a regra. Na janela do editor de regras, toque em Close.

  8. Pré-visualização o formulário adaptável. Recupere os detalhes de um cliente, atualize o endereço de envio e envie o formulário. Quando você recupera os detalhes do mesmo cliente novamente, o endereço de entrega atualizado é exibido.

Etapa 3: (seção Bônus) Use o editor de códigos para executar validações e exibir mensagens de erro

É necessário executar a validação no formulário para garantir que os dados inseridos no formulário estejam corretos e que uma mensagem de erro seja exibida no caso de dados incorretos. Por exemplo, se uma ID de cliente não existente for inserida no formulário, uma mensagem de erro deverá ser exibida.

Os formulários adaptáveis fornecem vários componentes com validações incorporadas, por exemplo, e-mail e campos numéricos que podem ser usados para casos de uso comuns. Use o editor de regras para casos de uso avançado, por exemplo, para exibir uma mensagem de erro quando o banco de dados retornar zero (0) registros (nenhum registro).

O procedimento a seguir mostra como criar uma regra para exibir uma mensagem de erro se a ID do cliente inserida no formulário não existir no banco de dados. A regra também traz o foco e redefine o campo ID do cliente. A regra usa a API dataIntegrationUtils do serviço de modelo de dados de formulário para verificar se a ID do cliente existe no banco de dados.

  1. Toque no campo ID do cliente e toque no ícone Edit Rules. A janela Editor de regras é aberta.

  2. Toque no ícone + Criar para adicionar uma regra. Ele abre o Editor visual.

    No Editor visual, a instrução WHEN é selecionada por padrão. Além disso, o objeto de formulário (neste caso, ID do cliente) de onde você iniciou o editor de regras é especificado na instrução WHEN.

  3. Toque no menu suspenso Selecionar estado e selecione está alterado.

    whencustomeridischanged

    Na instrução THEN, selecione Chamar serviço no menu suspenso Selecionar ação.

  4. Alterne de Editor visual para Editor de código. O controle do switch está no lado direito da janela. O Editor de código é aberto, exibindo código semelhante ao seguinte:

    editor de códigos

  5. Substitua a seção da variável de entrada pelo seguinte código:

    var inputs = {
        "id" : this
    };
    
  6. Substitua a seção guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs) pelo seguinte código:

    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, function (result) {
      if (result) {
          result = JSON.parse(result);
        customer_Name.value = result.name;
        customer_Shipping_Address = result.shippingAddress;
      } else {
        if(window.confirm("Invalid Customer ID. Provide a valid customer ID")) {
              customer_Name.value = " ";
             guideBridge.setFocus(customer_ID);
        }
      }
    });
    
  7. Pré-visualização o formulário adaptável. Insira uma ID de cliente incorreta. Uma mensagem de erro é exibida.

    display-validation-error

Nesta página