Form Components BehaviorLast Updated: 07/25/2016 Introduced in Verision: 2.0 |
This tutorial demonstrates and shows how to use Form Component Behaviors that was implemented in Decisions 3.2.
Example:
We begin in the Designer Folder with clicking Create Flow button on the Folder Actions Panel.
In the resulting window we Name the Flow and click Create to proceed to the Flow Designer.
In the Flow Designer we add Show Form step from the Favorite Steps category.
Next, we Name our Form and click Create to continue to the Form Designer.
In the Form Designer we drag a Button component on the Form from Actions category in the ToolBox.
On the right-hand panel we can see different Configurations for Button component.
Use Form Font – To use globally defined Font for this Form. With this configuration user can configure a Font (type, size, color) for a Form and by checking Use Form Font checkbox and apply this style to any desirable component instead of defining the same Font style for each.
Override Background Color – To pick desirable color for Button control.
Needs Confirmation – A pop-up message with ‘Yes’ and ‘No’ buttons that appears when user clicks the Button on the Form.
Behavior section – In this section the form designer can set Initial Visibility and Initially Enable parameters for any component on the Form. Moreover, by changing Data Source in these configurations from Custom to From Flow Data we can control which Components should be visible and enabled depending on the Flow execution. When set to the From Flow Data, we need to provide this configuration with Variable Name. This variable is Boolean and will serve as a switch for our control depending on what data we send to it from our Flow.
Text From Data Name – With this configuration we can create a String Variable that will be populating Text on our Button control depending on the Data that we send to it from our Flow.
To set Default Font for our Form we click outside of the workspace. On the right-hand panel we are able to see Form Configurations. We locate Appearance section. Here we can define Default Form Font.
Next, we select our Button control on the Form to make some configurations. First, mention that Font on the control changed because it is configured to use Default Form Font. Then, we check Override Background Color checkbox and select desirable color. Next, check Needs Confirmation and create Confirmation Message. In the Behavior section we set Visibility and Enabled Data Source to From Flow Data, and provide corresponding Variables with Names.
Then, we drag TextBox control from Data category in the ToolBox on the workspace. We configure this component in the following manner… Use Form Font, configure Behavior section in the similar manner as we did for Button control. Mention, that there is a Watermark configuration for the TextBox control. With this feature we can create a custom text that will be reflected on the TextBox in the form of Watermark.
Finally, we drag Label component from the Data category in the ToolBox on the workspace.
Here, we will not Use Form Font and instead define our custom Font Style for this Label. In the Behavior section we configure Constant Initial Visibility and Enabled with False Values.
To test Form Control behaviors that we have created in this tutorial we save the Form and close Form Designer. In our Flow Designer we connect the outcome from our Form to the End step in our Flow. Then, select Show Form step on the workspace and select Show Mapping Editor option in the Step Information layer.
In this example we simply define all fields using Constant Mapping Type. First, we check all checkboxes for the fields and close Mapping Editor.
In the Flow Designer we click Debug Flow link on the top panel of the Flow Designer test.
Note that in Decisions version 3.5 and above, you’ll need to click Test Flow to access the Debugger.
Our Form opens in the Debugger and renders as we designed… Label is not visible, Textbox has watermark and default Form font, Button is visible and enabled with default Form font and custom background.
We click Button on the Form.
Confirmation window pops up as we designed for our Button control and we click Yes.
If we map inputs to our Form in the following way…
… our Form would look like on the following figure. All Form controls are invisible.
Finally, if we set Visibility to True and isEnabled to False in the Mapping Editor…
We would be able to see Form Controls in the faded style because we would not be able to use them.
