Introdução ao Editor de regras na Criação do WYSIWYG

Este recurso está disponível através do programa de acesso antecipado. Para solicitar acesso, envie um email com o nome da sua organização GitHub e o nome do repositório do seu endereço oficial para aem-forms-ea@adobe.com. Por exemplo, se a URL do repositório for https://github.com/adobe/abc, o nome da organização é adobe e o nome do repositório é abc.

É possível adicionar um comportamento de formulário dinâmico usando o Editor de regras, que permite criar regras. Essas regras permitem visibilidade condicional de campo, automatizam cálculos com base na entrada do usuário e melhoram a experiência geral do usuário. Ao simplificar o processo de preenchimento de formulário, o Editor de regras ajuda a garantir precisão e eficiência.

O Editor de regras oferece uma interface visual intuitiva para criar e gerenciar regras. Sua abordagem amigável torna-o acessível a todos os usuários, mesmo aqueles sem extensa experiência técnica, permitindo-lhes implementar a lógica sem esforço dentro de suas formas.

Noções básicas sobre uma regra

As regras são instruções que orientam os usuários sobre quais ações executar em condições específicas.

Uma regra normalmente segue uma das seguintes construções:

Por exemplo, uma condição pode verificar se um usuário inseriu um determinado valor em um campo e a ação pode ser mostrar ou ocultar um campo.

Para obter instruções detalhadas passo a passo, consulte adicionar uma regra condicional.

Como ativar a extensão do Editor de regras?

No Editor universal, a extensão Editor de regras não é ativada por padrão. Para habilitar a gravação da extensão do Editor de Regras em aem-forms-ea@adobe.com da sua ID de email oficial.

Depois que a extensão Editor de regras for habilitada para o seu ambiente, o ícone aparecerá no canto superior direito do editor.

Selecione o componente de formulário para o qual deseja gravar uma regra e clique no ícone . A interface do usuário do Editor de regras é exibida.

Neste artigo, form object e form component são usados alternadamente.

Agora, você pode começar a escrever regras ou lógica de negócios para o campo de formulário selecionado usando os tipos de regras disponíveis no Editor de regras.

Noções básicas sobre a interface do usuário do Editor de regras

O editor do Editor de regras é aberto quando você clica no ícone :

Todas as regras existentes em um componente de formulário são listadas ao selecionar o componente. É possível exibir o título e uma pré-visualização do resumo da regra no Editor de regras. Além disso, você pode alterar a ordem das regras, editar regras, habilitar/desabilitar regras ou excluir regras.

Tipos de regras disponíveis

O Editor de regras fornece um conjunto de tipos de regras predefinidos que você pode usar para escrever regras, conforme exibido na tabela abaixo:

Agora, vamos explorar como gravar regras no Editor de regras.

Regras de gravação

Para entender como escrever regras no Editor de regras visuais, considere um exemplo simples de um formulário de cálculo de imposto:

No formulário descrito acima, o usuário informa o salário bruto. Com base nessa entrada, o campo condicional é exibido e o imposto a pagar é calculado.

Campos de formulário:

Regra condicional:

Regras de Cálculo:

Para gravar regras, execute as seguintes etapas:

1. Criar um formulário

Para criar um formulário no Universal Editor:

2. Adicionar uma regra condicional para um campo de formulário

Depois de criar o formulário, escreva a primeira regra para mostrar o campo Additional Deduction somente se o salário bruto exceder $50.000. Para adicionar uma regra condicional:

3. Adicionar regras de cálculo para os campos de formulário

Em seguida, escreva uma regra para calcular o Taxable Income, que é a diferença entre Gross Salary e Additional Deduction (se aplicável). Para adicionar uma regra de cálculo ao campo Receita Tributável, execute as seguintes etapas:

4. Pré-visualizar um formulário

Agora, ao visualizar o formulário e inserir o Salário Bruto como 60,000, o campo Dedução Adicional será exibido e a Renda Tributável e o Imposto a Pagar serão calculados adequadamente.

Além das funções prontas para uso como Sum, Average que estão listadas em Saída de funções, você pode gravar funções personalizadas para implementar lógicas de negócios complexas.

Função personalizada no editor de regras

O Edge Delivery Services Forms é compatível com funções personalizadas, que permitem aos usuários definir funções do JavaScript para implementar regras de negócios complexas. As funções personalizadas estendem os recursos dos formulários facilitando a manipulação e o processamento dos dados inseridos para atender a requisitos especificados.

Criar uma função personalizada

Para criar funções personalizadas, edite o arquivo ../[blocks]/form/functions.js. O processo de criação geralmente envolve as seguintes etapas:

Este exemplo demonstra duas funções personalizadas como getFullName e days:

/**
 * Get Full Name
 * @name getFullName Concats first name and last name
 * @param {string} firstname in Stringformat
 * @param {string} lastname in Stringformat
 * @return {string}
 */
function getFullName(firstname, lastname) {
  return `${firstname} ${lastname}`.trim();
}

/**
 * Calculate the number of days between two dates.
 * @param {*} endDate
 * @param {*} startDate
 * @name days Calculates the numebr of days between two dates
 * @returns {number} returns the number of days between two dates
 */
function days(endDate, startDate) {
  const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
  const end = typeof endDate === 'string' ? new Date(endDate) : endDate;

  // return zero if dates are valid
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    return 0;
  }

  const diffInMs = Math.abs(end.getTime() - start.getTime());
  return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}

// eslint-disable-next-line import/prefer-default-export
export { getFullName, days };

Usar uma função personalizada no editor de regras

Para usar a função personalizada no Editor de regras:

Informações adicionais

Este artigo fornece informações limitadas sobre o Editor de regras disponível no Editor universal. Para saber mais sobre o Editor de regras e as funções personalizadas, consulte os seguintes artigos:

Consulte também: