Text
This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0
The “text” element makes a bold visual statement. Use them to create an impact when the main goal is to narrate a visual storytelling.

Usage
When to use |
You can use this element to display the news content, product information, content of a subject, and visual storytelling, in addition to displaying alerts and error messages on the screen/page. |
Text Configuration
The “Text” element consists of the following properties:
- UI Configuration
- Event Configuration
UI Configuration
For the “Text” element, you can configure the following UI properties:
Tab | Property Name | Description | Mandatory | New Default Value | 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 | Text_1 | |
Basic | Caption | In this box, you can enter the value of the “Text”element. The application displays the caption of the “Text” element on the screen. If you do not enter a value in the Caption box, the “Text” element displays $.{text} as a default value. | No | Sample Text | |
Basic | Default Value | This property allows you to define the default value of an element. To define the default value: –> Click in this box, and it displays the list of the pre-define functions, attributes, and element IDs. –> In the list, select an attribute from which the application will fetch the default value and then display it in the element. | {{fx}} | ||
Basic | Underline | It includes two options as follows: Yes: – Click this option if you want to underline the text. | No | unmarked | |
Basic | Visible | Allows you to define the default visibility of the UI element. | No | marked | |
Basic | Enable | Allows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable. | No | marked | |
UI Properties | 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. These pre-defined styles are: –-> Primary –> Secondary –> Warning –> Info –> Danger –> Success | No | Primary | |
UI Properties- Alignment & Spacing | Margin | Allows you to desirably define the 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 | Theme Variable (Margin) | |
UI Properties- Alignment & Spacing | Element Alignment | Allows the user to set the position of the text within the element. You can use any of the following options for positioning the text:- –> Right –> Top –> Bottom –> Top Right –> Top Left –> Bottom Right –> Bottom Left –> Center | No | Left Top | |
UI Properties- Caption | Font | Select the font type (For example – Arial) of the element’s caption. | No | Theme Variable (Font Family) | |
UI Properties- Caption | Size | Enter the font size of the caption. | No | 12 | |
UI Properties- Caption | Color | Select the color of the font of the caption. | No | Theme Variable (Caption) | |
UI Properties- Caption | Bold | Enter the thickness of the character of the element’s caption in the range of values from 1 to 9. | No | 4 | |
UI Properties- Caption | Style | Select the style of font (For example- Italic) of the caption | No | Normal | |
UI Properties- Shape & Decoration | Width Value | Enter the width of the element in the pixel unit. | No | 100% | |
UI Properties- Shape & Decoration | Height Value | Enter the height of the element in the percentage unit or pixel unit. | No | Set as ___ & Disable | |
UI Properties- Shape & Decoration | X | Allows you to move the element along the X-axis; when the value increases, the element moves from left to right. | No | Show & Disable | |
UI Properties- Shape & Decoration | Y | Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom. | No | Show & Disable | |
Data | Entity Path | This property allows you to map an attribute to the element. You define the JSON based attributes in the entity in the Data Modeler module. To define the entity path: –> Click in the Entity Path box, and a list expands. –> The list displays several attributes from the entity. –> In the list, select an attribute 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 attribute and then displays it in the element. b. Stores data in the attribute. | No | EntityName. |
Event Configuration
On the “Text” element, you can configure the following event:
- onClick
Was this article helpful?
YesNo