topic Programmatically select a template in a TemplatePicker widget in ArcGIS JavaScript Maps SDK Questions

Programmatically select a template in a TemplatePicker widget

BrianBeck — Fri, 20 Sep 2013 17:28:50 GMT

Can I programmatically select a template in a TemplatePicker widget? I haven't found any methods of the widget itself to select and item. Is that possible?

Re: Programmatically select a template in a TemplatePicker widget

SteveCole — Wed, 06 Jul 2016 18:16:49 GMT

Necrobump. I'm interested in doing this as well in an app of mine. Is it possible?

Re: Programmatically select a template in a TemplatePicker widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:44:43 GMT

Here is a sample that programatically selects a 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.17/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
  <style>
    .itemLabel{
      color:#266A2E;
    }
  </style>

  <script src="https://js.arcgis.com/3.17/"></script>
  <script>
    require([
      "esri/layers/FeatureLayer",
      "esri/dijit/editing/TemplatePicker",
      "dojo/_base/array",
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], function(
      FeatureLayer, TemplatePicker,
      arrayUtils, dom, on
    ) {
      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(evt) {
          console.info(evt);
          var selected = widget.getSelected();
          console.log(selected);
          console.info(widget);
          var infoDiv = dojo.byId("info");
          if (selected) {
            infoDiv.innerHTML = selected.template.name;
          } else {
            infoDiv.innerHTML = "";
          }
        });

        var dom = dojo.byId("tpick-surface-18");
        on.emit(dom, "click", {
          bubbles: true,
          cancelable: true
        });
      }
    });
  </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>

Re: Programmatically select a template in a TemplatePicker widget

SteveCole — Wed, 06 Jul 2016 21:02:09 GMT

Thanks, Robert, but am I missing something? The user still has to click on an item in the TemplatePicker in order to select anything in the picker. For context, I'm trying to hide the editor in plain sight. Most users of the application will just view the content but I want a few people to have the ability to edit/add additional features. To accomplish this, I decided to take the legend in my app (which is a series of JPEG images for the various feature types):

..and add a listener event so that people who "know" can click (or shift-click, etc) on the JPEG and that would select that feature type from the templatePicker and allow the user to sketch the feature on the map. I suppose you can dig waaaaay deep to get at the template by something like

widget.params.featureLayers.types.templates[0]

but, ugh. It's probably just easier to keep a series of variables with default values, add a generic feature using the editor, and auto-populate fields when committing the feature to the featureLayer.

Re: Programmatically select a template in a TemplatePicker widget

RobertScheitlin__GISP — Wed, 06 Jul 2016 21:20:44 GMT

Steve,

the sample provided selects a specific template with no user interaction.