Form Control Behavior Overview
  • 22 Mar 2022
  • 2 Minutes to read
  • Dark
    Light

Form Control Behavior Overview

  • Dark
    Light

Overview

Form Control Behaviors include configuration options for appearance and functionality. 

Behavior

In the Properties > Behavior section of a Form Control, designers can set Initial Visibility and Initially Enable parameters for the selected control. 

By changing the Data Source in the dropdown from Constant Value to From Flow Data, the user configures this control to be visible and enabled depending on the Flow execution and where the incoming Flow Data is reached. When set to the From Flow Data mapping type, a Variable Name must be provided. A Boolean serves as this variable as a switch for the Control dependent on what data is sent from the Flow.

Needs Confirmation: If checked, a popup message with ‘Yes’ and ‘No’ buttons will appear when a user clicks the Button on the Form. 

View

In the View section there are the following settings: 

SettingPurpose 
CSS ClassSets a CSS class for the selected Form Control.
Use Form FontCheck this setting to use the same font designated for the entire Form. If unchecked, the Font Attribute settings will appear allowing the Designer to define their desired font, font size, and standard typographical emphasis options for the text.
Text From Data NameCheck this setting to allow the configuration of a String Variable pulled from the data in a Flow to be used as the text name for this button.
Translate TextCheck this setting to allow for text translation.
Override Background ColorCheck this setting for a Background Color picker to appear in the Properties tab. This color picker allows the Designer to change the background color of the Button.

Configuring Form Control View and Behavior

  1. In the Form Designer, navigate to the Toolbox, and add a Button and a Textbox to the Form.
  2. Select the Button control, navigate to the Properties panel, expand the View section. Uncheck Use Font Form and click the pencil icon to edit the text. Set the Button Font Attributes to 20px, bold, and white font color.
  3. Check Override Background Color, and set the Background Color to green.

  4. Expand the Behavior section.
  5. Select Needs Confirmation. Under Confirmation Message type: "Are you sure?". For the Yes Button Text On Confirmation Dialog type, type: "Yes". For the No Button Text On Confirmation Dialog type, type: "No".

  6. Select the TextBox Form Control. In the Behavior section, uncheck Initially Enabled. In the View section, type "Type Here" in the Watermark. With this feature, users create a custom text that will be reflected on the TextBox in the form of a watermark.


Display Behaviors

  1. To test Form Control Behaviors created in this tutorial, add the Form into a Flow via the Show Form step.
  2. Select Debug from the top action bar.
  3. Select START DEBUGGING.

For further information on Forms, visit the Decisions Forum.

Was this article helpful?