2015-07-27-enhance-search-results.md 4.1 KB


title: Enhance your Search HTML results with Mustache! author: admin type: post date: 2015-07-27T14:02:49+00:00 url: /enhance-search-results/ sf_thumbnail_type:

  • none sf_thumbnail_link_type:
  • link_to_post sf_detail_type:
  • none sf_page_title:
  • 1 sf_page_title_style:
  • standard sf_no_breadcrumbs:
  • 1 sf_page_title_bg:
  • none sf_page_title_text_style:
  • light sf_background_image_size:
  • cover sf_social_sharing:
  • 1 sf_sidebar_config:
  • left-sidebar sf_left_sidebar:
  • Sidebar-2 sf_right_sidebar:
  • Sidebar-1 sf_caption_position:
  • caption-right sf_remove_promo_bar:
  • 1 categories:
  • Development

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!