Using buttons to trigger custom logic

Learn how to configure a Button component in forms to act as an event trigger. This tutorial helps you set up custom logic for a button to execute actions. For example, this tutorial helps you calculate the values from two Number components and show the result in another Number component within the form.

Prerequisites:

• Install Persistence.Activities version 1.4.8 or higher.
• Select Advanced Forms for the Create Form Task activity.

Tutorial

1. Add the components for which you want to calculate values, and the component where you want to display the result.

   Note their Property Names, as you'll need them when setting up the custom logic for value calculation.

   In this example, add two Number components inside your form, and configure them as shown in the table below:

   Label	Property Name
   Number1	number1
   Number2	number2

2. Add the component where you want to display the result.

   Note the Property Names, as you'll need it when setting up the custom logic for value calculation.

   In this example, add another Number components inside your form, and configure it as shown in the table below:

   Label	Property Name
   Total	total

3. Add a Button component, that will trigger the calculation event for the previously added components.

   1. Set the Action of the button to Event.
   2. Name the Button Event as calculate.

   Remember this name, because it should match the logic you set up for the component displaying the result.

4. Navigate to the component that displays the result. Configure a logic using a trigger and action that adds the values of two components when the calculate button is clicked. Ensure that both the logic and action are named calculate.

5. In the given example, configure the logic as follows:

   1. Name the logic calculate.

   2. Set the Trigger type to Event.

   3. Set the Event Name as calculate.

   4. Name the action calculate.

   5. Set the Type to Value.

   6. Input the JavaScript action you want this logic to execute in the Value (Javascript) field.

      For this example, return the sum of the two Number components.

      return data.number1 + data.number2

      The data variable is used to access component values in the form.

6. Save both the action and the logic configurations.

Workflow example

To try out the tutorial yourself, download the sample workflow here.