Enhance your Search HTML results with Mustache!

Enhance your Search HTML results with Mustache!

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

Screenshot 2015-07-27 15.29.47

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’:

<script>
  viewModel.additionalMustache = function (item) {
    if (Mustache == "undefined") {
      return;
    }

    item.hue_fn_renderStars = function () {
      return function (val) {
        var stars = parseInt(Mustache.render(val, item));
        var html = '';
        for (var i=0;i<stars;i++){
          html += '<i class="fa fa-star"></i>';
        }
        return html; 
      }
    };
  
    item.hue_fn_renderMap = function () {
      return function (val) {
        var coords = Mustache.render(val, item);
        return '<img src="https://maps.googleapis.com/maps/api/staticmap?center=' + coords + '&zoom=14&size=300x300&markers=color:red%7C' + coords + '">';
      }
    };
  }
</script>

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

On the HTML tab we write this:

      <div class="row-fluid">
        <div class="row-fluid">
          <div class="span10">
            <h4>{{name}} {{#renderStars}}{{stars}}{{/renderStars}}</h4>
            <span class="muted">{{text}}</span>
          </div>
          <div class="span2">{{#renderMap}}{{latitude}},{{longitude}}{{/renderMap}}<br/>{{full_address}}</div>
        </div>
        <br>
      </div>

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!

Screenshot 2015-07-27 15.51.21

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

<script>
  viewModel.additionalMustache = function (item) {
    if (Mustache == "undefined") {
      return;
    }

    item.hue_fn_if = function () {
      return function (val) {
        var isTrue = $.trim(Mustache.render(val, item)) == 'true';
        return  isTrue ? "The condition is true!" : "No, it's false";
      }
    };
  }
</script>

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!

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*