Form Controls Behavior

Last Updated: 08/30/2018 Introduced in Version: 2.0

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.

 

In the Flow Designer, add Show Form step from the Favorite Steps category.

 

Next, Name our Form and click Create to continue to the Form Designer.

 

In the Form Designer, 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 the Form select outside of the workspace. Form Configurations are on the right-hand panel . Locate Appearance section, define Default Form Font.

 

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.

 

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.

 

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.

 

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.

 

In this example, define all fields using Constant Mapping Type. First check all checkboxes for the fields and close Mapping Editor.

 

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.

 

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.

 

Select the Button on the Form.

 

Confirmation window dialog as designed for the Button control and select Yes.

 

Map inputs to the Form in the following way.

 

The Form would look like on the following figure. All Form controls are invisible.

 

Finally, if set Visibility to True and isEnabled to False in the Mapping Editor.

 

Users would be able to see Form Controls in the faded style because they are not able to be used.

 

 

Additional Resources