Text Area

Last modified: January 11, 2024

1 Introduction

A text area is used to display and, optionally, allow the end-user to edit the value of an attribute of data type String. It differs from a text box In that the value can be displayed over several lines.

A text area must be placed in a data container and displays an attribute of the object (or objects) retrieved by that container. The name of the attribute to be displayed is shown inside the text area, between square brackets, and colored blue.

For example, the following text area allows the end-user to see, and set, the Notes about a contact.

2 Properties Pane

The properties pane is divided into two major sections by a toggle at the top of the pane: Properties and Styling. Text area properties consist of the following sections:

Properties:

Styling:

3 Properties

3.1 General Section

3.1.1 Grow Automatically

This property defines whether the text area grows automatically depending on the amount of text in it.

Default: No

3.1.2 Number of Lines

Number of lines determines the size of the text area, based on the height of the lines. If the text in the text area contains more lines, a scroll bar will enable the end-user to see it all. This property is only used if Grow automatically is set to No.

Default: 5

3.1.3 Counter Message

This is the text displayed when typing in the text area. This text has two parameters. The first parameter contains the number of characters already typed and the second parameter contains the maximum number of characters.

For example, if you use the counter message You've used {1} characters of the {2} characters that are allowed. for your text area, the end-user will see this message displayed below the text area widget:

3.1.4 Text Too Long Message

This is the text displayed when the number of characters is higher than the maximum allowed number of characters.

This type of message can also occur when a loaded or stored value exceeds the character limit

3.1.5 Maximum Length

This property specifies the maximum number of characters that can be typed in this text area.

Value Description
Attribute length (default) The maximum number of characters is the same as the maximum length of the connected attribute
Unlimited The maximum number of characters is unlimited
Custom The maximum number of characters is specified in the widget properties

3.1.6 Placeholder Text

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.

3.1.7 Autocomplete

The autocomplete property specifies if a text area should have autocomplete enabled. The autocomplete attribute also improves mobile devices’ ability to pre-populate fields.

3.1.8 AutoFocus

If true, the text area will be rendered focused with the device keyboard opened.

3.2 Data Source Section

This selects which attribute will be used within the widget. You can only select attributes 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.

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

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

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

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

3.7 Accessibility Section

3.7.1 Aria Required

In a text area 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.

3.8 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

3.9 Events Section

3.9.1 On Change

The on change property specifies an action that will be executed when leaving the widget, either by using the Tab key or by clicking another widget after the value has been changed.

For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.

3.9.2 On Enter

The on enter property specifies an action that will be executed when the widget is entered, either by using the Tab key or by clicking it.

For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.

3.9.3 On Leave

The on leave 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.

For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.

3.10 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

3.10.1 When user leaves input field (Default)

This option will work as in previous versions of Studio Pro. Text area 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.

3.10.2 While user is entering data

This option allows makes it so users trigger an on change event while they are typing. Text area 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.

For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.

4 Styling

4.1 Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

4.2 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

5 Read More