Label

1. Overview

The LABEL component is used to display text, which can be either static or dynamic (sourced from the database). This component is ideal for adding descriptions, titles, totals, general information from filtered tables, or any other textual information. Interactions include opening modals, executing actions, manipulating data via SQL, opening forms, among other possibilities.

2. How to Configure

Drag to Screen: Drag the LABEL component to the screen where you want to display the text.

2.1. Data

Configure the View: Configure the View using SQL, Data Analysis View, or Table View if you want to feed the label with data from the database. It must return only one row and one column.

2.2. Personalize 

2.2.1. General Settings

Text: Enter the text to be displayed by the component. Variables can be used to display dynamic data in the label. For more information about variables, refer to topic 3 of this documentation.

Scroll: If the label content exceeds its size, enabling this option will generate an internal scroll.

Selectable Text: Allows users to select the text, making it possible to copy it using "Ctrl + C."

Size: Define the relative font size, which changes according to the user's screen resolution.

Minimum Font Size (px): Set the minimum font size to prevent the text from becoming too small on lower resolutions.

Font: Choose the font for the text.

Text Formatting: Adjust text formatting, including bold, italic, underline, text color, alignment, and style.

Text Color: Set the label text color.

Background Color: Set the label background color.

Transparency: Define the opacity of the label.

Border Settings: Configure outline, color, thickness, and border-radius.

Tooltip: Add a tooltip that will be displayed when hovering over the label.

Include Hyperlink: Allows you to include a link that opens in a new browser tab.

2.2.2. Animation

Transition: Enable to apply a background color transition effect when hovering over the label.

Transition Color: Define the background color for when the cursor hovers over the label.

Elevation: Enable to add a shadow effect that gives depth to the element.

Elevation Level: Define the depth level of the shadow effect.

2.2.3. Dynamic Visibility

The Dynamic Visibility functionality allows the label to become visible or invisible based on the value returned by a View. The component will disappear if the value is 0 or null and will appear for any other number. This functionality can be applied using the component’s own View or the screen’s View, offering flexibility in configuring and controlling component behavior.

• Referencing the Component’s Own View: When configured to use the component’s own View, Dynamic Visibility is based on the first row and column returned by the View to determine visibility.

• Referencing the Screen’s View: If visibility is configured to reference the screen’s View, users can specify the desired intersection using variable commands. For example, the "$A1" command can be used to get the value from the first row and column of the screen’s View.

2.2.4. Reactivity

Manually Choose Components to Update: If you want to understand how and why to use this functionality, refer to the "Reactivity" documentation.

2.3. Interactions

None: The label will have no interaction.

Action: Define an action to be executed when interacting with the label.

Database Action: Allows performing data manipulation operations such as INSERT, UPDATE, DELETE, or calling PROCEDURES.

Form: Opens a form upon interacting with the label.

Modal: Opens a modal upon interacting with the label.

3. Variables

The LABEL component allows the use of variables to display dynamic text, directly connecting the data returned by the VIEW to the displayed content.

3.1. Label's Own VIEW

When the LABEL uses its own VIEW, the displayed value will automatically be the first row and first column returned by the configured VIEW. To display this value in the LABEL, use the variable $value in the text field.

3.2. Screen's VIEW

When the LABEL uses the screen's general VIEW, it is possible to reference data from specific columns in this VIEW using variables in the format $A1, $B1, $C1, etc. These variables indicate the values of the first row of each column in the VIEW, according to the order displayed in the preview table. For example, $A1 returns data from the first column, $B1 from the second column, $C1 from the third column, and so on.

3.3. Selections Applied on the Screen

The $selection variable is used to display all selections and filters currently applied on the screen, such as date ranges, selected categories, and more. This variable is especially useful for showing which conditions or filters are active, making it easier to visualize and understand the displayed data.

4. Label Sets

Label sets are ready-made groupings of labels that facilitate the organization and display of information. These sets can be altered for various uses. In these groups, components are grouped so that dragging, resizing, or shrinking them adjusts all the elements together. If you want to modify only a specific label within the set, you must ungroup the components first. For more information on how to ungroup, refer to the "Component Layout" documentation.

4.1. Cards

These are simpler label sets. They can include texts, icons, values, and comparisons, depending on the chosen model.

4.2. Card Group

Larger sets that group multiple cards to display detailed and comparative information.

4.3. Headers

Pre-made components for displaying page titles.