How to close widgets programatically when user clicks on map?

896
3
Jump to solution
06-16-2020 08:42 PM
TigerWoulds
Occasional Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
TigerWoulds
Occasional Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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