How to make an HTML widget?

It says “Can be literal HTML”. Given that, how would I insert a datasource?

<div style="background-color: gray">This is a timestamp: datasources["DS"]["Timestamp"]</div>

Related SO question: http://stackoverflow.com/questions/31592886/adding-literal-html-to-an-html-widget-with-data-from-a-datasource

[jritsema]

@Shamzic If you want to do dynamic html, I would recommend the handlebars plugin that allows you to have clean separation between your html and javascript (view/model) as well as tooling that allows you to do it outside of freeboard’s editor using your favorite dev tools.

[icandothat2]

Yea this took me a while.

I think this is how the JS data source for the HTML widget works. Whatever you put in there is treated like a “closure”, so it just runs whatever code you put in there. Put “return” at the end and it will return a value out.

So, the trick is

1. Reference a datasource like:  var x = datasource['mysource']['data'];
2. build HTML as a string: var output = "<div style='color:blue'>"+x+"</div>";
3. return the html out like: return "output";