Tutorial: Aplicar regras a campos de formulário adaptáveis tutorial-apply-rules-to-adaptive-form-fields
Este tutorial é uma etapa do Criar seu primeiro formulário adaptável série. O Adobe recomenda seguir a série em sequência cronológica para entender, executar e demonstrar o caso de uso tutorial completo.
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 aos tours guiados. O método de 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 os usuários interessados em testar suas habilidades de codificação ou levar as regras para o próximo nível.
Saiba mais sobre o editor de regras em Editor de regras adaptável do 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
Imagens GIF interativas no final de cada seção do tutorial ajudam você a aprender e validar a funcionalidade do formulário que está criando, em tempo real.
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 criar modelo de dados de formulário artigo 10. o 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 de ID do cliente exclusivo, 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:
-
Abra o formulário adaptável para edição.
http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html
-
Toque no Customer ID e toque no Editar regras ícone . A janela Editor de regras é aberta.
-
Toque no + Criar ícone para adicionar uma regra. Ele abre o Editor visual.
No Editor Visual, a variável WHEN é selecionada por padrão. Além disso, o objeto de formulário (nesse caso, Customer ID) de onde você iniciou o editor de regras é especificado no WHEN instrução.
-
Toque no Selecionar Estado e selecione é alterado.
-
No THEN , selecione Chamar serviço do Selecionar ação lista suspensa.
-
Selecione o Recuperar Endereço de Entrega do Selecionar lista suspensa.
-
Arraste e solte a Customer ID na guia Objetos de formulário até a Solte o objeto ou selecione aqui no campo ENTRADA caixa.
-
Arraste e solte a ID do cliente, nome, endereço de remessa, estado e CEP na guia Objetos de formulário até a Solte o objeto ou selecione aqui no campo SAÍDA caixa.
Toque Concluído para salvar a regra. Na janela do editor de regras, toque em Fechar.
-
Visualize o formulário adaptável. Insira uma ID no Customer ID campo. O formulário agora pode recuperar detalhes do cliente do banco de dados.
Etapa 2: Adicionar o endereço do cliente atualizado 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 envio, 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:
-
Selecione o Enviar e toque no Editar regras ícone . A janela Editor de regras é aberta.
-
Selecione o Enviar - Clique e toque na Editar ícone . As opções para editar a regra Enviar são exibidas.
Na opção QUANDO , a variável Enviar e é clicado já estão selecionadas.
-
No THEN toque na opção + Adicionar instrução opção. Selecionar Chamar serviço do Selecionar ação lista suspensa.
-
Selecione o Atualizar Endereço de Entrega do Selecionar lista suspensa.
-
Arraste e solte a Endereço de entrega, Estado e CEP da guia Objetos de formulário até o tablename correspondente .property (por exemplo, customerdetails .ShippingAddress) da variável Solte o objeto ou selecione aqui no campo ENTRADA caixa. Todos os campos com o 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.
note note NOTE Não arraste e solte a Nome e Customer ID campos para o tablename.property correspondente (por exemplo, customerdetails.name). Isso ajuda a evitar a atualização incorreta do nome e da ID do cliente. -
Arraste e solte a Customer ID na guia Objetos de formulário até o campo de id na ENTRADA caixa. Os campos sem um nome de tabela prefixo (por exemplo, detalhes do cliente neste caso de uso) servem como parâmetro de pesquisa para o serviço de atualização. O id nesse caso de uso, identifica exclusivamente um registro na tabela de detalhes do cliente.
-
Toque Concluído para salvar a regra. Na janela do editor de regras, toque em Fechar.
-
Visualize 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 envio atualizado é exibido.
Etapa 3: (seção Bônus) Use o editor de códigos 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 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, email 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.
-
Toque no Customer ID e toque no
Edit Rulesícone . A janela Editor de regras é aberta. -
Toque no + Criar ícone para adicionar uma regra. Ele abre o Editor visual.
No Editor Visual, a variável WHEN é selecionada por padrão. Além disso, o objeto de formulário (nesse caso, Customer ID) de onde você iniciou o editor de regras é especificado no WHEN instrução.
-
Toque no Selecionar Estado e selecione é alterado.
No THEN , selecione Chamar serviço do Selecionar ação lista suspensa.
-
Alternar de Editor visual para Editor de códigos. O controle do switch está no lado direito da janela. O Editor de códigos é aberto, exibindo código semelhante ao seguinte:
-
Substitua a seção da variável de entrada pelo seguinte código:
code language-none var inputs = { "id" : this }; -
Substitua a seção guidelib.dataIntegrationUtils.executeOperation (operationInfo, entradas, saídas) pelo seguinte código:
code language-none 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); } } }); -
Visualize o formulário adaptável. Insira uma ID incorreta do cliente. Uma mensagem de erro é exibida.
