This sample shows how to configure the template picker widget to display templates for the specified feature layers. The code listens for the selection-change event and displays the name of each selected template.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Template Picker Widget</title> <link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css"> <style> .itemLabel{ color:#266A2E; } </style> <script src="https://js.arcgis.com/3.46/"></script> <script> require([ "esri/layers/FeatureLayer", "esri/dijit/editing/TemplatePicker", "dojo/_base/array", "dojo/dom", "dojo/domReady!" ], function( FeatureLayer, TemplatePicker, arrayUtils, dom ) { var layerUrls = [ "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/1", "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/2" ]; var layers = [], count = layerUrls.length; var loadFunc = function(evt) { count--; layers.push(evt.layer); if (!count) { console.info("Layers loaded"); createTemplatePicker(layers); } }; arrayUtils.forEach(layerUrls, function(url) { var layer = new FeatureLayer(url); layer.on("Load", loadFunc); }); function createTemplatePicker(layers) { var widget = new TemplatePicker({ featureLayers: layers, rows: "auto", columns: 9, showTooltip: true, style: "height: 100%; width: 900px;" }, "templatePickerDiv"); widget.startup(); widget.on("selection-change", function() { var selected = widget.getSelected(); console.log(selected); var infoDiv = dom.byId("info"); if (selected) { infoDiv.innerHTML = selected.template.name; } else { infoDiv.innerHTML = ""; } }); } }); </script> </head> <body class="claro"> <p> Template Picker Widget Samples:<br/> Click on an item to select. Click again to de-select.<br/> </p> <div id="containerDiv" style="height:650px;width:900px;"> <div id="templatePickerDiv"></div> </div> <p> Selected template label: <span id="info" style="font-weight: bold;"></span> </p> </body> </html>