nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Group Configuration for WAB DE

JamesKo

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)

Vind meer berichten getagd met

Accepted answers

RobertScheitlin__GISP

James,

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

      _showIconContent<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>iconConfig<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> iconNode<SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>iconConfig<SPAN class="punctuation token">.</SPAN>inPanel <SPAN class="operator token">===</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>widgetManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">loadWidget</SPAN><SPAN class="punctuation token">(</SPAN>iconConfig<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>widget<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>openedId <SPAN class="operator token">=</SPAN> iconConfig<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">;</SPAN>
            iconNode <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_getIconNodeById</SPAN><SPAN class="punctuation token">(</SPAN>iconConfig<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.icon-node'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'jimu-state-selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>iconNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'jimu-state-selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">//we don't call widget.startup because getWidgetMarginBox has started widget</SPAN>
            <SPAN class="comment token">//widget.startup();</SPAN>

            html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN>widget<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'zIndex'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">101</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

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

            <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">.</SPAN>closeNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'keydown'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>keyCode <SPAN class="operator token">===</SPAN> keys<SPAN class="punctuation token">.</SPAN>ESCAPE<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>iconNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                  iconNode<SPAN class="punctuation token">.</SPAN><SPAN class="token function">focus</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
              <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

JamesKo

I've attached the groups tag...

groups.json.zip

Robert_van_Gilst_1-1606817643957.png

BijanTaheri_0-1737360981210.png

BijanTaheri_1-1737361344313.png

RelTbl.png

2018-04-26_16-45-19.png

RobertScheitlin__GISP

Can you share you config.json for review?

JamesKo

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.

RobertScheitlin__GISP

James,

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.