Uso de botões para disparar uma lógica personalizada

Aprenda a configurar um componente Botão em formulários para funcionar como um gatilho de eventos. Esse tutorial ajuda você a configurar a lógica personalizada para um botão executar ações. Por exemplo, este tutorial ajuda você a calcular os valores de dois componentes numéricos e mostrar o resultado em outro componente numérico dentro do formulário.

Prerequisites:

• Instale o Persistence.Activities versão 1.4.8 ou superior.
• Selecione Formulários avançados para a atividade Criar tarefa de formulário .

Tutorial

1. Adicione os componentes para os quais você deseja calcular valores e o componente para o qual deseja exibir o resultado.

   Anote seus Nomes de Propriedade, pois você precisará deles ao configurar a lógica personalizada para o cálculo de valor.

   Neste exemplo, adicione dois componentes Number dentro do seu formulário e configure-os conforme mostrado na tabela abaixo:

   Label	Nome da Propriedade
   Number1	number1
   Number2	number2

2. Adicione o componente onde deseja exibir o resultado.

   Anote os Nomes de propriedades, pois você precisará deles ao configurar a lógica personalizada para o cálculo de valores.

   Neste exemplo, adicione outro componente Numérico dentro do seu formulário e configure-o conforme mostrado na tabela abaixo:

   Label	Nome da Propriedade
   Total	total

3. Adicione um componente Botão que disparará o evento de cálculo para os componentes adicionados anteriormente.

   1. Defina a Ação do botão como Evento.
   2. Nomeie o Evento de botão como calculate.

   Lembre-se desse nome, porque ele deve corresponder à lógica que você configurou para o componente que exibe o resultado.

4. Navegue até o componente que exibe o resultado. Configure uma lógica usando um gatilho e uma ação que adiciona os valores de dois componentes quando o botão calculate é clicado. Certifique-se de que tanto a lógica quanto a ação tenham o nome calculate.

5. No exemplo fornecido, configure a lógica da seguinte maneira:

   1. Nomeie a lógica calculate.

   2. Defina o Tipo de gatilho como Evento.

   3. Defina o Nome do evento como calculate.

   4. Nomeie a ação calculate.

   5. Defina o Tipo como Valor.

   6. Insira a ação de JavaScript que você deseja que essa lógica execute no campo Valor (Javascript) .

      Para esse exemplo, retorne a soma dos dois componentes de Número.

      return data.number1 + data.number2
      

      A variável data é usada para acessar valores de componentes no formulário.

6. Salve as configurações de ação e de lógica.

Exemplo de fluxo de trabalho

Para experimentar o tutorial por conta própria, baixe o fluxo de trabalho de exemplo aqui.