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; } } }

show widget dynamically

HelenZhou

Hello.

I have a WAB application at version 2.16. There is a custom widget, which is set "visible: false," in the application's config.json. I would like to change it as visible if the log in user is in a permitted group. According to this discussion, Show hide layers widget based on Portal Named user level , I add the following codes to this custom widget.js postCreate module. But the code never hits to postCreate module. Where should I put those lines of codes?

thanks so much.

<SPAN class=""></SPAN><SPAN class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; postCreate: function () {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;console.log('postCreate');
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var widgetCfg = this._getWidgetConfig('MyCustomWidget');
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;widgetCfg.visible = true;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if(window._layoutManager.params.urlParams.mode === 'config'){
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; topic.publish('builder/widgetChanged', widgetCfg);
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}else{
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; topic.publish('widgetChanged', widgetCfg);
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },</SPAN>

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Helen,

OK I did some simple testing and I had to issue enabling a widget that had it's visibility set to false from inside the MapManager.js. Here is my code (simplified test no user authentication just set a widget to be visible after 5 seconds).

<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
      _showMap<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>appConfig<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="comment token">// console.timeEnd('before map');</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">time</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Load Map'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="comment token">//for now, we can't create both 2d and 3d map</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>appConfig<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">[</SPAN><SPAN class="string token">'3D'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>appConfig<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>itemId<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">_show3DWebScene</SPAN><SPAN class="punctuation token">(</SPAN>appConfig<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><SPAN class="token function">_show3DLayersMap</SPAN><SPAN class="punctuation token">(</SPAN>appConfig<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">if</SPAN> <SPAN class="punctuation token">(</SPAN>appConfig<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>itemId<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">_show2DWebMap</SPAN><SPAN class="punctuation token">(</SPAN>appConfig<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>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'No webmap found. Please set map.itemId in config.json.'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        <SPAN class="token function">setTimeout</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">this</SPAN><SPAN class="punctuation token">.</SPAN>_checkWidgetVisibility<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">5000</SPAN>
        <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>

      _checkWidgetVisibility<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">var</SPAN> widgetCfg <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_getWidgetConfig</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Draw'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        widgetCfg<SPAN class="punctuation token">.</SPAN>visible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">.</SPAN>_layoutManager<SPAN class="punctuation token">.</SPAN>params<SPAN class="punctuation token">.</SPAN>urlParams<SPAN class="punctuation token">.</SPAN>mode <SPAN class="operator token">===</SPAN> <SPAN class="string token">'config'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          topic<SPAN class="punctuation token">.</SPAN><SPAN class="token function">publish</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'builder/widgetChanged'</SPAN><SPAN class="punctuation token">,</SPAN> widgetCfg<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>
          topic<SPAN class="punctuation token">.</SPAN><SPAN class="token function">publish</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'widgetChanged'</SPAN><SPAN class="punctuation token">,</SPAN> widgetCfg<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>

      _getWidgetConfig<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>widgetName<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>  
        <SPAN class="keyword token">var</SPAN> widgetCnfg <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>  
        array<SPAN class="punctuation token">.</SPAN><SPAN class="token function">some</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>appConfig<SPAN class="punctuation token">.</SPAN>widgetPool<SPAN class="punctuation token">.</SPAN>widgets<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>aWidget<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>  
          <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>aWidget<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">==</SPAN> widgetName<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>  
            widgetCnfg <SPAN class="operator token">=</SPAN> aWidget<SPAN class="punctuation token">;</SPAN>  
            <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>  
          <SPAN class="punctuation token">}</SPAN>  
          <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</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">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>widgetCnfg<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>  
          <SPAN class="comment token">/*Check OnScreen widgets if not found in widgetPool*/</SPAN>  
          array<SPAN class="punctuation token">.</SPAN><SPAN class="token function">some</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>appConfig<SPAN class="punctuation token">.</SPAN>widgetOnScreen<SPAN class="punctuation token">.</SPAN>widgets<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>aWidget<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>  
            <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>aWidget<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">==</SPAN> widgetName<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>  
              widgetCnfg <SPAN class="operator token">=</SPAN> aWidget<SPAN class="punctuation token">;</SPAN>  
              <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>  
            <SPAN class="punctuation token">}</SPAN>  
            <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</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">return</SPAN> widgetCnfg<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

HelenZhou

Thanks so much, Robert.

What theme are you using? I am using TabTheme
Where is the widget that you are trying to change the visibility for (i.e in one of the on screen widget positions, in the Header controller widget, in the anchorbar controller)? The widget is one of the on screen widget. Its visibility is set to false at the config.json
Where in the WAB code are you checking the user permission? When the user opens the web site, Some .Net codes check if the log in user is in certain AD group. I save the checking permission result in the cookie. For example, if the user is in the AD group, I save the permission cookie as "yes". I then retrieve the permission cookie in java script code. I will turn on the widget if the permission cookie is "yes". This is where I have issue. I don't know where I should put the topic.publish to trigger the changes of the widget configuration. "<SPAN class="">topic.publish('widgetChanged', widgetCfg);</SPAN>"

RobertScheitlin__GISP

Helen,

What theme are you using?
Where is the widget that you are trying to change the visibility for (i.e in one of the on screen widget positions, in the Header controller widget, in the anchorbar controller)?
Where in the WAB code are you checking the user permission?
The permission is already checked before the map and widget load in the application

HelenZhou

Thanks Robert. There is a custom widget, which is set "visible: false," in the application's config.json. I would like the custom widget show up when the application loads if the log in user is in a permitted group. The permission is already checked before the map and widget load in the application. I have tried to put the "<SPAN class="">topic.publish</SPAN>"

code in the jimu.js\layoutManagers\BaseLayoutManager.js postCreate. The _onWidgetChanged is still not fired in \\tst-gis6\c$\inetpub\wwwroot\iMapWAB\jimu.js\ConfigManager.js.

RobertScheitlin__GISP

Like I already said in that thread. I can't tell you exactly where to put this as i am not aware of your exact workflow.

You need this code somewhere in your app that will be used to control the visibility of on screen widgets. Like some other widget that will always be added to your app.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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