Skip to main content

⚙️ html

Overview​

Veezoo supports the html property for various knowledge graph concepts, including:

  • Classes
  • Numbers
  • Dates
  • Booleans
  • Strings
  • Measures
  • Functions
  • Units

The html property allows embedding custom HTML using the Liquid templating language, making it easy to format values dynamically.

Available Constants​

Within the html property, you can use the following constants:

  • value: The raw value.
  • formatted_value: The value formatted using format_number, ensuring proper number formatting.
  • min_value / max_value: (For numbers only) The minimum and maximum values in the corresponding column.

Available Filters​

The following filters are available in Liquid expressions and have been implemented to provide localization-aware formatting:

format_number​

Formats a number using the user's number format preferences. You can optionally override the locale and other formatting options using named arguments:

{{ value | format_number: locale: 'de-DE', style: 'currency', currency: 'EUR' }}

Like format_number_compact, this filter supports any options defined in the Intl.NumberFormat constructor. These include:

  • style: 'decimal', 'currency', 'percent', 'unit'
  • currency: e.g., 'USD', 'EUR'
  • minimumFractionDigits, maximumFractionDigits
  • notation: 'standard', 'scientific', 'engineering', etc.

Example:

{{ value | format_number: style: 'unit', unit: 'kilobyte', unitDisplay: 'narrow' }}

This will display a number like 1,024 KB.

format_number_compact​

Formats a number using compact notation (e.g., K, M, etc.). Defaults to 'en-US' locale unless overridden:

{{ value | format_number_compact }}
{{ value | format_number_compact: locale: 'de-DE' }}

You can also pass additional options supported by the Intl.NumberFormat constructor, such as:

{{ value | format_number_compact: locale: 'en-US', maximumFractionDigits: 1 }}

This gives you control over rounding, currency display, unit style, and other formatting aspects.

format_date​

Formats a date using date-fns and supports format strings and localization:

{{ value | format_date: 'EEEE, MMMM d, yyyy', locale: 'fr' }}
  • The first argument is the date format string, following the date-fns/format syntax.
  • You can pass a locale option to customize formatting to different languages. The locale uses the user's language by default but can be overridden.
  • Other options such as weekStartsOn or firstWeekContainsDate can be passed too.

Examples:

{{ value | format_date: 'yyyy-MM-dd' }} → 2024-06-15
{{ value | format_date: 'PPPP', locale: 'it' }} → sabato 15 giugno 2024
{{ value | format_date: 'MMM do, yyyy' }} → Jun 15th, 2024

See the full list of tokens at the date-fns documentation.

Examples​

Formatting a Number with Thousand Separators​

{{ formatted_value }}

If value is 1234567.89, this will display as 1,234,567.89 based on user locale settings.

Displaying Conditional Icons for Values​

{% if value > 1000000 %}
    <span>🔥 {{ formatted_value }}</span>
{% else %}
    <span>💰 {{ formatted_value }}</span>
{% endif %}

If value is 1500000, this will display: 🔥 1,500,000. If value is 50000, this will display: 💰 50,000.

Applying a Compact Number Format​

{{ value | format_number_compact }}

If value is 1500000, this will display as 1.5M using the default en-US locale.

Displaying the Weekday and Date​

{{ value | format_date: 'EEEE, MMMM d, yyyy' }}

If value is 2024-06-15, this will display Saturday, June 15, 2024.

Adding Custom HTML for a URL Field​

<a href="{{ value }}" target="_blank">Open Link</a>

If value is https://example.com, this will create a clickable hyperlink.

Showing a Conditional Badge for High Values​

{% if value > 1000000 %}
    <span style="color: green; font-weight: bold;">High</span>
{% else %}
    <span style="color: red;">Low</span>
{% endif %}

If value is 1500000, this will display: High (in green and bold).

Usage in VKL​

To define an html property in VKL, include it within the class, measure, or attribute definition.

Example: Adding HTML to a Measure​

kb {
    class Sales {
        measure Revenue {
            name.en: "Revenue"
            return: number
            definition: "sum(this.Sales_Amount)"
            
            html.en: "<b>{{ formatted_value }}</b>"
        }
    }
}

When displayed, this measure will appear bold and formatted appropriately.

Considerations​

  • Ensure all HTML is properly sanitized to prevent security issues.
  • Use format_number, format_number_compact, and format_date for proper localization.
  • The html property is optional, and if not defined, the default formatted value is used.

By using html, you can enhance the readability and presentation of values within Veezoo while maintaining flexibility in formatting and customization.