Group Configuration for WAB DE

669
8
Jump to solution
05-21-2019 05:27 PM
JamesKo
New Contributor III

I've setup some group widgets in my WAB DE 2.12 app config file. Although the functionality works, I'm receiving an error in the console. This only happens when I configure the "groupSetting" in the header controller config to use type: "dropdown". Is this a bug?

js.arcgis.com/3.28/init.js:115 TypeError: Cannot read property 'className' of null at Object.add [as addClass] (js.arcgis.com/3.28/init.js:216) at Object. (themes/FoldableTheme/widgets/HeaderController/Widget.js?wab_dv=2.12:1136) at js.arcgis.com/3.28/init.js:64 at l (js.arcgis.com/3.28/init.js:108) at e.then.b.then (js.arcgis.com/3.28/init.js:111) at Object._showIconContent (themes/FoldableTheme/widgets/HeaderController/Widget.js?wab_dv=2.12:1133) at Object. (themes/FoldableTheme/widgets/HeaderController/Widget.js?wab_dv=2.12:1023) at js.arcgis.com/3.28/init.js:64 at l (js.arcgis.com/3.28/init.js:108) at k (js.arcgis.com/3.28/init.js:108) "TypeError: Cannot read property 'className' of null at Object.add [as addClass] (https://js.arcgis.com/3.28/init.js:216:220)

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

James,

   Make these edits to the HeaderController Widget.js (line 31-33, 38-40, 45-47):

      _showIconContent: function(iconConfig) {
        var iconNode;
        if(iconConfig.inPanel === false){
          this.widgetManager.loadWidget(iconConfig).then(lang.hitch(this, function(widget) {
            this.openedId = iconConfig.id;
            iconNode = this._getIconNodeById(iconConfig.id);
            query('.icon-node', this.domNode).removeClass('jimu-state-selected');
            html.addClass(iconNode, 'jimu-state-selected');

            //we don't call widget.startup because getWidgetMarginBox has started widget
            //widget.startup();

            html.setStyle(widget.domNode, 'zIndex', 101);

            this._setOffPanelWidgetPosition(iconNode, widget);
            this.widgetManager.openWidget(widget);
            // ST: Added to listen for out of panel widgets that can be closed
            this.own(aspect.after(widget, 'onClose', lang.hitch(this, function() {
              this._unSelectIcon(iconConfig.id);
              // console.log(widget);
              // if (this.openedId && this.openedId === iconNode.config.id) {
              this._switchNodeToClose(iconNode.config.id);
              // }
              iconNode.focus();
            })));
          }));
        }else{
          this.panelManager.showPanel(iconConfig).then(lang.hitch(this, function(panel) {
            iconNode = this._getIconNodeById(iconConfig.id);
            query('.icon-node', this.domNode).removeClass('jimu-state-selected');
            if(iconNode){
              html.addClass(iconNode, 'jimu-state-selected');
            }
          
            this.openedId = iconConfig.id;
            this.own(aspect.after(panel, 'onClose', lang.hitch(this, function() {
              this._unSelectIcon(iconConfig.id);
              if(iconNode){
                iconNode.focus();
              }
            })));

            this.own(on(panel.closeNode, 'keydown', lang.hitch(this, function(evt){
              if(evt.keyCode === keys.ESCAPE){
                if(iconNode){
                  iconNode.focus();
                }
              }
            })));
          }));
        }
      },

View solution in original post

8 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

James,

   Not sure if it is just a typo in your post but the proper value is dropDown.

0 Kudos
JamesKo
New Contributor III

Hi Robert,

Yes, it was just a typo in the post...

I also created a new clean site in Web AppBuilder for ArcGIS and used the Foldable theme and got the same console error. It doesn't seem to affect functionality.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Can you share you config.json for review?

0 Kudos
JamesKo
New Contributor III

I've attached the groups tag...

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

James,

   Make these edits to the HeaderController Widget.js (line 31-33, 38-40, 45-47):

      _showIconContent: function(iconConfig) {
        var iconNode;
        if(iconConfig.inPanel === false){
          this.widgetManager.loadWidget(iconConfig).then(lang.hitch(this, function(widget) {
            this.openedId = iconConfig.id;
            iconNode = this._getIconNodeById(iconConfig.id);
            query('.icon-node', this.domNode).removeClass('jimu-state-selected');
            html.addClass(iconNode, 'jimu-state-selected');

            //we don't call widget.startup because getWidgetMarginBox has started widget
            //widget.startup();

            html.setStyle(widget.domNode, 'zIndex', 101);

            this._setOffPanelWidgetPosition(iconNode, widget);
            this.widgetManager.openWidget(widget);
            // ST: Added to listen for out of panel widgets that can be closed
            this.own(aspect.after(widget, 'onClose', lang.hitch(this, function() {
              this._unSelectIcon(iconConfig.id);
              // console.log(widget);
              // if (this.openedId && this.openedId === iconNode.config.id) {
              this._switchNodeToClose(iconNode.config.id);
              // }
              iconNode.focus();
            })));
          }));
        }else{
          this.panelManager.showPanel(iconConfig).then(lang.hitch(this, function(panel) {
            iconNode = this._getIconNodeById(iconConfig.id);
            query('.icon-node', this.domNode).removeClass('jimu-state-selected');
            if(iconNode){
              html.addClass(iconNode, 'jimu-state-selected');
            }
          
            this.openedId = iconConfig.id;
            this.own(aspect.after(panel, 'onClose', lang.hitch(this, function() {
              this._unSelectIcon(iconConfig.id);
              if(iconNode){
                iconNode.focus();
              }
            })));

            this.own(on(panel.closeNode, 'keydown', lang.hitch(this, function(evt){
              if(evt.keyCode === keys.ESCAPE){
                if(iconNode){
                  iconNode.focus();
                }
              }
            })));
          }));
        }
      },
JamesKo
New Contributor III

Bingo, thanks Robert!

0 Kudos
Autoridad_Nacional_del_AguaANA
New Contributor II

Hi. This problem also occurs in Launchpad. When to minimize the widget and want to drag. It gives a "className of null" error.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

This is something that will have to be reported to esri tech support.

0 Kudos