Configuring Basic Controls

The Basic Palette contains a set of basic controls that you can drag onto the canvas. Note that each time you select a control on the canvas, the General and Styling tabs become available in the Properties pane to configure settings specific to the selected control. An asterisk (*) indicates a required property.

Configuring 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:
  1. From the Basic Palette, drag the Input text control or the Text Area control onto the canvas.
  2. 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.

    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 Adding Dynamic Behaviors to a Form.

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

Configuring Buttons

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

To configure a button control:
  1. From the Basic Palette, drag the Button control onto the canvas.
  2. 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 Adding Dynamic Behaviors to a Form.

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

Configuring 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:
  1. From the Basic Palette, drag the Select control onto the canvas.
  2. 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 Populating Controls Using REST Calls.

    Note:

    While defining Dynamic Behaviors using the Select control, you can fetch the selected option name using the Selected Label option under the Property field.

    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 Adding Dynamic Behaviors to a Form.

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

Configuring 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. 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:
  1. From the Basic Palette, drag the Checklist or the Checkbox control onto the canvas.
  2. 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 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 Populating Controls Using REST Calls.

    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 Adding Dynamic Behaviors to a Form.

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

Configuring 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:
  1. From the Basic Palette, drag the Radio Button control onto the canvas.
  2. 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 Populating Controls Using REST Calls.

    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 Adding Dynamic Behaviors to a Form.

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

Configuring 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:
  1. From the Basic Palette, drag and drop a Number control onto the canvas.
  2. 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

    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.

    Events

    Specifies events that trigger actions and conditions. You can customize the control’s behavior by configuring events. See Adding Dynamic Behaviors to a Form.

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

Configuring Date and Time Fields

Use a Date Time control in your web form. 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:
  1. From the Basic Palette, drag and drop a Date Time control onto the canvas.
  2. 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 Adding Dynamic Behaviors to a Form.

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

Configuring Email Fields

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

  1. From the Basic Palette, drag and drop an email control onto the canvas.
  2. 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 Adding Dynamic Behaviors to a Form.

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

Configuring Web Address URL Fields

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

  1. From the Basic Palette, drag and drop a URL control onto the canvas.
  2. 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 Adding Dynamic Behaviors to a Form.

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

Configuring Message Fields

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

  1. From the Basic Palette, drag and drop a Message control onto the canvas.
  2. 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.

    Type

    Sets the style and format in which the message displays, as a bold heading or as a paragraph text.

    Events

    Specifies events that trigger actions and conditions. You can customize the control’s behavior by configuring events. See Adding Dynamic Behaviors to a Form.

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

Configuring 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.

  1. From the Basic Palette, drag and drop a Link control onto the canvas.
  2. 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 Adding Dynamic Behaviors to a Form.

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