AnsweredAssumed Answered

Custom widget settings - layerInfos class help

Question asked by AndyEgleton on Oct 7, 2015
Latest reply on Oct 8, 2015 by AndyEgleton

Hi,

 

I'm new to the web app builder and JavaScript and I'm having a small problem with the settings page of my custom widget.

 

I have 2 selection boxes listing the feature layers that are in the map, allowing the user to pick two of the layers in the map for use in my widget. The problem I have is on first loading the settings page, the chosen layers from the widgets config file are not being selected in the selection boxes.

When opening the settings page a second time it displays the chosen layers in the selection boxes with no problems.

 

I'm assuming this has something to do with timing as the layerInfos class is deferred?

I think that means the selection boxes don't have any options when the settings from the config file are applied, so there are no options to select. How can I wait for the selection boxes to be fully populated before applying the settings from the config file?

 

If it helps, my current code is run in postCreate:

postCreate: function() {
  //var opts = this._getLayerList();
  //this._makeSelects(opts);
  this._getLayerList();
  },

 

Which gets a list of feature layers:

_getLayerList: function() {
  // Get the feature layer names...
  var lyrOptions = [];

  LayerInfos.getInstance(this.map, this.map.itemInfo).then(lang.hitch(this,function(layerInfosObject) {
       layerInfosObject.traversal(lang.hitch(this,function(layerInfo) {
            layerInfo.getLayerType().then(lang.hitch(this,function(type) {
                 if (type == "FeatureLayer") {
                      lyrOptions.push( { value: layerInfo.title, label: layerInfo.title } );
                 }
            }));
       }));
  }));

  //return lyrOptions;
  this._makeSelects(lyrOptions);
  },

 

And the list of layers in then used to populate the selection boxes:

_makeSelects: function(lyrOptions) {
  // Create selection lists
  var sel1 = new Select({
       id: "selectOpportunity",
       emptyLabel: " -- Choose a Map layer -- ",
       options: lyrOptions
       }).placeAt(this.opportunityFcList).startup();
  var sel2 = new Select({
  id: "selectRestricted",
  emptyLabel: " -- Choose a Map layer -- ",
       options: lyrOptions
       }).placeAt(this.restrictedFcList).startup();
  }

 

The problem is, setConfig is happening before the seletion boxes have any options, so my chosen options are not being selected the first time the settings page is opened:

setConfig: function(config) {
  // Load settings from the config file
  this.config = config;

  // Set select value from config
  if (config.opportunityLayer !== undefined) {
  dijit.byId('selectOpportunity').set('value', config.opportunityLayer);
  }
  if (config.restrictedLayer !== undefined) {
  dijit.byId('selectRestricted').set('value', config.restrictedLayer);
  }
  },

 

Thanks,

Andy

Outcomes