---
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
- Querying
---
The Search app in Hue is getting [better and better][1]!
On the next Hue release (or already on [Github's master][2]) you will be able to add additional functions to Hue's version of [Mustache][3] 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
[
][4]
We want to create a couple of functions to make our results prettier: a graphical star rating and a [static Google Map][5] 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 'hue_fn_' 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!
[
][6]
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][7] list or [@gethue][8]!
[1]: https://gethue.com/build-a-real-time-analytic-dashboard-with-solr-search-and-spark-streaming/
[2]: https://github.com/cloudera/hue
[3]: https://github.com/janl/mustache.js/
[4]: https://cdn.gethue.com/uploads/2015/07/Screenshot-2015-07-27-15.29.47.png
[5]: https://developers.google.com/maps/documentation/staticmaps/intro
[6]: https://cdn.gethue.com/uploads/2015/07/Screenshot-2015-07-27-15.51.21.png
[7]: http://groups.google.com/a/cloudera.org/group/hue-user
[8]: https://twitter.com/gethue