Custom no results messages and experiences in Markdown tiles

Visualizations
1

Sometimes when creating a custom markdown tile you need to consider what to display when there are no results returned from a query. Empty or blank visualizations can be a bit confusing to end-viewers. For example, here’s a markdown tile displaying new customer names,

simple-dash-example
simple-dash-example1176×886 85.1 KB

The code here is pretty straight forward and works well when results are returned:

<style>
  h2 { margin-top: 0; }
  ul.name-list {
    column-count: auto;
    column-width: 8rem;
  }
</style>
## Welcome to all of our customers {{#filters.users.state.value}}from {{filters.users.state.value}}{{/filters.users.state.value}} that joined yesterday!

<ul class="name-list">
{{#result}}
 <li>{{users.full_name.value}}</li>
{{/result}}
</ul>

However, when I filter by a state that didn’t have any new customers, no results returned and the blank tile looks like something might be broken. It would be nicer to put up a message that says we don’t have any new customers in this situation:

sad-no-results

One useful pattern I’ve found to accomplish this is to use mustache’s inverted sections. Regular sections are used in mustache to display content when there are one or more items. Inverted sections do the opposite, rendering content when a the content referenced is empty, false or non-existent.

The syntax is pretty straight forward: use the caret (^) to indicate the beginning of an inverted section (like {{^result}})and then a forward slash (/) to indicate the end (like {{/result}}. Inside the inverted section you put the content you want to display when there are no results.

So let’s go clean up the example above! After the <ul> listing all the names when they exist, ee can add the inverted section:

{{^result}}
  <p>No new customers</p>
{{/result}}

I can also get a bit fancy and insert the filter value when it exists. Here’s what the end result looks like and the full markdown code:
happy-no-results

<style>
  h2 { margin-top: 0; }
  ul.name-list {
    column-count: auto;
    column-width: 8rem;
  }
</style>
## Welcome to all of our customers {{#filters.users.state.value}}from {{filters.users.state.value}}{{/filters.users.state.value}} that joined yesterday!

<ul class="name-list">
{{#result}}
 <li>{{users.full_name.value}}</li>
{{/result}}
</ul>
{{^result}}
  <p>No new customers from {{filters.users.state.value}} {{^filters.users.state.value}} anywhere {{/filters.users.state.value}}</p>
{{/result}}

Hopefully this example gives you a few ideas for smoothing out your markdown experiences and ideas to test out inverted sections. Have fun and share any cool tricks you come up with!

1 Like