Update fields dropdown when layers dropdown is changed

[RoySP]

Newbie question here.

I have a LayerChooserFromMapWithDropbox added to my widget.

I am trying to make the "selection-change" event to work so that when a layer is changed, a dijit/form/Select box gets updated with fields from the selected layer.

This should be pretty simple but my limited experience is making this take longer than it should.

This is what I have so far...

      postCreate: function() {
        this.inherited(arguments);
        var layerChooser = new LayerChooserFromMap({
          createMapResponse: this.map.webMapResponse
        });
        _layerChooserDropBox = new LayerChooserFromMapWithDropbox({
          layerChooser:layerChooser
        }, this.layerChooserDropBoxDiv);
    
        on(_layerChooserDropBox, "selection-change", lang.hitch(this, function(){

          if (_layerChooserDropBox.getSelectedItem()){
            _layerObject = _layerChooserDropBox.getSelectedItem().layerInfo.layerObject;
            array.forEach(_layerObject.fields, lang.hitch(this, function(fldObj){
              // update fieldSelectDiv
            }));          
          }

        }));


      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP · Accepted solution]

Roy,

  Something like this then:

      postCreate: function() {
        this.inherited(arguments);
        var layerChooser = new LayerChooserFromMap({
          createMapResponse: this.map.webMapResponse
        });

        _layerChooserDropBox = new LayerChooserFromMapWithDropbox({
          layerChooser:layerChooser
        }, this.layerChooserDropBoxDiv);
    
        on(_layerChooserDropBox, "selection-change", lang.hitch(this, function(){
          if (_layerChooserDropBox.getSelectedItem()){
            //Clear old values first
            var i;
            for (i = this.fieldSelectDiv.options.length - 1; i >= 0; i--) {
               this.fieldSelectDiv.remove(i);
            }
            _layerObject = _layerChooserDropBox.getSelectedItem().layerInfo.layerObject;
            array.forEach(_layerObject.fields, lang.hitch(this, function(fldObj){
              var option = domConstruct.create("option");
              option.text = fldObj.name;
              this.fieldSelectDiv.add(option);
            }));          
          }
        }));
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RoySP]

Perfect Robert! Thank you!