How to close widgets programatically when user clicks on map?

tigerwoulds

Using Web App Builder Developer Edition. I have a web map that is using the out of the box Basemap, Layer List, and Legend Widget. Users are requesting that the widgets close when clicked off the widget, for example, on the map.

I've seen this sample on how to close widgets programmatically but I'm not sure where to implement this code for each widget. Also, where can I find the widgetID? I'm a novice with JavaScript and just starting to use WAB so any help is appreciated!

Close the widget programmatically—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers 

Thanks,

Tiger

RobertScheitlin__GISP

Tiger,

   In the jimu.js/mapManager.js _publishMapEvent frunction make these changes (lines 18 - 26):

      _publishMapEvent<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="comment token">//add this property for debug purpose</SPAN>
        window<SPAN class="punctuation token">.</SPAN>_viewerMap <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">;</SPAN>

        MapUrlParamsHandler<SPAN class="punctuation token">.</SPAN><SPAN class="token function">postProcessUrlParams</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>urlParams<SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">timeEnd</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="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">resetInfoWindow</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</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">'map changed.'</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">'mapChanged'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>layerInfosObj<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>map <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">resetInfoWindow</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">true</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">'mapLoaded'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>layerInfosObj<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">//close any open widgets in Anchorbar Controller.</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</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">var</SPAN> controller <SPAN class="operator token">=</SPAN> window<SPAN class="punctuation token">.</SPAN>_widgetManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getWidgetsByName</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"AnchorBarController"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
          controller<SPAN class="punctuation token">.</SPAN>openedIds<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</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>wid<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> panelId <SPAN class="operator token">=</SPAN> wid <SPAN class="operator token">+</SPAN> <SPAN class="string token">'_panel'</SPAN><SPAN class="punctuation token">;</SPAN>
            window<SPAN class="punctuation token">.</SPAN>_panelManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">closePanel</SPAN><SPAN class="punctuation token">(</SPAN>panelId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            controller<SPAN class="punctuation token">.</SPAN><SPAN class="token function">_removeFromOpenedIds</SPAN><SPAN class="punctuation token">(</SPAN>wid<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>