API 4.9 - How do I populate a element in a Widget?

ToddAtkins — Sun, 12 Dec 2021 02:20:37 GMT

In your main.tsx, remove the call for zoomToLayer.getChoices(). In your constructor for ZoomToUnique.tsx add this.getChoices() and remove this.renderNow() from the getChoices() method. Also add a renderable() decorator to your choices property and finally add a key tag to your select element. See below for a working ZoomToUnique.tsx:

import { subclass, declared, property } from "esri/core/accessorSupport/decorators";
import { renderable, tsx } from "esri/widgets/support/widget";
import Widget = require("esri/widgets/Widget");
import watchUtils = require("esri/core/watchUtils");
import FeatureLayer = require("esri/layers/FeatureLayer")
import FeatureLayerView = require("esri/views/layers/FeatureLayerView")
import QueryTask = require("esri/tasks/QueryTask")

@subclass("esri.widgets.ZoomToUnique")
export default class ZoomToUnique extends declared(Widget) {
     _currentChoice: string = "";

     @property()
     @renderable()
     choices: string[] = [];

     @property()
     comboBox: HTMLSelectElement = null;

     @property()
     layerView: FeatureLayerView

     @property()
     field: string

     constructor(layerView: FeatureLayerView, field: string, params?: Partial<__esri.WidgetProperties>) {
          super(params)
          this.layerView = layerView;
          this.field = field;
          this.getLayerChoices();
     }

     getLayerChoices() {
          const layer = this.layerView.layer;

          const queryParams = layer.createQuery();
          queryParams.returnDistinctValues = true;
          queryParams.returnGeometry = false;
          queryParams.where = "1=1";
          queryParams.outFields = [this.field];

          layer.queryFeatures(queryParams).then((features) => {
               this.comboBox = document.createElement("select");
               features.features.forEach(g => {
                    const choice = g.attributes[this.field];
                    this.choices.push(choice);
                    const option = document.createElement("option");
                    option.value = choice
                    option.text = choice
                    this.comboBox.add(option);
               });

               if (this._currentChoice === "") this._currentChoice = this.choices[0]
               // this.renderNow();
          });          
     }

     zoomToChoice() {
          if (this.comboBox == null) return;
          console.warn("Not implemented!")
     }

     render() {
          return (
               <div class="esri-widget">
                    <h3>{this.field}</h3>
                    <br />
                    <select>
                         {this.choices.map((c, idx) => <option key={idx} value={c}>{c}</option>)}
                    </select>
               </div>
          )
     }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: API 4.9 - How do I populate a

topic Re: API 4.9 - How do I populate a <select> element in a Widget? in ArcGIS JavaScript Maps SDK Questions