Text (FV Component)

Specific Properties

In the vFlow module, you can find the “text” element at many places. First, you can find the “text” element in the “FV” component. You can also find the “text” element in the “Form” component. In the “FV” component, the “text” element works the simple text (string based value) that you can display on the application page.

In the “Form” component, the “text” element works as the input field or text box that you can use to capture the user’s input. The following table describes the properties of the “Text” (Input Field) element that the “Form” component contains.

Property Type	Description
Element Color	Click this check box to define the element’s color.
Comma Separated as INR	This property allows you to display a value with comma. This property is configured for the currency representation
Is Visible	By default, this check box is selected to make this property active. It makes the element visible to the end-user on the application.
Is Enable	By default, this property is also selected, which makes it active. This property allows the end-user to perform the functions on the element.
Default Value	In this field, you can configure the default value that the element will display to the user. In the Default Value field: –> You can either enter the default value manually –> You can use the getVal ( ) function to fetch the default value from the data source.
Custom Label	In this field, enter the custom label’s value that the application will fetch from the element’s data source and display it in place of the element’s name. You can use the getVal ( ) function and then enter the custom label’s path or use the concatenate function as follows: CONCAT(“Hi”, getVal(“userId”))
Section/Area	Validation
Required	Click this check box when you want to configure the validation message. The application will display the validation message after the user enters the wrong value in the element.
Regex	In this field, you can define a complex condition. When the user enters the value in the element, the application checks the value against the regex based condition. If the element’s value fails to satisfy the regex based condition, the application displays the error.
Max Length	In this field, enter a numeric value that specifies the maximum number of characters that the user can enter in the element. If the number of characters in the element exceeds the permissible number of characters, the application raises an error.
Min Length	In this field, enter a numeric value that specifies the minimum number of characters that the user can enter in the element. If the character length in the element is less than the permissible character length, the application raises an error.
Max Value	In this field, enter a numeric value. This numeric value is the maximum value that the user can enter in the element. If the user enters a value that is bigger than the permissible maximum value, the application will raise the error.
Min Value	In this field, enter a numeric value. This numeric value is the minimum value that the user can enter in the element. If the user enters a value that is less than the permissible minimum value, the application will raise the error.
Validation Message	Click this field and then select an ID. The selected ID is mapped to the validation message that you create and configure in the message master module. You can apply the validation message to the following properties: 1. Regex 2. Max Length 3. Min Length 4. Max Value 5. Min Value The application checks and validates the element’s value against the configuration of these properties. If the application fails to validate the element’s value, it raises the error and displays the validation message.
Leading Icon (Icon Type)	Click this list and then select one of the following values: –> Mat Icon Select this value to display the image from the material.io library. The “Mat Icon” category includes the font-based icons and SVG icons. –> Image Select this value to display the bitmap-based images, including png, jpg, etc. When you use this property, the application displays the icon before the element or data.
ICON Name/URI	In this field, enter the icon’s name or URL. Before you enter the icon’s name or URL in the Icon Name/URI field, you need to define the icon’s name or URI in the element’s data source.
(Trailing icon (Icon Type)	Click this list and then select one of the following values: –> Mat Icon Select this value to display the image from the material.io library. The “Mat Icon” category includes the font-based icons and SVG icons. –> Image Select this value to display the bitmap-based images, including png, jpg, etc. When you use this property, the application displays the icon after the element or data.
Icon Name/URI	In this field, enter the icon’s name or URL. Before you enter the icon’s name or URL in the Icon Name/URI field, you need to define the icon’s name or URI in the element’s data source.
Tooltip Label	In this field, enter the content that you will display in the tooltip. You can either enter the tooltip content manually or fetch it from the data source by using the getVal ( ) function.

Note:- Using the data source to fetch the data and configuring the event is broadly described in the post: vFlow Advanced.