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.