Handlebars.js is a templating solution which makes it easy to create attractive templates using HTML markup, then insert them into the page when required.
It's possible to integrate Handlebars templates with the ArcGIS Server JS API, for example in the Identify tool or with a layer's popup template. This is an easy way to override the somewhat sterile default templates.
Firstly, add a reference to the Handlebars JS code:
Next, add an HTML template in Handlebars syntax, somewhere before the closing BODY tag of the map page. The contents of this template are basically standard HTML, with the curly-braces used to denote variables which will be substituted when the popup is shown. The variables correspond to the field names as returned by ArcGIS Server:
Define the Handlebars template in the JS code:
var source = document.getElementById("popup-template").innerHTML;
var template = Handlebars.compile(source);
Finally, set the
template as the
content of the layer's
You can see a working demo of this at https://codepen.io/slead/pen/jJmVLN