Form Controls Behavior
  • Updated on 04 Jun 2015
  • 4 minutes to read
  • Print
  • Dark
    Light

Form Controls Behavior

  • Print
  • Dark
    Light

This tutorial demonstrates and shows how to use Form Component Behaviors that was implemented in Decisions 3.2.

Example:
Begin in the Designer Folder with selecting Create Flow button on the Folder Actions Panel.
In the resulting window, Name the Flow and select Create to proceed to the Flow Designer.
2018-08-30_105609.jpg

In the Flow Designer, add Show Form step from the Favorite Steps category.
2018-08-30_105808.jpg

Next, Name our Form and click Create to continue to the Form Designer.
2018-08-30_105832.jpg

In the Form Designer, drag a Button component on the Form from Actions category in the ToolBox .
2018-08-30_105945.jpg

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 .
2018-08-30_110300.jpg

To set Default Font for the Form select outside of the workspace. Form Configurations are on the right-hand panel . Locate Appearance section, define Default Form Font.
2018-08-30_110613.jpg

Next, select the Button control on the Form to make some configurations. The 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 set Visibility and Enabled Data Source to From Flow Data , and provide corresponding Variables with Names .
2018-08-30_111205.jpg

Then, drag TextBox control from Data category in the ToolBox on the workspace. Configure this component in the following manner… Use Form Font, configure Behavior section in the similar manner as the Button control. There is a Watermark configuration for the TextBox control. With this feature users create a custom text that will be reflected on the TextBox in the form of Watermark .
2018-08-30_114046.jpg

Finally, drag Label component from the Data category in the ToolBox on the workspace.
Here, do not Use Form Font and instead define the custom Font Style for this Label . In the Behavior section, configure Constant Initial Visibility and Enabled with False Values .
2018-08-30_115407.jpg

To test Form Control behaviors that was created in this tutorial, save the Form and close Form Designer . In our Flow Designer 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 .
2018-08-30_120008.jpg

In this example, define all fields using Constant Mapping Type . First check all checkboxes for the fields and close Mapping Editor.
2018-08-30_120308.jpg

In the Flow Designer select Debug Flow link on the top panel of the Flow Designer test.
Note that in Decisions version 3.5 and above, select Test Flow to access the Debugger .2018-08-30_120732.jpg

The Form opens in the Debugger and renders as designed. Label is not visible, Textbox has watermark and default Form font, Button is visible and enabled with default Form font and custom background.
2018-08-30_121212.jpg

Select the Button on the Form .
2018-08-30_121408.jpg

Confirmation window dialog as designed for the Button control and select Yes .
2018-08-30_121428.jpg

Map inputs to the Form in the following way.
2018-08-30_122006.jpg

The Form would look like on the following figure. All Form controls are invisible.
2018-08-30_122105.jpg

Finally, if set Visibility to True and isEnabled to False in the Mapping Editor.
2018-08-30_122147.jpg

Users would be able to see Form Controls in the faded style because they are not able to be used.
2018-08-30_122218.jpg

Was this article helpful?