Text Area

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

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 UseWhen 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

TabProperty NameDescriptionMandatoryNew Default ValuesVisibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesTextArea_XXXXX
BasicLabelIn this box, enter the title of the text area element. For example, Comment.NoLabel
BasicDefault ValueAllows 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 }}
BasicVisibleAllows you to configure the visibility of the element.

If this property is selected, the use can see the element in the application.
No Selected
BasicBusiness RuleClick 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
BasicEnableAllows you to configure the user-action on the element. If this property is selected, the use can perform the function on the element.NoSelected
BasicBusiness RuleClick 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
BasicPasswordIf you click this check box, the element displays the entered value in encrypted format.NoClear (Check box)
BasicMandatoryIf 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.
NoClear (Check box)
BasicMessage On MandatoryIn this box, enter the error message. The application will display this error message if the user does not perform the function on the element.NoRequiredWhen the Mandatory check box is selected
UI Properties-StyleStylesAllows 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.NoDefault
UI Properties-BackgroundColorClick the extreme left box, and then define the color of the element’s background.No#FFFFFF
UI Properties-Alignment and SpacingMarginAllows 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.No4
UI Properties-Alignment and SpacingElement’s AlignmentThis 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.
NoLeft
UI Properties-LabelFontSelect the font type (For example: – Arial) of the element’s title.NoOpen Sans
UI Properties-LabelSizeEnter the font size of the element’s title.No12
UI Properties-LabelColorEnter the font color of the element’s title.No#6F6F6F
UI Properties-LabelWeightEnter the thickness of the character of the element’s caption in the range of values from 1 to 9.No4
UI Properties-LabelStyleSelect the font’s style (typeface) (For example:- Italic) of the element’s title.NoNormal
UI Properties-LabelLine HeightIn this box, enter a numeric value in pixels (for example:- 18). This value specifies the character’s height in the element’s title.No18
UI Properties-LabelLetter SpacingIn this box, enter a numeric value in pixels (for example:- 2). This value specifies the space between characters in the element’s title.No0
UI Properties-PlaceholderTextIn 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.NoEnter here
UI Properties-PlaceholderSizeIn this box, enter the font size of the paceholder’s text in pixels.No14
UI Properties-PlaceholderColorAllows 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-PlaceholderLetter SpacingIn this box, enter a numeric value in pixels (for example:- 2). This value specifies the space between characters in the placeholder’s text.No0
UI Properties-InputFontClick this list to select the font of the element’s input text.NoOpen Sans
UI Properties-InputSizeClick this list to select the font size of the element’s input text.No14
UI Properties-InputColorAllows 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-InputWeightIn this box, enter the thickness of the input text’s font in pixels.No4
UI Properties-InputShow CursorBy 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-InputLine HeightIn this box, enter a numeric value in pixels (for example:- 18). This value specifies the character’s height in the input text.No21
UI Properties-InputLetter SpacingIn this box, enter a value in pixels. This value specifies the space between characters in the input text. No0
UI Properties-Shape and DecorationTypeUnder 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 DecorationWidthEnter the width of the element in pixels or percentage units.NoNullWhen Type = Manual
UI Properties-Shape and DecorationX Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.NoCurrent x-axis Coordinates
UI Properties-Shape and DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.NoCurrent y-axis Coordinates
UI Properties-Shape and DecorationNo of LinesIn 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.Yes3
UI Properties-Shape and DecorationMax LinesIn 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.No5
UI Properties-Shape and DecorationBorder RadiusAllows you to define the radius of the element’s corners. Defining the radius of the corner makes the corner of the element round.No4
UI Properties-Shape and DecorationBorder ColorAllows 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-TooltipShow TooltipClick this check box to make a tooltip available with the element.NoClear Check box
UI Properties-TooltipMessageThis 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-TooltipColorThis 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#6F6F6FWhen the Show Tooltip check box is selected

Data Configuration

TabProperty NameDescriptionMandatoryNew Default ValuesVisibility Rules
Data Properties-InputEntity PathThis 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-InputRead OnlyWhen you click this check box to activate (enable) the Read Only property, the user cannot enter the value in the text area.NoClear Check box
Data Properties-ValidationMaximum LengthAllows you to configure the maximum number of characters that the user can enter in the text area.No
Data Properties-ValidationMinimum LengthAllows you to configure the minimum number of characters that the user needs to enter in the text area.No
Data Properties-ValidationMessage On Max Length FailureAllows 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-ValidationMessage On Min Length FailureAllows 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-ValidationReal TimeAllows 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.NoClear Check box

Security Configuration

TabProperty NameDescriptionMandatoryNew Default ValuesVisibility Rules
Security Properties-BasicCopy & PasteWhen 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.NoClear Check box
Security Properties-BasicData MaskingThis 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
NoClear Check box
Security Properties-BasicMasking TypeClick 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.
NoFrom StartIf Data Masking check box is selected
Security Properties-BasicNThis 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.
NoIf Data Masking check box is selected
Security Properties-BasicMThis 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.
YesIf Masking Type = From Start & End
Security Properties-BasicMasking SymbolClick 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. +
NoIf Data Masking check box is selected

Event Configuration

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

  • onFocusOut
  • onCompletion
  • onTextChange
  • onCharRemove

Was this article helpful?
YesNo