Label

What is it?

Introducing the Label Widget. This non-editable tool is perfect for displaying titles, descriptions, and various static content. Showcase text, numbers, calculations, and even variables/constants from other widgets with ease. Enhance your designs with the Label Widget for a polished and professional appearance.

How and When to use it? 

To insert a new Label on your page, effortlessly drag and drop the "Label" widget from the left-hand side of the screen into your desired location on the design area.

How to configure it?

1. Drag a Label into the Form

2. Click the Label and then click the Setting Button  to open Widget Property Settings. 

3. The Widget Property Settings is shown, which contains four tabs, General, Value , Visibility and Calculation. We will demonstrate how each tab and property is used. 

Introduction of General Tab Properties

Basic

Name 

Users can change the name of the Google Drive with the Name property.

For example, we create a Label, look through the Name  property under Basic in the Widget Property Settings. 

Description

It provides a space for app designer’s remark purpose. 

It is an internal use for App designers and it does not affect the display in design time and the run time.

Style

The options of Style are Label Style, Font Style, and Display Format.

Label Style has Size and Alignment dropdown options.

Font Style has a dropdown menu and three selectable options, bold, italicise and underline. The dropdown menu consists of presets that will change all appropriate options under Style to create the appropriate look for the kind of item described in the preset title.

For example, “Title” sets Label Style to Large Size and Font to Bold.

“Description” sets Label Style to Small Size and Font to italicise and underline.

Display Format provides options in a dropdown menu. If a format is chosen, the system interprets the user-defined Value differently and shows it differently, instead of just showing it as is.

For example, when the user-defined Value is 99999: In Numeric Format, thousands separators are applied. In Percentage Format, the value is multiplied by 100, becomes a decimal number with 2 decimal places, and has a % sign placed to its right. 

In Date time Format, the system interprets the Value as the number of milliseconds that have passed starting from unix timestamp(1/1/1970), and displays the beginning of system time, because 99999 milliseconds is such a small value. Using a bigger value, 1735660800000, shows a Date time value around present time in Date time Format. 

Position, Size and Layout

The options for Sizing Mode are Absolute Size and Relative Size. In Position, various parameters of the widget can be adjusted. These parameters change depending on what is selected in Sizing Mode. In Absolute Size, the dimensions of the widget are the same in the Page Builder and Production. 

The border of the Label can be set to “Solid” or “None” in Frame.

In Relative Size, the right and bottom sides of the widget expand to completely fill the screen/window in Production. 

The options of “Display in” are “Web & Mobile” (the default setting) and “Mobile Only”. It controls whether this label would be displayed on both platforms. 

Introduction of Value Tab Properties

Default Value

Introduction of Calculation Tab Properties

In the Calculation Tab, there are three fields, Mode, Default formula, and + New Conditional Formula.

(The red stars indicate which fields are mandatory.)

There is no conditional formula by default, the user must click on the area“+ New Conditional Formula” to add one.

There are five types of items that can be entered into a formula: Text, Date & Time, Variable, Function and Widget. You can see more in Calculation.