Programmatically select a template in a TemplatePicker widget

BrianBeck · ‎09-20-2013

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?

SteveCole · ‎07-06-2016

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

RobertScheitlin__GISP · ‎07-06-2016

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>

SteveCole · ‎07-06-2016

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.

RobertScheitlin__GISP · ‎07-06-2016

Steve,

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