Tutorial: aplicar regras a campos de formulário adaptáveis tutorial-apply-rules-to-adaptive-form-fields

06-aplicar-regras-ao-formulário-adaptável_principal

Este tutorial é uma etapa da série Criar o 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 completo do tutorial.

Sobre o tutorial about-the-tutorial

Você pode usar regras para adicionar interatividade, lógica de negócios e validações inteligentes a um formulário adaptável. Os formulários adaptáveis têm um editor de regras incorporado. O editor de regras fornece uma funcionalidade de arrastar e soltar, semelhante às visitas guiadas. 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 do Adaptive Forms.

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

  • Chamar um serviço de modelo de dados de formulário para recuperar dados do banco de dados
  • Chamar 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 de GIF interativas no final de cada seção do tutorial ajudam a aprender e validar a funcionalidade do formulário que está sendo criado, dinamicamente.

Etapa 1: Recuperar um registro de cliente do banco de dados retrieve-customer-record

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 Modelo de dados da Forms 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 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. Selecione o campo ID do cliente e selecione o ícone Editar regras. A janela Editor de regras é aberta.

  3. Selecione o í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. Selecione o menu suspenso Selecionar estado e selecione foi alterado.

    quando customeridischanged

  5. Na instrução THEN, selecione Invocar Serviço no menu suspenso Selecionar Ação.

  6. Selecione o serviço Recuperar Endereço de Remessa na lista suspensa Selecionar.

  7. Arraste e solte o campo ID do Cliente da guia Objetos de Formulário para o campo Soltar objeto ou selecionar aqui na caixa ENTRADA.

    dropobjectstoinputfield-retrievedata

  8. Arraste e solte o campo ID do Cliente, Nome, Endereço de Remessa, Estado e CEP da guia Objetos de Formulário para o campo Soltar objeto ou selecionar aqui na caixa SAÍDA.

    dropobjectstooutputfield-retrievedata

    Selecione Concluído para salvar a regra. Na janela do editor de regras, selecione Fechar.

  9. Visualize o formulário adaptável. Digite uma ID no campo ID do cliente. O formulário agora pode recuperar detalhes do cliente do banco de dados.

    recuperar-informações

Etapa 2: adicionar o endereço atualizado do cliente ao banco de dados updated-customer-address

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 selecione o ícone Editar Regras. A janela Editor de regras é aberta.

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

    regra de envio

    Na opção QUANDO, as opções Enviar e é clicado já estão selecionadas.

    enviar-é-clicado

  3. Na opção THEN, selecione a opção + Adicionar instrução. Selecione Invocar Serviço no menu suspenso Selecionar Ação.

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

    update-shipping-address

    dropobjectstoinputfield-updatedata

  5. Arraste e solte o campo Endereço de Remessa, Estado e CEP da guia Objetos de Formulário para a propriedade de nome de tabela .correspondente (por exemplo, customerdetails .shippingAddress) do objeto Soltar ou selecione aqui o campo na caixa ENTRADA. Todos os campos com o prefixo tablename (por exemplo, customerdetails 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.

    note note
    NOTE
    Não arraste e solte os campos Nome e ID do Cliente na tablename.property correspondente (por exemplo, customerdetails.name). 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 de ID na caixa ENTRADA. Os campos sem um nome de tabela prefixado (por exemplo, customerdetails 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. Selecione Concluído para salvar a regra. Na janela do editor de regras, selecione Fechar.

  8. Visualize o formulário adaptável. Recupere os detalhes de um cliente, atualize o endereço de entrega e envie o formulário. Ao recuperar os detalhes do mesmo cliente novamente, o endereço de entrega atualizado é exibido.

Etapa 3: (seção de bônus) usar o editor de código do para executar validações e exibir mensagens de erro step-bonus-section-use-the-code-editor-to-run-validations-and-display-error-messages

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

Os formulários adaptáveis fornecem vários componentes com validações integradas, por exemplo, email e campos numéricos que você pode usar para casos de uso comuns. Use o editor de regras para casos de uso avançados, por exemplo, para exibir uma mensagem de erro quando o banco de dados retornar zero (0) registros (sem registros).

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 para 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. Selecione o campo ID do cliente e selecione o ícone Edit Rules. A janela Editor de regras é aberta.

  2. Selecione o í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. Selecione o menu suspenso Selecionar estado e selecione foi alterado.

    quando customeridischanged

    Na instrução THEN, selecione Invocar Serviço no menu suspenso Selecionar Ação.

  4. Mudar do Editor Visual para o Editor de Código. O controle do switch está no lado direito da janela. O Editor de códigos é aberto, exibindo o código semelhante ao seguinte:

    editor de código

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

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

    code language-javascript
    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. Visualize o formulário adaptável. Insira uma ID de cliente incorreta. Uma mensagem de erro é exibida.

    erro-validação-exibição

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