topic Re: How to close widgets programatically when user clicks on map? in ArcGIS Web AppBuilder Questions

How to close widgets programatically when user clicks on map?

tigerwoulds — Wed, 17 Jun 2020 03:42:50 GMT

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

Re: How to close widgets programatically when user clicks on map?

RobertScheitlin__GISP — Wed, 17 Jun 2020 12:47:42 GMT

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)?

Re: How to close widgets programatically when user clicks on map?

tigerwoulds — Wed, 17 Jun 2020 13:28:17 GMT

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.

Re: How to close widgets programatically when user clicks on map?

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:01:45 GMT

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);
          }));
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍