Skip to main content

Text Formatting

The Directory widget supports text formatting using bracket-based tags inside the Input Field Settings. These tags allow you to style individual parts of the displayed text, insert separators, icons, and more.

How It Works​

The formatting system uses a two-step process:

  1. Field resolution - Field names (datasource property keys) are replaced with their actual values from the datasource.
  2. Tag processing - Bracket tags are parsed and converted into styled HTML output.

This means you can wrap field names with formatting tags, and the widget will first resolve the field name to its value, then apply the formatting.

Important Rules​

  • Each line in the field input is a separate field key. Tags cannot span multiple lines.
  • Opening and closing tags must be on the same line as the content they wrap.
  • Multiple field keys on separate lines will be concatenated without a separator. Use the [separator] tag to insert custom separators.

Formatting Tags​

Closing Tags​

Closing tags wrap around text content. They have an opening tag and a closing tag.

TagDescriptionExample InputResult
[bold]...[/bold]Makes text bold[bold]name[/bold]John
[italic]...[/italic]Makes text italic[italic]name[/italic]John
[underline]...[/underline]Underlines text[underline]name[/underline]John (underlined)
[small]...[/small]Reduces text size (0.7em)[small]name[/small]Smaller text
[large]...[/large]Increases text size (1.3em)[large]name[/large]Larger text
[color:X]...[/color]Sets background color[color:red]name[/color]Text with red background
[fontcolor:X]...[/fontcolor]Sets text color[fontcolor:blue]name[/fontcolor]Blue colored text
[fontsize:X]...[/fontsize]Sets font size[fontsize:32px]name[/fontsize]Text at 32px
[fontmultiplier:X]...[/fontmultiplier]Sets font size as em multiplier[fontmultiplier:2]name[/fontmultiplier]Text at 2x size

The color, fontcolor, fontsize, and fontmultiplier tags accept a value after the colon (:). Color values can be any valid CSS color: named colors (red, blue), hex (#ff0000), rgb (rgb(255, 0, 0)), etc.

Non-Closing Tags​

Non-closing tags are standalone and do not wrap around content.

TagDescriptionExample InputResult
[br]Inserts a line breakname[br]titleJohn (new line) Developer
[icon:X]Inserts a Material Icon[icon:phone]Phone icon
[separator:X]Inserts plain text[separator:Name: ]nameName: John

Price Formatting​

The price tag is a special non-closing tag used to format numeric values as currency.

TagDescriptionExample InputResult
[price:symbol:position:separator]Formats a number as price[price:$:prefix:,]itemPrice$ 1,000

Price tag parameters:

  • symbol - The currency symbol (e.g., $, EUR)
  • position - Where the symbol appears: prefix (before) or suffix (after)
  • separator - The thousands separator character (e.g., ,, ., )

Nesting Tags​

Tags can be nested to combine multiple formatting styles on the same text:

[bold][fontcolor:red]name[/fontcolor][/bold]

This would display the resolved name field in bold and red.

Examples​

The examples below assume a datasource with the following object structure:

{
  "name": "John Doe",
  "title": "Software Developer",
  "department": "Engineering",
  "phone": "+1 234 567 890",
  "salary": 75000
}

Example 1: Simple field with bold name​

Field input (single line):

[bold]name[/bold]

Output: John Doe

Example 2: Two fields with a separator​

Field input (two lines):

[bold]name[/bold]
[separator: - ]title

Output: John Doe - Software Developer

Example 3: Colored department label​

Field input (single line):

[separator:Department: ][fontcolor:blue]department[/fontcolor]

Output: Department: Engineering (in blue)

Example 4: Phone with icon​

Field input (single line):

[icon:phone][separator: ]phone

Output: (phone icon) +1 234 567 890

Example 5: Price formatting​

Field input (single line):

[price:$:prefix:,]salary

Output: $ 75,000

Example 6: Plain text template without tags​

Field input (single line):

name - title

Output: John Doe - Software Developer

Example 7: Combined formatting​

Field input (two lines):

[large][bold]name[/bold][/large]
[small][fontcolor:gray]title[/fontcolor][/small]

Output: John Doe (large) followed by Software Developer (small, gray)

Last updated on