Skip to main content

Configuring Fields

The Fields input section allows you to customize which properties from the data source should be displayed in the widget. Each property is defined in a text box, where every line represents a specific property.

Each line must contain the property key from your data source. Additionally, optional prefixes can be used to modify its formatting or behavior.

Alias/Label​

If you have a property key such as name_of_user, but you want to display it as Name in the widget, you can assign an alias/label by appending a separator (|) after the property key and specifying the desired label.

Example​

name_of_user|Name

Each property can have only one alias/label. Assigning multiple labels to a single property will cause the widget to malfunction.

Prefixes​

Prefixes allow further customization of field appearance and behavior. They are enclosed in square brackets ([]) and placed before the property key in the fields input.

Example​

[bold]name_of_user|Name

Some prefixes can be combined for additional formatting.
For example, to display the name_of_user property in bold font with size 18 and the label Name, use:

[bold][fontsize:18]name_of_user|Name

Available Prefixes​

Below is a list of supported prefixes along with their descriptions.

[id] - Unique Identifier​

Marks the field as a unique identifier.
The property will not be displayed in the widget but can be used internally for data processing.

[qr] - QR Code​

Generates a QR code from the field value.

[img] - Image​

Interprets the field value as an image source and displays the corresponding image.

[icon] - Icon​

Generates an icon based on the field value.
Any Google Font Icon can be used, but make sure the property is containing the icon name and not the label.
The icon names usually have lowercase characters, and every space character is replaced with an underscore (_).

[gallery] - Image Gallery​

Creates an image gallery from the field value.
The field must contain a valid JSON array of image URLs.

  • Example: 
    ["https://picsum.photos/200", "https://picsum.photos/200", "https://picsum.photos/200"]

[color] - Color Indicator​

Displays a color preview based on the field value.
The field value needs to be a valid HEX color code (e.g., #fff).

[bold] - Bold Text​

Renders the field value in bold text.

[italic] - Italic Text​

Renders the field value in italic text.

[underline] - Underlined Text​

Renders the field value with an underline.

[wrap] - Wrapped Formatting​

Formats text enclosed in {} brackets within the field.
Supports options such as remove, crossThrough, and fade.

[$ 0.00] - Currency Formatting​

Formats the field value as a currency amount.

[small] - Small Font Size​

Reduces the original font size of the field value by 30%.

[large] - Large Font Size​

Increases the original font size of the field value by 30%.

[fontcolor:#112233] - Font Color​

Sets the font color of the field value to the specified HEX code.
The specified color code needs to be a valid HEX color code.

[fontsize:16] - Specific Font Size​

Sets the font size of the field value to a specific value.
Any valid and positive numeric value from 0 to infinity can be used.

[half] - Half Cell Size​

Reduces the cell's height and width to half of its original size.

[double] - Double Cell Size​

Increases the cell's height and width to double its original size.

Last updated on