Configure Basic Controls

Configure Text Input and Area Fields

A text input control allows users to enter short, single line text entries. A text area control allows users to enter longer, multi-line text entries. In a text area control, as a user enters multi-line text, if needed, a scroll bar appears to scroll down and view the entire text.

To configure a text input or a text area control:

From the Basic Palette, drag the Input text control or the Text Area control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	An internal identifier that you will use to identify the control.
Binding	Defines a link between the control and a data attribute.
Computed Value	Set this property to apply a computation to the control. See Creating Computed Controls.
Placeholder	Text that will appear in the control until any text is entered. If text is removed from the control, the text specified in this field reappears.
Hint	Hint text that will display to users when a user clicks into the control.
Help	Help text that will appear for the control. If you specify help text, a help icon appears next to the name of the control and displays the help text when a user hovers over it or clicks it.
Min Length	Defines the minimum number of characters a user must enter into the control. Leave this field blank if you don't want to define the minimum length.
Max Length	Defines the maximum number of characters a user can enter into the control.
Rows	Defines the number of text rows that will be visible to a user. A scroll bar appears automatically when the number of text rows entered by the user is greater than the value specified in this field.
Pattern	Allows you to define custom validations on the type of text a user enters into the control. Enter a pattern using regular expressions. When you specify a pattern for the control, you can also specify a message in the Pattern Validation Message field that will display if the validation fails.
Password	Allows you to create a secure text field that masks the characters entered into it.
Events	Allows you to configure events for the control. You can assign actions or If/Then/Else conditions to the control based on a selected event. See Add Dynamic Behavior to a Form.

On the Styling tab, edit the control's styling properties.
Click Preview to try out using the control.

Configure Buttons

Use a button control to add a button to your web form.

To configure a button control:

From the Basic Palette, drag the Button control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	An internal identifier that you will use to identify the control.
Events	Allows you to configure events for the control. You can assign actions or If/Then/Else conditions to the control based on a selected event. See Add Dynamic Behavior to a Form.

On the Styling tab, edit the control's styling properties.
Click Preview to try out using the control.

Configure Drop-down Select Fields

Use a drop-down select control to add a drop-down list to your web form.

To configure a drop-down select control:

From the Basic Palette, drag the Select control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	An internal identifier that you will use to identify the control.
Binding	Defines a link between the control and a data attribute.
Computed Value	Set this property to apply a computation to the control. See Creating Computed Controls.
Hint	Hint text that will display to users when a user clicks into the control.
Help	Help text that will appear for the control. If you specify help text, a help icon appears next to the name of the control and displays the help text when a user hovers over it or clicks it.
Multiple	Determines whether users can select multiple values in the control. If this field is disabled, users can select only one option in the control.
Options Source	Select a source (Static, From Data, and Connector). Static: Specify choices using Options Names and Options Values fields. Use Options Names to specify the label to display for an option and use Options Values to specify an internal value for an option. From Data: In the Options List field, select a list of values options source from the data definitions available in the web form. If you selected a list of complex elements, then, in the Label Binding field, specify a data attribute that will display as the label and in the Value Binding field, specify a data attribute that will be the value. Connector: Specify a REST connector, a resource, and an operation to use. Specify parameters to pass to the connector and define how the response should be mapped to the control properties. See Populate Controls Using REST Calls.
Filter	Select this check box to apply a filter to the control. See Specifying Filters for Controls.
Default Value	If you selected Static in the Options Source field, then, specify a default option in this field. If you selected From Data or Connector in the Options Source field, then, select either the first or the last value as the default value.
Events	Allows you to configure events for the control. You can assign actions or If/Then/Else conditions to the control based on a selected event. See Add Dynamic Behavior to a Form.

On the Styling tab, edit the control's styling properties.
Click Preview to try out using the control.

Some Useful Event Actions Related to Drop-down Select Fields

This section lists a few useful actions that you can define using a Select control. To create an event action, see Specify Actions.

You can fetch the selected object label using the Selected Label option in the Property field.
When a Select control is populated by a connector or data attribute, you can fetch any property of the selected object using the Selected Property option in the Property field.

Configure Check Lists and Check Boxes

Use a check list control to add a list of options to your web form. A check list allows users to select one or more options. You can add a check box control to your web form to allow users to specify a true or false value.

Note that a check box control is set to false by default. You can edit the Default Value property on the General tab to change the default value.

To configure a check list or a check box control:

From the Basic Palette, drag the Checklist or the Checkbox control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	An internal identifier that you will use to identify the control.
Label	Specifies the control name that displays to the user. For check box controls, if you select the Inline HTML check box below the Label field, the value that you enter in the Label field is treated as an inline HTML.
Binding	Defines a link between the control and a data attribute.
Computed Value	Set this property to apply a computation to the control. See Creating Computed Controls.
Help	Help text that will appear for the control. If you specify help text, a help icon appears next to the name of the control and displays the help text when a user hovers over it or clicks it.
Inline	Specify the layout of the options defined for the check list control. If enabled, the layout changes from vertical to horizontal.
Options Source	Select a source (Static, From Data, and Connector). Static: Specify choices using Options Names and Options Values fields. Use Options Names to specify the label to display for an option and use Options Values to specify an internal value for an option. From Data: In the Options List field, select a list of values options source from the data definitions available in the web form. If you selected a list of complex elements, then, in the Label Binding field, specify a data attribute that will display as the label and in the Value Binding field, specify a data attribute that will be the value. Connector: Specify a REST connector, a resource, and an operation to use. Specify parameters to pass to the connector and define how the response should be mapped to the control properties. See Populate Controls Using REST Calls.
Filter	Select this check box to apply a filter to the control. See Specifying Filters for Controls.
Default Value	If you selected Static in the Options Source field, then, specify a default option in this field. If you selected From Data or Connector in the Options Source field, then, select either the first or the last value as the default value. For the check box control, select either True or False as the default value.
Events	Allows you to configure events for the control. You can assign actions or If/Then/Else conditions to the control based on a selected event. See Add Dynamic Behavior to a Form.

On the Styling tab, edit the control's styling properties.
Click Preview to try out using the control.

Select or Unselect All Check List Options

You can select all options in a checklist at the same time by specifying an action Select All Values. Similarly, you can unselect all options at the same time in a checklist by specifying an action Unselect All Values.

For example, configure a button control with an On Click event and then use it to select all options available in a checklist. Or configure a check box control with an On Change event and then use it to unselect all options in the check list.

See Specify Actions.

See Configure Events.

Example of how to configure actions to select or unselect all options in a checklist at the same time:

Create a form with a checklist control named Colors with three color options - red, blue, and green.
From the Basic palette, drag and drop a button control and a checkbox control under the checklist control.
Select the button control, and configure the following from the General tab of the Properties pane.
1. In the Label field, enter the name as Select all colors.
2. Scroll down till you find Events. Click to add and define an event.
3. Select On Click from the drop-down list and then click the editing icon.
4. In the On Click window, click +Actions to define an action.
5. Select Checklist in the Control drop-down list and then select the action Select All Values from the Action drop-down list.
  
  Description of the illustration select-all-values.png
6. Click OK.
Select the checkbox control, and configure the following from the General tab of the Properties pane.
1. In the Label field, enter the name as Unselect all colors.
2. Scroll down till you find Events. Click to add and define an event.
3. Select On Change from the drop-down list and then click the editing icon.
4. In the On Change window, click +Actions to define an action.
5. Select Checklist in the Control drop-down list and then select the action Unselect All Values from the Action drop down list.
  
  Description of the illustration unselect-all-values.png
6. Click OK.
Preview the form and see how it works.
1. Click Preview.
2. When the form loads, click Select all colors. Notice that all the options in the Colors checklist gets selected.
  
  Description of the illustration preview-select-all.png
3. Now, select the Unselect all colors checkbox. Notice that all the options in the Colors checklist gets unselected.
  
  Description of the illustration preview-unselect-all.png

Configure Radio Buttons

Add mutually exclusive radio buttons to your web form. Radio buttons allow users to select an option from a set of available options.

To configure a radio button control:

From the Basic Palette, drag the Radio Button control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	An internal identifier that you will use to identify the control.
Binding	Defines a link between the control and a data attribute.
Computed Value	Set this property to apply a computation to the control. See Creating Computed Controls.
Help	Help text that will appear for the control. If you specify help text, a help icon appears next to the name of the control and displays the help text when a user hovers over it or clicks it.
Inline	Specify the layout of the options defined for the control. If enabled, the layout changes from vertical to horizontal.
Options Source	Select a source (Static, From Data, and Connector). Static: Specify choices using Options Names and Options Values fields. Use Options Names to specify the label to display for an option and use Options Values to specify an internal value for an option. From Data: In the Options List field, select a list of values options source from the data definitions available in the web form. If you selected a list of complex elements, then, in the Label Binding field, specify a data attribute that will display as the label and in the Value Binding field, specify a data attribute that will be the value. Connector: Specify a REST connector, a resource, and an operation to use. Specify parameters to pass to the connector and define how the response should be mapped to the control properties. See Populate Controls Using REST Calls.
Filter	Select this check box to apply a filter to the control. See Specifying Filters for Controls.
Default Value	If you selected Static in the Options Source field, then, specify a default option in this field. If you selected From Data or Connector in the Options Source field, then, select either the first or the last value as the default value.
Events	Allows you to configure events for the control. You can assign actions or If/Then/Else conditions to the control based on a selected event. See Add Dynamic Behavior to a Form.

On the Styling tab, edit the control's styling properties.
Click Preview to try out using the control.

Configure Number Fields

Add number controls to your web form. Number controls allow users to enter decimal numbers. By default, number controls display 0 but you can set this to any decimal number using the Default Value field in the General tab.

To configure a number control:

From the Basic Palette, drag and drop a Number control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	An internal identifier that you will use to identify the control.
Binding	Defines a link between the control and a data attribute.
Computed Value	Set this property to apply a computation to the control. See Creating Computed Controls.
Default Value	Sets a value to display to users when the form loads.
Placeholder	Hint text that describes the expected value. This hint text will display in the control before users enter a value.
Max	Sets a maximum value that users can enter into the control.
Min	Sets a minimum value that users can enter into the control
Show increment/decrement buttons	Select this check box to display the up and down arrow buttons used to increment or decrement the control value.
Step	Specifies a value based on which the number will increase or decrease when users increment or decrement the value with the up or down arrow. For example, if the step value is set to 4, and the initial value in the number field is 0, then when users increment the value for the first time, the value will be 4. When users increment the value the second time, it will be 8 and so on. By default the step value is set to 1. Step must be always greater than 0 and you can’t enter a value lower than 1. Note: This property is displayed only when you select the Show increment/decrement buttons check box.
Events	Specifies events that trigger actions and conditions. You can customize the control’s behavior by configuring events. See Add Dynamic Behavior to a Form.

On the Styling tab, edit the control’s styling properties.
Click Preview to try out using the control.

Configure Date and Time Fields

A Date Time control allow users to enter date and time together. Optionally, add a Date and a Time control to your web form to allow users to enter date and time separately. The Date Time, Date and Time controls are available in the Basic Palette.

To configure a Date Time control:

From the Basic Palette, drag and drop a Date Time control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	An internal identifier that you will use to identify the control.
Binding	Defines a link between the control and a data attribute.
Computed Value	Set this property to apply a computation to the control. See Creating Computed Controls.
Placeholder	Hint text that describes the expected value. This hint text will display in the control before users enter a value.
Help	Help text to display to users when they hover over or click the control’s help icon.
Default Value	Sets the default date and time that appears in the control when the form loads and the current control value is empty.
Max Time	Sets a maximum date and time users can enter in the control.
Min Time	Sets a minimum date and time users can enter in the control.
Format	Specifies a date format for the control. You can select from the available date formats such as yy-MM-dd, yyyy-MM-dd, MM/dd/yy, and so on.
Time Step	Sets the value on which the time will increase when users click the control’s clock icon. For example, if the time step is set to 30 minutes and the time on the Date Time control is 12:00:00 pm, then when users click the control’s clock for the first time, the time changes to 12:30:00 pm, when users click it for the second time, the time changes 01:00:00 pm, and so on.
Events	Specifies events that trigger actions and conditions. You can customize the control’s behavior by configuring events. See Add Dynamic Behavior to a Form.

On the Styling tab, edit the control’s styling properties.
Click Preview to try out using the control.

Note:

When a user enters data into a Date Time control, the timezone information of the user is saved (in UTC). When other users access this data, the date-time information is displayed in timezones specific to them. This timezone conversion capability is available only in the Date Time control and not in the separate Date and Time controls.

Configure Email Fields

Add an email control to allow users to enter a valid email address to your web form.

From the Basic Palette, drag and drop an email control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	An internal identifier that you will use to identify the control.
Binding	Defines a link between the control and a data attribute.
Computed Value	Set this property to apply a computation to the control. See Creating Computed Controls.
Default Value	Specifies an email to display to users when the form loads and the current control value is empty. You must ensure that you enter a valid email format in the field, otherwise you will get a message indicating that the email format entered isn’t valid.
Placeholder	Hint text that describes the expected email format. This hint text will display in the control before users enter a value.
Hint	Useful hint text that displays to users when they select the control.
Help	Help text to display to users when they hover over or click the control’s help icon.
Max Length	Sets the maximum number of characters users can enter before the @ symbol for the email.
Min Length	Sets the minimum number of characters users can enter before the @ symbol for the email.
Events	Specifies events that trigger actions and conditions. You can customize the control’s behavior by configuring events. See Add Dynamic Behavior to a Form.

On the Styling tab, edit the control's styling properties.
Click Preview to try out using the control.

Configure Web Address URL Fields

Add a URL control to allow users to enter a web address URL to your web form.

From the Basic Palette, drag and drop a URL control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	An internal identifier that you will use to identify the control.
Binding	Defines a link between the control and a data attribute.
Computed Value	Set this property to apply a computation to the control. See Creating Computed Controls.
Default Value	Sets a value to display to users when the form loads and the current control value is empty. You must ensure that you enter a correct web address URL format in the field, otherwise you will get a message indicating that the URL format entered isn’t valid.
Placeholder	Hint text that describes the expected value. This hint text will display in the control before users enter a value.
Hint	Useful hint text to display to users when they select the control.
Help	Help text to display to users when they hover over or click the control’s help icon.
Max Length	Specifies the maximum number of characters users can enter into the control.
Min Length	Specifies the minimum number of characters users must enter into the control.
Events	Specifies events that trigger actions and conditions. You can customize the control’s behavior by configuring events. See Add Dynamic Behavior to a Form.

On the Styling tab, edit the control's styling properties.
Click Preview to try out using the control.

Configure Message Fields

Use a message control to allow users to enter a simple message to your web form.

From the Basic Palette, drag and drop a Message control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	An internal identifier that you will use to identify the control.
Binding	Defines a link between the control and a data attribute.
Computed Value	Set this property to apply a computation to the control. See Creating Computed Controls.
Default Text	The default text message that will appear to users when the form loads. You can use inline HTML tags to format the default text. Before using, you have to select Inline HTML from the Type drop-down list.
Type	Sets the style and format in which the message displays. For example, as a bold heading or as a paragraph text. Note that predefined message types such as Error, Info, Success, and Warning are available for selection. These message types have their unique style and format, so that the user can easily identify if the message is an error, info, success, or warning. Select Inline HTML if you want to use inline HTML tags to format the default text message that displays when the form loads.
Events	Specifies events that trigger actions and conditions. You can customize the control’s behavior by configuring events. See Add Dynamic Behavior to a Form.

On the Styling tab, edit the control's styling properties.
Click Preview to try out using the control.

Configure Links

Use the link control to insert a URL into a form. You can specify the value for the link URL or configure the URL value to change dynamically based on the payload. For example, a URL link that contains an order item could change based on the order ID, which could be in the payload.

From the Basic Palette, drag and drop a Link control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	Defines an internal name for the control. It’s an internal identifier that you’ll use to identify the control.
Label	Specifies the control name that displays to a user.
Static	Select this option to use the value in the Default Label field as the control name when the form loads. This is the default selection.
Dynamic	Select this option to assign the control name dynamically when the form loads. If you select this option, you must create a data attribute in the Data pane and link it to the control using the Label Binding field. When the form loads, the value of the data attribute is fetched from the payload and assigned as the control name. Note: If the attribute value is not available in the payload, then the value in the Default Label field is used as the control name.
Label Binding	Defines a link between the control’s label and a data attribute. Specify an attribute for this field by selecting an option from the autocomplete list or entering a valid binding.
Default Label	Sets a label to display to users when the form loads. The value in this field is used as the control name in the following contexts: When you select the Static option in the Label field. When you select Dynamic option in the Label field but the binding value is not available.
Value Binding	Defines a link between the control and a data attribute. Data attribute bound to the control, either automatically when Auto Binding is enabled or manually using autocompletion.
Computed Value	Set this property to apply a computation to the control. See Creating Computed Controls.
Default Value	Sets a value to display to users when the form loads and the current control value is empty.
Open	Specifies whether you want the link to open in the current tab or in a new tab.
Anchor	Select this check box to enable linking to specific controls in the current form. When you select this check box, the Default Value field changes to a drop-down menu that lists names of all controls present in the form. Select a control name to which you want to link. All Basic Palette, Money, Phone, Image, and Video controls , if present in the current form, appear in the Default Value field. However, controls within repeatable sections, tables, or imported from other forms (unless detached) do not appear in the drop-down list. Note: If the URL value for the link is set from binding or events, the value selected in the Default Value field is overridden.
Hide	Select this check box to hide the control. For example, you might hide a control by default, but configure another control that when selected triggers an event that displays the hidden control.
Events	Specifies events that trigger actions and conditions. You can customize the control’s behavior by configuring events. See Add Dynamic Behavior to a Form.

On the Styling tab, edit the control's styling properties.
Click Preview to try out using the control.

Configure Simple Text Fields

Use a simple text control to specify a label without binding for a form field.

To configure a simple text control:

From the Basic Palette, drag the Simple Text control onto the canvas.

Select the control and edit its properties on the Properties pane's General tab.

Field	Description
Name	An internal identifier that you will use to identify the control.
Text	Specifies the simple text value that displays as the field's label.
Hide	Select this check box to hide the control.
Events	Specifies events that trigger actions. You can change the simple text value of the control by using an action within Events.

On the Styling tab, edit the control's styling properties.
Click Preview to try out using the control.