Setting Form Control Values

Overview

Displaying data dynamically on Forms is a crucial aspect of modern web applications, and this functionality is achieved through Active Form Flows. Active Form Flows are processes specifically created to update Form content in real time in response to user actions. These flows are initiated by specific events like typing pauses, value changes, or Form entry/exit actions.

Use Cases

Example

This example demonstrates the creation of a simple calculator that updates and displays calculation results in real time within a number box. Additionally, it incorporates logic to reset or clear the values within all number boxes.

1. In the Flow Designer, add a Show Form step. Create a new Form.
2. The Form is designed with five Number Boxes: Value1, Value2, and Sum. 
3. Add an Event Button from the Actions > Events category; name this "Clear Values" button. Add a Button called "Done".
4. Navigate to the Form Properties panel. Under FORM RULES > Active Form Flows, select ADD.
5. In the Add Active Form Flows dialog, Name the Rule Flow. Select EDIT RULE FLOW.
   
6. In the Rule Flow Designer, select the Done outcome path of the Start step.
7. In the Add After dialog, search for the Add step in the Data > Numbers category. After highlighting the resulting step, click ADD.
8. Navigate to the Add step Properties panel.
9. Under INPUTS > Value1, select Pick. In the Pick Data for Input: value1 dialog: expand Form Data > [Value1] NumberBox, choose Value, and click DONE.
10. Under INPUTS > Value2, select Pick. In the Pick Data for Input: value2 dialog: expand Form Data > [Value2] NumberBox, choose Value, and click DONE.
    
11. Add a Set Control Value step from the Form Rules category in the Toolbox. To set multiple control values with one step, use the Create Data step and change the value of the outputs to Form Control.
12. Navigate to the Set Control Value step Properties panel. Under INPUTS > Form Control, select EDIT.
13. In the Pick Data For Input: Form Control dialog: expand Form Data, choose SumNumberBox, and click DONE. 
14. Under INPUTS > Value, select EDIT. In the Pick Data For Input: Value dialog: choose Add_Output and click DONE.
15. Connect the outcome path of the Set Control Value step to the End step. Save and close the Rule Flow Designer.
    
    
16. Select the Triggers in the Form Designer in the Edit Active Form Flows dialog. Select Value 2 Number Box and choose ValueChanged as the trigger.
17. Select OK to save and close this dialog.
    
    
18. Add a second Active Form Flow that will clear the values in the number boxes. In the Add Active Form Flows dialog, Name the Rule Flow.  
19. Under Advanced > Triggers, set Event Button Click to true. Then, Select EDIT RULE FLOW.
    
    
20. In the Rule Flow Designer, select the Done outcome path of the Start step. Add a Create Data Step to clear all controls on the Form. 
21. In the Properties panel of the Create Data step, add the Control Names with their matching data type under Data to Create. 
22. For each Input, map 0 as the constant value. 
23. For each Output, select Change Value as the mapping type. Then pick the corresponding Form Control to change the value. 
24. Save and close this Rule Flow.
25. Select OK to save and close the Active Form Flow dialog. Save and close the Form Designer.
26. In the Flow Designer, connect the outcome path of the Show Form step to the End Step.

Debug

1. Select Debug in the top action panel of the Flow Designer.
2. When the Form displays, enter a number in each number box.
3. The Sum is calculated dynamically. Select "Clear Values" to reset each Number Box to zero.
   

Troubleshooting

If any issues are encountered while implementing Active Form Flows, check for the following common problems:

• Ensure that the triggers and actions are correctly set up.
• Verify that the Form Controls are named and mapped correctly in the Active Form Flows.
• Double-check that the Active Form Flow rules match the intended user interactions.