Text Label
The Text Label component is a text box that provides specific information to the app user and does not require any data input. To insert a Text Label component in the screen, go to the Left Panel in the Visual Builder. Go through the list of components to find the Text Label component or click the search bar and type its name. Then, drag and drop the component into the canvas and configure its attributes in the right panel. Refer to the sections below to learn more.
Important
The Text Label component can be used in web and mobile apps (both for Android and iOS devices).
Attributes
In the right panel, you can configure different attributes to customize the component. Refer to the sections below to learn more.
Design
In the Design tab, you can configure the selected component's basic information and the attributes that determine how the component will look like in the app. Refer to the sections below to learn more.
In this section, you fill in the selected component's basic details and alignment and size attributes. This section is available for every component dragged into the canvas. To learn more, read Design.
In this section, you can configure basic attributes of the component. Refer to the table below to learn more.
CSS Class | CSS or style invoked from Global Design > Themes and applied to the component. Click the field and select a style from the drop-down menu. TipYou can add more than one style. |
Profile Option | Code applied in reference to the app user profile. Click the field and enter the code. |
Value | Text displayed in the component that informs the app user about the data to be entered. You can add plain text or a reference to a parameter or register. You can also add the value to the translations dictionary or select an existing translation if there are languages selected in the context's settings. TipIf you don't complete this field, you can also enter the text by double clicking on the component and typing the desired text. Once you complete the Value field, you cannot use this option. |
Single Line | Attribute that indicates that the text value must be displayed in a single line within the component. Click the field and select true to enable this option or leave the field empty. TipThe only value in the drop-down menu is true. |
Single Line Mode | Attribute that indicates how the text value of the component is reduced to be displayed in a single line. The options available are: Ellipsis End, EllipsisMiddle, EllipsisStart, Stretch, TrimChar, TrimWord. TipTo configure this attribute, the value of the Single Line attribute must be true. |
Visible | Attribute that defines whether the component is visible in the app. Click the arrow and choose an option from the drop-down menu. Select true so that the component is visible in the app or false so that it is not visible. |
Important For Accessibility | Attribute that defines whether the screen reader reads or ignores the value defined in the Accessibility Text attribute of the component. Click the arrow and select an option from the drop-down menu. Choose true so that the screen reader reads the component or false so that the screen reader does not read the component. The default value is false. |
Accessibility Text | Alternative text. Add a short text to describe the component to users who may not be able to see it. The text will be read by iOS Voice Over or Android Talk Back. You can also add the accessibility text to the translations dictionary or select an existing translation if there are languages selected in your branch settings.Left Panel |
Accessibility Order | Attribute that tells the screen reader the order in which it must read the components. To configure it, click the field and enter a number to define the order. For example, if this component should be read in third place, enter the value 3. If you don't configure a custom order, components are read from top to bottom and left to right of the screen. |
In this section, you can configure the size and position attributes of the component. Refer to the table below to learn more.
Tab Index | Order in which the cursor moves from one component to another and focuses on each component by pressing the TAB key on a keyboard (web apps) or tapping Next (mobile apps in Android devices). Click the field and enter a value. | ||||||
Position Type | Click the arrow and select a type from the drop-down menu. Refer to the table below to learn more about the options available.
|
In this section, you configure the attributes to align the text within the component and set margin and padding properties. Refer to the table below to learn more.
Text Alignment | Click the desired alignment option. From left to right: none (no alignment), justified, left, centered or right, depending on whether you want the text not to be aligned, to be aligned with both left and right edges, the left edge, centered between the two edges of the component or aligned with the right edge. You can also click </> and type the code to set the text alignment manually. |
Padding properties | Space between the component's border and the component's content (value). Enter a value for each of the padding properties: Padding Top, Padding Left, Padding Bottom and Padding Right. You can click the arrow located to the right of each padding field and select the desired unit of measurement from the drop-down menu. |
Margin properties | Space around a component's border. Enter a value for each of the margin properties: Margin Top, Margin Left, Margin Bottom and Margin Right. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu. |
In this section, you configure the style of the component. Refer to the table below to learn more.
Background Color | Component's background color. To set a color, click the field and type the hex color code or click the square icon to open the color picker. In the color picker, select a color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code, respectively. |
Background Gradient | Color gradient defined for the component's background. To set the gradient, you must enter the gradient's direction (either horizontal or vertical) and the hex codes for the two colors of the gradient, all separated by commas. For example, to set a gradient in horizontal direction, enter the following: h,#673AB7,#949AC8. To set a gradient in vertical direction, enter: v,#673AB7,#949AC8. NoteIf you set a background color, the gradient won't be applied. Remember to complete one of the two options. |
Background Image | Image applied to the component's background. To add an image, click the Background Image field and type the name of the background image, or click the magnifying glass icon to open the image picker. Select one of the images available in the list, or use the search bar to find an image by name. |
Resource Origin | Method through which the resource referenced by the component is loaded. Fill in this field if the component selected references a resource, like an image or a video. Click the arrow and select one of the options available in the drop-down menu: choose L (Local) to retrieve the coded content from the local resources or choose H (HTTP) to retrieve the resource content from the Comm Server. |
In this section, you can define the order of the components within the screen. Refer to the table below to learn more.
Z-Index | Property that defines the components' position order. If several components overlap, components with a higher Z-index will be placed over those with a lower index. This field is filled in automatically. |
In this section, you configure parameters applicable to the shadows of the component.
Shadow offset-x | Enter a value for the shadow with regard to the X (horizontal) axis, which considers the center of the component as a starting point. If the value is a negative number, the shadow will point to the left. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu. |
Shadow offset-y | Enter a value for the shadow with regard to the Y (vertical) axis, which considers the center of the component as a starting point. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu. |
Shadow Blur Radius | Enter a value for the width of the shadow radius. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu. |
Shadow Color | To set the shadow color, click the field and type a hexa code or click the rounded-edges square icon to open the color picker. In the color picker, click the Hexa field and type a HEXA color code. |
In this section, you can set the attributes applicable to the text content of the component that will be visible in the app and that will inform the app user about the use or action of the text label. Refer to the table below to learn more.
Font Size | Text size. To set the size, click the field and type the desired value. Refer to the table below to learn more about the types of text sizes and values available.
| ||||||||||
Font Family | Text font family or typeface. To set a font family, click the arrow and select an option from the drop-down menu. You can also click </> and type the code to set the text font family manually. | ||||||||||
Font Style | Text font style. To set the font style, click the arrow and select an option from the drop-down menu. The only option available is italic. | ||||||||||
Font Weight | Text font weight. To set the font weight, click the arrow and select an option from the drop-down menu. The only option available is bold. | ||||||||||
Text Decoration | Decoration added to the text. To set the decoration, click the arrow and select an option from the drop-down menu. The only option available is underline. | ||||||||||
Color | Text color. To set the color, click the field and type a hexa color code or click the rounded-edges square icon to open the color picker. In the color picker, select a color or enter the hexa or rgba color code. |
Actions
In the Actions tab, you can set animations for the components in your app's screen and determine how the user invokes effects and triggers actions while interacting with the app. Refer to the sections below to learn more.
In this section, you can set events or actions on the component that will be triggered by other certain actions. For example, if the action configured is "On Click", an event or action will be triggered when the app user clicks the component. Refer to the table below to learn more about each action.
On Double Click | Action involving clicking or tapping the component twice. |
On Click | Action involving clicking or tapping the component. |
In all cases, to set the event or action to be triggered, type the action in the corresponding field or click the vertical three-dot icon. The Create new link window opens. Click the down arrow and select one of the link types available in the drop-down menu: View, SW States, Process, Lambda, Pop Up, Toggle, Event, Link, Mail, Module Screen or Interface Message. A new drop-down menu appears. Click the down arrow and select the action or event within the selected type. Then, complete the parameters applicable to the option selected. Once you configure the required parameters, click Accept.
In this section, you can set different effects on the component's attributes and the animations through which the effects take place. First, you must select the attributes for which you want to set effects. Refer to the table below to learn more.
Alpha | Component’s transparency or opacity. Enter the value to set the initial opacity of the component before the animation is executed. The value can range from 0 to 1, considering 1 as the value that grants the highest level of transparency. |
Scale | Component's dimension. Enter the value to set the initial scale of the component before the animation is executed. By default, the scale value is 1, which equals the component’s original size. The value can be any number starting on 1. |
Then, you configure the animation through which the effects previously defined will be executed. Refer to the table below to learn more about the animations available.
On Load Effect | Animation executed immediately after the screen loads. |
On Call Effect | Animation executed upon invoking it through a message. |
In all cases, you can set the animation's code or configure it with the Animation Editor. To configure the animation, click </> and then click on the text field to start typing the code or click the vertical three-dot icon to open the Animation Editor. Refer to Actions to learn how to use the editor.
Advanced
In the Advanced tab, you can configure advanced attributes for the component. Refer to the sections below to learn more.
In this section, you can set the different attributes available to configure the component's tooltip. Refer to the table below to learn more.
Tooltip Enabled | Determines whether the tooltip is enabled in the app for the selected component. Click the arrow and choose an option from the drop-down menu. Select true to enable the tooltip or false to disable it. | ||||||||||
Message | Message displayed by the tooltip. Enter a message to be displayed on screen. | ||||||||||
Color | Tooltip text color. To set a color, click the field and type the hex color code or click the square icon to open the color picker. In the color picker, select a color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code, respectively. | ||||||||||
Font Size | Tooltip text size. To set the size, click the field and type the desired value. Refer to the table below to learn more about the types of text sizes and values available.
| ||||||||||
Font Family | Tooltip text font family or typeface. To set a font family, click the arrow and select an option from the drop-down menu. You can also click </> and type the code to set the text font family manually. | ||||||||||
Background Color | Tooltip background color. To set a color, click the field and type the hexa color code or click the rounded-edges square icon to open the color picker. In the color picker, select a color or enter the hexa or rgba color code, respectively. | ||||||||||
Position | Click the arrow and select an option from the drop-down menu to set the position of the tooltip with regard to the component: Bottom, Left, Right or Top. |
In this section, you can configure different attributes that affect what you see in the Visual Builder. Refer to the table below to learn more.
Important
Changes made in this section will not appear in the published app.
Value | Attribute that simulates the behavior of the Value attribute from the Basic section in the Design tab. Click the field and type a value to see it applied to the component automatically. |
Background Image | Image applied to the component's background. |