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 Develop... 

Thanks,

Tiger

[RobertScheitlin__GISP]

Tiger,

   This would be a poor workflow choice. Many widget require require interaction with the map. But if you only intend to use the layerlist and legend widgets then this could work. What theme are you using and where are those widgets located in that theme (i.e the default foldable theme and they are in the header controller widget)?

[tigerwoulds]

Robert, that's a good point. In this case this would only be for the Legend, LayerList, and Basemap gallary. I'm using the Launchpad theme. Widgets are stored in the Anchor Bar Controller.

[RobertScheitlin__GISP · Accepted solution]

Tiger,

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

      _publishMapEvent: function(map) {
        //add this property for debug purpose
        window._viewerMap = map;

        MapUrlParamsHandler.postProcessUrlParams(this.urlParams, map);

        console.timeEnd('Load Map');
        if (this.map) {
          this.map = map;
          this.resetInfoWindow(true);
          console.log('map changed.');
          topic.publish('mapChanged', this.map, this.layerInfosObj);
        } else {
          this.map = map;
          this.resetInfoWindow(true);
          topic.publish('mapLoaded', this.map, this.layerInfosObj);
        }
//close any open widgets in Anchorbar Controller.
        this.map.on("click", lang.hitch(this, function(evt){
          var controller = window._widgetManager.getWidgetsByName("AnchorBarController")[0];
          controller.openedIds.map(lang.hitch(this, function(wid){
            var panelId = wid + '_panel';
            window._panelManager.closePanel(panelId);
            controller._removeFromOpenedIds(wid);
          }));
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍