Skip to main content

Creating dynamic content with Mustache

Omni supports Mustache syntax in Markdown visualizations and dashboard Markdown tiles, making it easy to add dynamic content to your dashboards.

For example, the Breakdown tiles on the left side of the following image use Mustache to dynamically insert the current value of a filter:

Mustache enables you to craft tailored dashboards by:

  • Personalizing content for viewers by using their name, role, or other details
  • Dynamically styling Markdown visualizations with CSS rules

Supported content​

Mustache can be used in:

  • Markdown visualizations
  • Dashboard Markdown tiles
  • Iframe URLs for Markdown visualizations
  • Visualization axis labels

Available tags​

Refer to the Mustache reference for a complete list of the tags Omni currently supports.

Examples​

Markdown KPI visualization​

In this example, Mustache tags are used to reference specific values in the query's result set. Note: Line breaks have been added for readability:

There have been **{{result._totals._first.order_items.order_count.value}}**
orders placed for **{{result._first.products.brand.value}}** in 
**{{result._first.users.state.value}}**, and the average selling price is
**{{result._first.order_items.sale_price_average.value}}**.

See the 🗺📍 below for **{{result._first.products.brand.value}}** stores
in the top selling city - **{{result._first.users.city.value}}, 
{{result._first.users.state.value}}**.

Click to view example result set

Iframe URLs​

Iframes can also be made dynamic by using Mustache. In this example, Mustache tags are used to create a Google Maps search with a dynamic URL. Note: Line breaks have been added for readability:

<iframe src="https://www.google.com/maps/embed/v1/search?q={{result.0.products.brand.value_static}}
+in+{{result._first.users.city.value_static}},{{result._first.users.state.value_static}}&key=
AIzaSyCXfF4zpXaYkgVaBzj3oZUtmcDAxpdoOGk&" width="100%" height="100%" style="border:0;" allowfullscreen="" 
loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Visualization axis labels​

In this example, Mustache tags create a dynamic y-axis label that displays summary values and filter details.

Note: Line breaks have been added for readability:

Order Count ({{result._totals.0.order_items.order_count.value}}
Total Orders in {{result.0.users.state.value}})

Escaping​

All tags are escaped by default. This means that text enclosed in {{}} will always render, even if you intend to just display the curly braces themselves.

To return raw contents without escaping, add an extra curly brace:

{{{ variable }}}

To escape the curly braces and have them render, use backslashes:

\{\{variable}}

For more specifics on syntax and gotchas, refer to the Mustache docs.