Event Button Form Component

Overview

The Event Button is a Form component configured to trigger an event within the Form session. The Event Button does not create a separate outcome path for the Form as a normal Button would; this is because the Event Button exists to perform the specified action on the Form itself. This feature tremendously expands the use cases of Forms in that actions can happen on the Form session without proceeding in the main Flow.

Example

In this example, a Form will be created with two editable fields called 'Sub Total' and 'Tax.' The Form will include a non-editable 'Total' box and a 'Calculate Total' Event Button. The end-user will enter a sub-total and tax amount, then use the Event Button to trigger a Data Flow that calculates the total. 

1. In a Designer Folder, select the Create Flow button from the bottom action bar. Choose the Default template and click CREATE, enter a name for the Flow, then click CREATE again.
2. In the Flow Designer, select the orange arrow on the outcome path of the Start step. When the 'Add After' window appears, select the Show Form step from the Favorite Steps section and add it to the Flow.
3. Once this step is added, the 'Default Editor' window will appear. Use the left side of this window to enter a name for a new Form, then select CREATE at the bottom.
4. Use the GIF below to create a similar Form build. The Form must have three Number Boxes, three Labels (Sub Total/Tax/Total), one Submit Button, and one Calculate Total Event Button.
5. Once a Number Box is placed into the Form, the 'Set Data Name' popup will appear. Once a data name is entered, press Ctrl + Shift + Enter to automatically insert a corresponding Label left of the Number Box.
6. Select the Number Box for Total as it appears in the Form to populate the properties for this Form component. Locate the Setup Data section and uncheck the Is Editable box.
7. In the Form Controls tab, navigate to Actions > Events and add an Event Button to the Form. In the properties, locate the Data section and enter 'Calculate Total' in the Text box.
   Creating A Form

   For more information on how to create a Form, please visit our Creating Your First Form article.

   

8. Now that this Form is created with the intent of calculating a total given the sub-total and tax, a Data Flow is needed to perform that sort of logic on the back-end.
9. Select checkered space to populate the Form properties. Navigate to the Form Rules section, then select Add New under the Data Flows box. 
10. When the 'Add Data Flows' window appears, enter a name and select create under the Flow box.
11. This Data Flow is needed to give the Form and Event Button functionality. It will take in SubTotal and Tax as two pieces of input data. The Flow will perform logic using math steps, then output the computed Total. Once complete, the Event Button will be set as a trigger for this calculation in the Form Designer. 
12. In the Flow Designer, select the Start step icon. In the step properties, expand the Flow Data section and select the Show Editor button.
13. In the 'Data Definitions' window, add a piece of input data for SubTotal and Tax, both of the Decimal [Number] datatype. 
14. Add a Multiply step after the Start step outcome path. This step has two input values that need to be defined -- value and by Value. 
15. Use the Edit Input Mappings button or the Select From Flow mapping type option to define value as SubTotal and by Value as Tax. The output name can remain the same.
16. Add an Add step after the Multiply step outcome path. This step has two input values that need to be defined -- value1 and value2. Using one of the aforementioned methods, define value1 as SubTotal and value2 as Multiply_Output. The output name can remain the same.
17. Select the End step icon. In the step properties, expand the Data section and select the Show Editor button.
18. In the 'Data Definitions' window, add a piece of output data for the Total of the Decimal [Number] datatype. 
19. Define the value for Total as the Add_Output. Once this is complete, save and close the Flow.

    

20. Now that the Data Flow has been created, the inputs need to be applied to the appropriate Form components so that they can be used to define the values. 
21. Back in the 'Edit Data Flows' window, select the Update Inputs button. Select the pencil icon for SubTotal and change the input type to Form Component, then select the corresponding component from the Form Data Name dropdown. 
22. Make sure the RunOnValueChanged box is unchecked. Repeat this process for the Tax as well.
23. Select the pencil icon for Total and delete the [Flow:] portion of the data name so it is just Total. 
24. In the Advanced section, scroll down in the Triggers box until EventButton: Click is found, then check the box. Once complete, save and close the Form Designer.

    

25. Back in the main Flow, connect the outcome path of the Show Form step to the End step. Save and close the Flow Designer once complete.
26. In the Designer Folder, right-click the name of the main Flow and select Run Flow from the action menu.
27. When the Form appears, enter a number for the Sub Total and Tax (converted percent), then select the Calculate Total button to see the results. When looking at this from the debugger, it will show that the Data Flow is executed each time the Event Button is selected, but the main Flow does not continue until the Submit button is selected.