How to use Handlebars.js templating with the ArcGIS Server JavaScript API

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.

screenshot showing Handlebars

Firstly, add a reference to the Handlebars JS code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.0/handlebars.min.js"></script>

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:

a Handlebars template in HTML

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

setting the template as the popup's contents

You can see a working demo of this at https://codepen.io/slead/pen/jJmVLN

Back to articles

CONTACT