Create a new controller widget

[WilliamMiller4]

In an effort to better understand how Web AppBuilder works, I'm going through the samples provided under the Sample Code tab of Web AppBuilder for ArcGIS (Developer Edition)​​​. I'm working through Create a new controller widget​​, but I'm getting the following error when I reach step 5e​​: error:TypeError: this.createIconNode is not a function. Below is my code for the SidebarController\Widget.js. Any help would be appreciated. Thank you. William

define([
  'dojo/_base/declare',
  'jimu/PoolControllerMixin',
  'jimu/BaseWidget'
  ], function(
    declare,
    PoolControllerMixin,
    BaseWidget
    ) {
  //To create a widget, you need to derive from BaseWidget.
  return declare([BaseWidget, PoolControllerMixin], {
    // DemoWidget code goes here


    //please note that this property is be set by the framework when widget is loaded.
    //templateString: template,


    baseClass: 'jimu-widget-sidebar-controller jimu-main-background',
    
    allConfigs: [],
    
    postCreate: function() {
      this.inherited(arguments);
      console.log('postCreate');
      
      this.allConfigs = this.getAllConfigs();
      for(var i = 0; i < this.allConfigs.length; i++) {
        this._createIconNode(this.allConfigs);
      }
    },
    
    startup: function() {
      this.inherited(arguments);
      console.log('startup');
    },
    
    _createIconNode: function(iconConfig, targetNode) {
      var iconNode, iconImage;
      if(!targetNode) targetNode = this.containerNode;


      iconNode = document.createElement('DIV');
      iconNode.className = 'icon-node';
      if(iconConfig.icon) {
        iconImage = document.createElement('img');
        iconImage.src = iconConfig.icon;
      }
      if(iconConfig.label) {
        iconNode.title = iconConfig.label;
        iconImage.alt = iconConfig.label;
      }


      iconNode.appendChild(iconImage);
      targetNode.appendChild(iconNode);


      return iconNode;
    }
  });
});

[WilliamMiller4]

Hi Robert,

In step 6c, the instructions are to "Use SimpleBorderPanel as the default panel in widgetPool."

ESRI/ArcGIS might want to change their screenshot in step 7 to reflect this, as well as display the Legend widget, which the user is instructed to click, and not the Basemap Gallery.

Thanks again for looking at this Robert.

William

[RobertScheitlin__GISP]

William,

  OK, now I understand what issue you are seeing. To have the code TOGGLE the widgets again like it did earlier in the code you need to use this code:

this.own(on(iconNode, 'click', function() {
        // remove active state from any icon node
        query('.jimu-state-active', self.domNode).removeClass('jimu-state-active');
        // close group tooltips
        query('.group-tooltip').removeClass('show');
        // if clicked on an active icon node
        if(self.activeIconNode === this) {
          // close panel
          self.panelManager.closePanel(self.openedWidgetId + '_panel');
          self.activeIconNode = null;
          return;
        }
        // clicking on a group icon
        if (self._isGroupIcon(iconConfig)) {
          // close panel
          self.panelManager.closePanel(self.openedWidgetId + '_panel');
          self.openedWidgetId = null;
          self._positionTooltip(self.groupTooltips[iconConfig.id], this);
          domClass.add(self.groupTooltips[iconConfig.id], 'show');
        } else { // clicking on a widget icon
          // show panel
          self._showWidgetContent(iconConfig);
        }
        domClass.add(this, 'jimu-state-active');
        self.activeIconNode = this;
      }));

Notice that it checks if the activeIconNode is the same as the one getting clicked and if so close it and return out of the code block and if not then continue checking if the IconNode is a group and if so close the activeIconNode also.

[WilliamMiller4]

Success!!! Thank you Robert!

Gratefully,

William

[RobertScheitlin__GISP]

William,

Don't forget to mark this thread as answered by clicking on the "Correct Answer" link on the thread that answered your question.

[Jianxia]

You are right. The screenshot is not right. We will update it in the coming dev edition release. Thanks!