You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
An example of text box properties is represented in the image below:
28
+
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:
Text box properties consist of the following sections:
33
-
34
-
*[Accessibility](#accessibility)
35
-
*[Common](#common)
30
+
Properties:
31
+
*[General](#general)
36
32
*[Data source](#data-source)
37
-
*[Design Properties](#design-properties)
33
+
*[Label](#label)
38
34
*[Editability](#editability)
35
+
*[Visibility](#visibility)
36
+
*[Validation](#validation)
37
+
*[Accessibility](#accessibility)
38
+
*[Common](#common)
39
39
*[Events](#events)
40
+
*[On change Behavior](#on-change)
41
+
42
+
Styling:
43
+
44
+
*[Design Properties](#design-properties)
45
+
*[Common](#common-styling)
46
+
47
+
Miscellaneous:
40
48
*[Formatting](#formatting)
41
-
*[General](#general)
42
-
*[Label](#label)
43
-
*[Validation](#validation)
44
-
*[Visibility](#visibility)
45
49
46
-
### 2.1 Accessibility Section{#accessibility}
50
+
##3 Properties
47
51
48
-
### 2.1.1 Aria Required
52
+
### 3.1 General Section{#general}
49
53
50
-
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.
54
+
#### 3.1.1 Show as Password
51
55
52
-
#### 2.1.2 Autocomplete
56
+
Attributes 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.
53
57
54
-
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](https://www.w3.org/TR/WCAG21/#input-purposes)
58
+
| Value | Description |
59
+
| --- | --- |
60
+
| False *(default)*| Normal text box |
61
+
| True | Typed characters are not shown to the end-user , instead an asterisk is shown for every typed character |
This property specifies the maximum number of characters that can be typed in this text box.
71
86
72
-
### 2.6 Events Section{#events}
87
+
| Value | Description |
88
+
| --- | --- |
89
+
| Attribute length *(default)*| The maximum number of characters is the same as the maximum length of the connected attribute |
90
+
| Unlimited | The maximum number of characters is unlimited |
91
+
| Custom | The maximum number of characters is specified in the widget properties |
73
92
74
-
#### 2.6.1 On Change Event{#on-change}
93
+
#### 3.1.4 Placeholder Text
75
94
76
-
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 <kbd>Enter</kbd> key or leaving the widget, either by using the <kbd>Tab</kbd> key or by clicking another widget.
95
+
The placeholder text is shown when no text has been entered yet, or when a displayed attribute is empty.
It can be used, for example, to give a hint to the end-user what kind of text should be entered.
79
98
80
-
#### 2.6.2 On Change Behaviour
99
+
#### 3.1.5 AutoFocus {#autofocus}
81
100
82
-
The On Change Behaviour property lets users select how **on change** is handled via the following options Studio Pro:
101
+
If `true`, the text area will be rendered focused with the device keyboard opened.
83
102
84
-
* When user leaves input field (Default)
85
-
* While user is entering data
103
+
{{% alert color="info" %}}
104
+
This option is only available in native pages.
105
+
{{% /alert %}}
86
106
87
-
##### 2.6.2.1 When user leaves input field (Default)
107
+
<aid="label-properties"></a>
88
108
89
-
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:
109
+
### 3.2 Data Source Section{#data-source}
90
110
91
-
* On enter key pressed: This will trigger on change and on enter key press events
92
-
* 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**.
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.
117
+
### 3.4 Editability Section{#editability}
99
118
100
-
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.
The on enter event property specifies an action that will be executed when the widget is entered, either by using the <kbd>Tab</kbd> key or by clicking it with the mouse.
The on leave event property specifies an action that will be executed when leaving the widget, either by using the <kbd>Tab</kbd> key or by clicking another widget.
131
+
### 3.7.1 Aria Required
113
132
114
-
This differs from the [On change](#on-change) property in that the event will always be triggered, even if the value has not been changed.
133
+
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.
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](https://www.w3.org/TR/WCAG21/#input-purposes)
119
138
120
-
The on enter key press event property specifies an action that will be executed when the focus is inside the widget and the <kbd>Enter</kbd> key is pressed. In a web application the widget will keep focus after the action gets executed.
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 <kbd>Enter</kbd> key or leaving the widget, either by using the <kbd>Tab</kbd> key or by clicking another widget.
The formatting section applies only to the way that numeric attributes are displayed. These are attributes of the following data types:
153
+
The on enter event property specifies an action that will be executed when the widget is entered, either by using the <kbd>Tab</kbd> key or by clicking it with the mouse.
The on leave event property specifies an action that will be executed when leaving the widget, either by using the <kbd>Tab</kbd> key or by clicking another widget.
135
160
136
-
#### 2.8.1 Show as Password
161
+
This differs from the [On change](#on-change) property in that the event will always be triggered, even if the value has not been changed.
137
162
138
-
Attributes 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.
| True | Typed characters are not shown to the end-user , instead an asterisk is shown for every typed character |
165
+
#### 3.9.4 On Enter Key Press Event
144
166
145
-
#### 2.8.2 Input Mask
167
+
The on enter key press event property specifies an action that will be executed when the focus is inside the widget and the <kbd>Enter</kbd> key is pressed. In a web application the widget will keep focus after the action gets executed.
146
168
147
-
{{% alert color="info" %}}Input masks are not supported on native mobile pages.
148
-
Input masks are designed for string data types. Be cautious when using them with numeric or hashed string data types.
The input mask limits what the end-user can enter in the text box, following the rules below:
171
+
### 3.10 On Change Behavior {#on-change-behavior}
152
172
153
-
| Character | Allows Input of |
154
-
| ----- | ----- |
155
-
|`9`| any digit |
156
-
|`Z`| any letter |
157
-
|`U`| an upper-case letter |
158
-
|`L`| a lower-case letter |
159
-
|`*`| a letter *or* a digit |
173
+
The On Change Behavior property lets users select how **on change** is handled via the following options Studio Pro:
160
174
161
-
Other characters will be taken literally.
175
+
* When user leaves input field (Default)
176
+
* While user is entering data
162
177
163
-
For example, the input mask `99-LLL-9999` matches `24-apr-2008`.
178
+
##### 3.10.1 When user leaves input field (Default)
164
179
165
-
#### 2.8.3 Maximum Length
180
+
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:
166
181
167
-
This property specifies the maximum number of characters that can be typed in this text box.
182
+
* On enter key pressed: This will trigger on change and on enter key press events
183
+
* Blurred: This will trigger on change and on leave events
168
184
169
-
| Value | Description |
170
-
| --- | --- |
171
-
| Attribute length *(default)*| The maximum number of characters is the same as the maximum length of the connected attribute |
172
-
| Unlimited | The maximum number of characters is unlimited |
173
-
| Custom | The maximum number of characters is specified in the widget properties |
185
+
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**.
174
186
175
-
####2.8.4 Placeholder Text
187
+
##### 3.10.2 While user is entering data
176
188
177
-
The placeholder text is shown when no text has been entered yet, or when a displayed attribute is empty.
189
+
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.
178
190
179
-
It can be used, for example, to give a hint to the end-user what kind of text should be entered.
191
+
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.
0 commit comments