Text input

The Text Input component allows the user to add and edit text in the UI. Text Input components are typically used in forms and dialogs.

Placeholder

You can add a placeholder to the Text Input component so that the user knows what kind of information is expected in the component.

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.

To add a placeholder to the component, in the Text Input properties panel, under Placeholder, type the placeholder text.

Password-type text input

Password-type text input type allows the user to enter a password securely. The entered text is obscured so that it cannot be read.

To enable the Password input for the component:

1. Select the Text Input component for which you want to enable Password type:

2. In the Text Input properties panel, select the checkbox opposite Password.

Format

Enabling Format allows you to apply a specific format to the text entered by the user. A number of pre-defined formats are available as well as a custom format.

Apply format to value

Applying format to value enables you to format the cell to which the text input value is bound. Typically it is used for displaying the collected user input in the UI.

Apply an input mask

Selecting the Guide user input checkbox allows you to show the input mask for the selected format. If the Guide user input checkbox is selected, you can also specify what characters to use in the input mask.

Validation

Enabling Validation allows you to define validation settings for the text.

To check if the entered text matches or does not match the format specified in Format, select the Matches Format checkbox (selected by default) and validate that the text field is not empty. If the entered text matches the specified format, the Matches Format Status is True, otherwise the status is False.

To check if the text input is empty or not, select the Is non empty checkbox. If the text input is not empty, Status is True, otherwise Status is False.

The Is Valid property is used to check both the status of Matches Format and the status of Is non empty. If both the Matches Format and Is non empty checkboxes are selected, then Is Valid evaluates to the following:

• True, if the status of Matches Format is True and the status of Is non empty is True.
• False, if the status of either Matches Format or Is non empty is False.

Text-Input Validation Example

The following shows a simple example of password input validation. If the entered text does not match the required password format, the component's border color is red, otherwise the border color is black.

This example uses the Regular Expression format type.

Follow these steps to set up the format:

1. Select a Text Input component on the page.

2. In the TextInput properties panel, enable Format, and then, from the Format Type drop-down menu, select Regular Expression.

3. In cell A1, enter the following regular expression:

   code

   This regular expression matches any string between 4 and 8 characters in length.

4. Bind the Format property to the cell with the regular expression.

Follow these steps to set up validation:

1. Enable Validation, and then select the Matches Format checkbox.

2. Select the Is non empty checkbox to validate that the text field is not empty.

3. Bind the Is Valid boolean value to an empty cell, for example, cell A2. Is Valid evaluates to True if the status of both the selected checkboxes is True.

4. In an empty cell, enter the below formula. The formula uses cell A2 as the value to which the Is Valid property is bound. If you chose a different cell in the previous step, use it in the formula instead of A2.

   =IF(A2=TRUE, "#000000", "#ff0000")

   

   The function returns hex color #000000 (black) if the format is valid, otherwise it returns hex color #ff0000 (red).

5. Bind the component's border hex-color property to the cell with the formula.

Follow these steps to make sure the validation works as expected

1. Click the Preview button and check the following:

   • The component border is black (which means that the input is valid) if you enter 4 to 8 characters.
   • Check that the border is red in any other case.

2. Select the Password checkbox so that the user can enter the password securely.