Text Area

The “Text Area” element is a multi-line text-input control. In the text area element, you can enter multiple lines. You can use the text area to get the descriptive and multi-lines input from the user.

While the text box element allows the user to enter single line input (text), the user can enter the input text in multiple lines. Also, the text area has the capability to display a scroll bar after the user enters the total number of lines greater than a configured number of lines that are visible in the width of the text area.

Usage

When to Use	When Not to Use
Use the “Text Area” element when: i. You want to take multi-line user-input. ii. You want to get the user’s feedback or review on the e-commerce or banking portals. iii. You want the user to enter the contact address.	Do not use the “Text Area” element when: i. You want the user to enter single-line input, such as name, phone number, etc.

Text Area Configuration

The “Text Area” element consists of the following properties:

• UI Configuration
• Data Configuration
• Security Configuration
• Event Configuration

UI Configuration

Tab	Property Name	Description	Mandatory	New Default Values	Visibility Rules
Basic	Reference Name	Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.	Yes	TextArea_XXXXX
Basic	Label	In this box, enter the title of the text area element. For example, Comment.	No	Label
Basic	Default Value	Allows you configure the default value that the application displays in the text area. To configure the default value: i. Click in this box, and it displays the list of the pre-define functions, entities, and element IDs. ii. In the list, select an entity from which the application will fetch the default value and then display it in the text area.	No	{{ fx }}
Basic	Visible	Allows you to configure the visibility of the element. If this property is selected, the use can see the element in the application.	No	Selected
Basic	Business Rule	Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module.	No
Basic	Enable	Allows you to configure the user-action on the element. If this property is selected, the use can perform the function on the element.	No	Selected
Basic	Business Rule	Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module.	No
Basic	Password	If you click this check box, the element displays the entered value in encrypted format.	No	Clear (Check box)
Basic	Mandatory	If you click this check box, the element becomes a mandatory element. If the user does not perform the function on the mandatory element, the application displays the error.	No	Clear (Check box)
Basic	Message On Mandatory	In this box, enter the error message. The application will display this error message if the user does not perform the function on the element.	No	Required	When the Mandatory check box is selected
UI Properties-Style	Styles	Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.	No	Default
UI Properties-Background	Color	Click the extreme left box, and then define the color of the element’s background.	No	#FFFFFF
UI Properties-Alignment and Spacing	Margin	Allows you to define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.	No	4
UI Properties-Alignment and Spacing	Element’s Alignment	This property contains three tabs. You can use these tabs as follows: 1. Left:- By default, this tab is selected. It aligns the element to the left of the page. 2. Center:- If you select this tab, it aligns the element at the center of the page. 3. Right:- If you select this tab, it aligns the element to the right of the page.	No	Left
UI Properties-Label	Font	Select the font type (For example: – Arial) of the element’s title.	No	Open Sans
UI Properties-Label	Size	Enter the font size of the element’s title.	No	12
UI Properties-Label	Color	Enter the font color of the element’s title.	No	#6F6F6F
UI Properties-Label	Weight	Enter the thickness of the character of the element’s caption in the range of values from 1 to 9.	No	4
UI Properties-Label	Style	Select the font’s style (typeface) (For example:- Italic) of the element’s title.	No	Normal
UI Properties-Label	Line Height	In this box, enter a numeric value in pixels (for example:- 18). This value specifies the character’s height in the element’s title.	No	18
UI Properties-Label	Letter Spacing	In this box, enter a numeric value in pixels (for example:- 2). This value specifies the space between characters in the element’s title.	No	0
UI Properties-Placeholder	Text	In this box, enter the hint text (for example:- Please enter your feedback). The placeholder text (hint) helps the user perform the function on the element.	No	Enter here
UI Properties-Placeholder	Size	In this box, enter the font size of the paceholder’s text in pixels.	No	14
UI Properties-Placeholder	Color	Allows you to define the font color of the placeholder’s text. Click the left Color box to select the color of the text’s font.	No	#6F6F6F
UI Properties-Placeholder	Letter Spacing	In this box, enter a numeric value in pixels (for example:- 2). This value specifies the space between characters in the placeholder’s text.	No	0
UI Properties-Input	Font	Click this list to select the font of the element’s input text.	No	Open Sans
UI Properties-Input	Size	Click this list to select the font size of the element’s input text.	No	14
UI Properties-Input	Color	Allows you to define the font color of the input text. Click the left Color box to select the color of the input text’s font.	No	#161616
UI Properties-Input	Weight	In this box, enter the thickness of the input text’s font in pixels.	No	4
UI Properties-Input	Show Cursor	By default, this property is active and selected. When selected, this property makes the cursor available to the user in the text area.	No
UI Properties-Input	Line Height	In this box, enter a numeric value in pixels (for example:- 18). This value specifies the character’s height in the input text.	No	21
UI Properties-Input	Letter Spacing	In this box, enter a value in pixels. This value specifies the space between characters in the input text.	No	0
UI Properties-Shape and Decoration	Type	Under the Shape and Decoration section, this property has the two following options: Autofill:- If you select this option, the element will occupy the available space of the parent layout. Manual:- If you select this option, you can define a specific size of the element.
UI Properties-Shape and Decoration	Width	Enter the width of the element in pixels or percentage units.	No	Null	When Type = Manual
UI Properties-Shape and Decoration	X	Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.	No	Current x-axis Coordinates
UI Properties-Shape and Decoration	Y	Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.	No	Current y-axis Coordinates
UI Properties-Shape and Decoration	No of Lines	In this box, enter the maximum number of lines that the text area will display to the user without the use of the UP or DOWN arrow keys.	Yes	3
UI Properties-Shape and Decoration	Max Lines	In this box, enter the maximum number of lines that the text area will display to the user without using scroll bar. If the total number of lines exceeds the value in the Max Lines box, the text area makes a scroll bar available to the user to write more lines.	No	5
UI Properties-Shape and Decoration	Border Radius	Allows you to define the radius of the element’s corners. Defining the radius of the corner makes the corner of the element round.	No	4
UI Properties-Shape and Decoration	Border Color	Allows you to define the element’s border’s color. Click the extreme left box to select the color of the element’s border.	No	#C6C6C6
UI Properties-Tooltip	Show Tooltip	Click this check box to make a tooltip available with the element.	No	Clear Check box
UI Properties-Tooltip	Message	This property allows you to configure the message for a tooltip. To configure the message: Click in this box, and a smart selector expands. In the smart selector, you can select the following: 1. Static Function:- By using the static function, you can manually define the message inside the static function. 2. Element:- If you select the element, the application will fetch the message that is linked to the selected element. 3. Entity:- If you select an entity, the app will fetch the message from the entity.	Yes	{{fx}}	When Show Tooltip check box is selected
UI Properties-Tooltip	Color	This property allows you to define the color of the tooltip’s message. To define the message’s color: 1. Click the left Color box, a color canvas opens. 2. On the color canvas, move the circle on the upper bar to select the color of the tooltip’s text. 3. Move the circle on the lower bar to define the transparency of the selected color.	No	#6F6F6F	When the Show Tooltip check box is selected

Data Configuration

Tab	Property Name	Description	Mandatory	New Default Values	Visibility Rules
Data Properties-Input	Entity Path	This property allows you to map an entity to the element. You define the entity (a JSON object data type) in the Data Modeler module. To define the entity path: –> Click in the Entity Path box, and a list expands. –> The list displays several entities. –> In the list, select an entity to map it to the element. After the user performs the function on the element, the application can perform the following functions: a. Fetches data from the entity and then displays it in the element. b. Stores data in the entity.
Data Properties-Input	Read Only	When you click this check box to activate (enable) the Read Only property, the user cannot enter the value in the text area.	No	Clear Check box
Data Properties-Validation	Maximum Length	Allows you to configure the maximum number of characters that the user can enter in the text area.	No
Data Properties-Validation	Minimum Length	Allows you to configure the minimum number of characters that the user needs to enter in the text area.	No
Data Properties-Validation	Message On Max Length Failure	Allows you to configure the message that the application will display to the user when the user attempts to enter more characters than the permissible number of characters.	No
Data Properties-Validation	Message On Min Length Failure	Allows you to configure the message that the application will display to the user when the user does not enter a minimum number of required characters in the text area.	No
Data Properties-Validation	Real Time	Allows you to display the message in real time. When you click this check box, the application will display the error message to the user when the user enters the value in the text area.	No	Clear Check box

Security Configuration

Tab	Property Name	Description	Mandatory	New Default Values	Visibility Rules
Security Properties-Basic	Copy & Paste	When you click to select this check box, the application will allow the user to copy and paste the content of the text area into other elements. By default, this property is active.	No	Clear Check box
Security Properties-Basic	Data Masking	This property allows you to mask the data. After you click the Data Masking check box, the following boxes appear: 1. Masking Type 2. N 3. Masking Symbol	No	Clear Check box
Security Properties-Basic	Masking Type	Click this list to select one of the following options: 1. From Start This option masks a specified number of characters (for example:- **ample123) from the left. 2. From End This option masks a specified number of characters (for example:- Example1**) from the right. 3. From Start & End This option masks specified numbers of characters (for example:- **ample***) from the left and right of the string. 4. Except Start This option masks all characters except a specified number of characters (for example:- Ex********) from the left. 5. Except End This option masks all characters except a specified number of characters (for example:- ********23) from the right. 6. Except Start & End This option masks all characters except specified numbers of characters (for example:- Ex*****123) from the left and right. 7. All Alphabets This option masks all alphabets (for example:- *******123) in the string. 8. All Numbers This option masks all numbers (for example:- Example***) in the string. 9. All This option masks all characters in the string.	No	From Start	If Data Masking check box is selected
Security Properties-Basic	N	This box comes into view after you click the Data Masking check box. In this box, enter a numeric value that specifies the number of characters that are masked from right or left in the string. For example:- If you select From Start in the Masking Type list and then enter 4 in the N box, the data masking property masks four characters from the left. If you select From End in the Masking Type list and then enter 4 in the N box, the data masking property masks four characters from the right.	No		If Data Masking check box is selected
Security Properties-Basic	M	This box comes into view after you select From Start & End in the Masking Type list. In the M box, enter a numeric value that specifies the number of characters that the Data Masking feature masks from the right of the string. For example:- If you enter 4 in the M box, the data masking property masks four characters from the right.	Yes		If Masking Type = From Start & End
Security Properties-Basic	Masking Symbol	Click this list and then select one of the following characters that you can use as a masking symbol or character: 1. * 2. & 3. % 4. $ 5. # 6. @ 7. x 8. – 9. +	No		If Data Masking check box is selected

Event Configuration

On the “Text Area” element, you can configure the following events:

• onFocusOut
• onCompletion
• onTextChange
• onCharRemove