Enhance your Search HTML results with Mustache!

27 July 2015 in Development / Querying - 2 minutes read

The Search app in Hue is getting better and better!

On the next Hue release (or already on Github’s master) you will be able to add additional functions to Hue’s version of Mustache so you call functions directly in the HTML display.

Let’s see how to use it!

In our example we add a dashboard using the Yelp Demo data with an HTML result widget, like this

We want to create a couple of functions to make our results prettier: a graphical star rating and a static Google Map of the restaurant per each review that we have.

On the CSS/JS tab we can specify something the new Mustache functions ‘hue_fn_renderStars’ and ‘hue_fn_renderMap’:





it’s very important to prefix the name of the additional Mustache functions with ‘huefn’ so Hue can pick them up and process them.

On the HTML tab we write this:



{{name}} {{#renderStars}}{{stars}}{{/renderStars}}

{{text}}
{{#renderMap}}{{latitude}},{{longitude}}{{/renderMap}}
{{full_address}}

As you can see, the newly added functions can be called with {{#renderStars}}{{/renderStars}} and {{#renderMap}}{{/renderMap}}

And just with these few lines of code the display of our results got much better!

To access the string that is in between the function declaration in the HTML template you should refer to Mustache.render(val, item).

For instance, if you want to do a conditional function like ‘if’ and test for a variable inside it, you can do something like





and use it in the HTML tab with



{{#if}}{{field_to_test}}{{/if}}

With the HTML result widget the sky is the limit! 🙂

As usual feel free to comment on the hue-user list or @gethue!


comments powered by Disqus

More recent stories

05 December 2019
Hue 4.6 and its improvements are out!
Read More
13 November 2019
Visually surfacing SQL information like Primary Keys, Foreign Keys, Views and Complex Types
Read More
31 October 2019
Missing some color? How to improve or add your own SQL syntax Highlighter
Read More