Text Box
Introduction
A text box is used to display and, optionally, allow the end-user to edit the value of a variable or an attribute from an object in a textual form. It can be used to display variables or attributes of the following data types:
- Autonumber
- Decimal
- Hashed string
- Integer
- Long
- String
A text box must be placed within a data context to display or edit the intended value:
- A data container widget containing an object
- A snippet containing one or more parameters
- A page or a snippet containing one or more variables
The name of the configured value is shown inside the text box widget, between square brackets, and colored blue in the structure mode and black in design mode.
For example, here are two text boxes shown in design mode that allow the end-user to see, and set, the Name of a customer. The difference is that the top text box in this example is configured with an attribute while the bottom uses a variable defined on the page.
Properties Pane
The properties pane is divided into two major sections by a toggle at the top of the pane: Properties and Styling. Text box properties consist of the following sections:
Properties:
- General
- Data Source
- Label
- Editability
- Visibility
- Validation
- Accessibility
- Common
- Events
- On Change Behavior
Styling:
Miscellaneous:
Properties
General Section
Show as Password
Attributes or variables of the data type String or Hashed string can have their value hidden. This can be used for passwords, for example, to prevent bystanders from seeing them.
| Value | Description |
|---|---|
| False (default) | Normal text box |
| True | Typed characters are not shown to the end-user, instead an asterisk is shown for every typed character |
Input Mask
The input mask limits what the end-user can enter in the text box, following the rules below:
| Character | Allows Input of |
|---|---|
9 |
any digit |
Z |
any letter |
U |
an upper-case letter |
L |
a lower-case letter |
* |
a letter or a digit |
Other characters will be taken literally.
For example, the input mask 99-LLL-9999 matches 24-apr-2008.
Maximum Length
This property specifies the maximum number of characters that can be typed in this text box.
| Value | Description |
|---|---|
| Attribute length (default with attributes) | The maximum number of characters is the same as the maximum length of the connected attribute |
| Unlimited (default with variables) | The maximum number of characters is unlimited |
| Custom | The maximum number of characters is specified in the widget properties |
Placeholder Text
The placeholder text is shown when no text has been entered yet, or when a displayed attribute or variable is empty.
It can be used, for example, to give a hint to the end-user what kind of text should be entered.
AutoFocus
If true, the text area will be rendered focused with the device keyboard opened.
Data Source Section
This selects which value will be used within the widget. You can only select values which have the correct data type(s).
For more information on selecting a data source, see the Data Source Section section in Properties Common in the Page Editor.
Label Section
A label describes the purpose of a widget to the end-user.
For more information on properties of this section, see the Label Section section in Properties Common in the Page Editor.
Editability Section
Editability determines whether an end-user can change the value in an input widget.
For more information on properties of this section, see the Editability Section section of Properties Common in the Page Editor.
Visibility Section
Visibility determines whether a widget is displayed to the end-user as part of the page.
For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.
Validation Section
Here, you can specify predefined or custom validation which must be applied to the widget value before the data can be used. You can also customize the message which the end-user will get if the data does not pass the validation.
For more information on input widget validation, see the Validation section of Properties Common in the Page Editor.
Accessibility Section
Aria Required
In a textbox widget, when Aria required is set to Yes then assistive technologies will read out the field that is required. When set to No then assistive technologies will not read the field out.
Autocomplete
The autocomplete property specifies if a text box should have autocomplete enabled. The autocomplete attribute also improves the browser’s ability to pre-populate fields with user-preferred values. For more information on how this helps you comply with accessibility guidelines, see the Web Content Accessibility Guidelines (WCAG) 2.1
Common Section
Events Section
On Change Event
The on change event property specifies an action that will be executed when the value has been changed and gets submitted. A value will be submitted when pressing the Enter key or leaving the widget, either by using the Tab key or by clicking another widget.
On Enter Event
The on enter event property specifies an action that will be executed when the widget is entered, either by using the Tab key or by clicking it with the mouse.
On Leave Event
The on leave event property specifies an action that will be executed when leaving the widget, either by using the Tab key or by clicking another widget.
This differs from the On change property in that the event will always be triggered, even if the value has not been changed.
On Enter Key Press Event
The on enter key press event property specifies an action that will be executed when the focus is inside the widget and the Enter key is pressed. In a web application the widget will keep focus after the action gets executed.
On Change Behavior
The On Change Behavior property lets users select how on change is handled via the following options Studio Pro:
- When user leaves input field (Default)
- While user is entering data
When user leaves input field (Default)
This option will work as in previous versions of Studio Pro. Textbox will apply changes when a value is not the same as previously saved value in the database and one of the following conditions is met:
- On enter key pressed: This will trigger on change and on enter key press events
- Blurred: This will trigger on change and on leave events
This means that there is no way for users to trigger an on change event while typing. That use case requires the second option: While user is entering data.
While user is entering data
This option allows makes it so users trigger an on change event while they are typing. Text Box will save changes when the value is not the same as the previously saved value in the database and if the last change made took place after the configured Apply after (ms) length of time.
With While user is entering data, users now can adjust one more property called Apply after (ms) (described above). This will reduce the amount of the calls made for an on change event, thus improving app performance.
Styling
Design Properties Section
Common Section
Miscellaneous
Formatting Section
The formatting section applies only to the way that numeric attributes or variables are displayed. These are attributes or variables of the following data types:
- Decimal
- Integer
- Long