Contents x
Form Control Behavior Overview
  • 01 Sep 2021
  • 2 Minutes to read
  • Print
  • Dark
    Light
Contents

Form Control Behavior Overview

  • Updated on 01 Sep 2021
  • 2 Minutes to read
  • Print
  • Dark
    Light
Article Summary

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 component. By changing the Data Source in the dropdown from Constant Value to From Flow Data, the designer 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.
  3. 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.
  4. Check Override Background Color, and set the Background Color to green.
  5. Expand the Behavior section.
  6. 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".


  7. 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, designers create a custom text that will be reflected on the TextBox in the form of a watermark.

Display Behaviors

To test Form Control behaviors created in this tutorial, the Form must be added into a Flow.
Debug the Flow to show the Form and its configured behaviors and appearance.


Was this article helpful?
What's Next
Decisions
Resources
Organization
Connect