Creating dynamic dashboard content with Mustache

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 the following places:

Markdown visualizations

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}}**.

Dashboard text / Markdown tiles

This example demonstrates how to create a dynamic Iframe with Mustache.

Mustache tags are used to create a Google Maps search with a dynamic URL:

<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.

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

Available tags

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

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.