Label

Check out the function of the Label element.

It is the element that shows the alphanumeric contents. You can make general text representations, including characters like A-Z, 0-9, +%&.. Depending on the length of the text and the width of the area it is in, they can also appear automatically as paragraphs. You can display static text as well as display text with a condition added to an element in the interface. It also shows the texts found in your database/table, mostly with a data connection.

Adding Label

You can add the Label element from the Elements panel by dragging and dropping it to the screen. If you drag it to an empty area on the screen, it is added with the Row element. If you drag it into a column, you just add the Label element. You can add the Label element to all Container type elements.

The Label element is supported in both mobile and web applications.

1. Properties

You can use the Label element to display static or dynamic text. You can give role-based authorizations to the element as well as set its visibility with show/hide/conditional options.

Value

The fields where you can write the static text to be displayed by default are opened. You can also use Symbol Picker to show the value returned from an element and the data of an action in the basic UI Logic structure.

Maxline

With Maxline, you can make the content to be displayed up to a certain number of lines regardless of the text length.

Formatter

In the application development process, a formatter is a Property that ensures data is brought into a specific format or layout. Formatters usually organize data types such as text, numbers, date, and time and are used to achieve a specific look or format.

If an element on the screen is selected, the Formatter appears in the Properties panel attached to that element.

The Label element can represent different data types as a string. It can be ensured that the content to be displayed with the formatter is displayed in a format suitable for the needs. Although the phone number (+1 (212) 1234567) and a monetary amount (27.99) are numeric, the display formats are different.

When the Label element is selected, the Formatter comes as a dropdown in the properties panel.

The dropdown comes with options like money, money-var-1, money-tl, Phone, Percent, Fractional-2, Fractional-5, Date, Time, Date time, date var-1, time ago, and short date.

Money Amount (Money):

money: Represents the amount of money with 2 decimal places after the comma.
money-var-1: Represents the amount of money without a comma, without 2 decimal places.
money tl: Represents the amount of money by adding the TL symbol.

Phone Number (Phone):

phone: Displays the phone number in the format (999) 999-9999.

Percentage (Percent):

percent: Represents the percentage by adding the percentage symbol.

Fractional Number (Fractional):

fractional-2: Displays 2 decimals after the comma.
fractional-5: Displays 5 decimals after the comma.

Date and Time (DateTime):

datetime: Displays the date in the format DD/MM/YYYY HH:mm:ss.

Date:

date: Displays the date in the DD/MM/YYYY format.
date-var-1: Displays the date in the DD:MM:YYYY format.
short-date: Displays the date in the MMM Do format.

Time:

time: Displays the time in the HH:mm:ss format.
time-ago: Displays the date and time in the DD/MM/YYYY HH:mm:ss format.

These formats are examples that you can use to format specific types of data as you wish. You can apply each format as needed.

Authorization

You can use the authorization options for the Label element.

Visibility

You can manage the visibility of the element. It is always visible or hidden, or you can make it appear or hide depending on a condition.

Actions

You can add actions that you can add to the Label element with Add Actions.

2. Styling

You can make additional edits to the Label element by adding a Layout, Text, Fill, Border, or Shadow.