Close/destroy widget A from widget B on clear button

[naveenbesri]

Hi All,

as per our requirement we will be performing some operations in both widget A and widget B.

after that when we click on clear button in widget B then widget A needs to close and get destroy so that performed operations on widget A needs to get cleared. 

Kindly do the needful

Thanks. 

[naveenbesri]

Hi @RobertScheitlin__GISP  sorry to bother you. Kindly help me out on this if you do got any idea ? 

[RobertScheitlin__GISP · Accepted solution]

@naveenbesri You can close a widget using this line of code.

this.props.dispatch(appActions.closeWidget("the ID of the widget you want to close"));

Not sure about how to destroy a widget or why you would want to verses just close the widget. In widget widget A you can add some code to componentDidUpdate to do any clean up of things you did in widget A, like outlined in this thread. https://community.esri.com/t5/arcgis-experience-builder-questions/widget-close-event/m-p/1040201#M16...

[naveenbesri]

Thanks @RobertScheitlin__GISP Robert 😊  But  I am try to refer to  WAB not in experience builder. I achieved this by publishdata passing some clearmessage to widget B. while clicking on clear button in widget A on receive data in widget B will receive my message placed if condition and closing  my widget B using panelmanager.closepanel(). 

can we hide widget B in WAB application ? and whenever widget A publish data(widget communication) then widget B needs to open and show the data. please help me on this.

[RobertScheitlin__GISP]

@naveenbesri Sorry I forgot to check which forum I was in. Is widget B an onScreenWidget or is it part of the HeaderControllers' widgets? The answer to that will make all the difference in the code that I will share.

[naveenbesri]

Hi Robert, widget B is an onScreen widget and widget B icon shouldn't  be visible in application but it has to open while sending data to widget b from widget A. 

[RobertScheitlin__GISP · Accepted solution]

@naveenbesri  So for the onScreen widget placeholder to not be visible but be loaded and listening for another widget that is pretty simple. In the aps main config.json just search for the widgets name and make the widgets position left attribute a large negative number.

"position": {
  "left": -550,
...

[naveenbesri]

Thank you Robert it worked and able to open widget B from widget A but widget B is going out of map on open how to get widget open in  center of the map. plz help me 

[RobertScheitlin__GISP · Accepted solution]

@naveenbesri Here is some code I use to open an off screen widget.

define([
...
'jimu/WidgetManager',
    'jimu/PanelManager',
    'dojo/_base/array',
  ],
function (
...
WidgetManager, PanelManager, array
  ) {
...

postCreate: function () {
...
this.wManager = WidgetManager.getInstance();
        this.pManager = PanelManager.getInstance();
      },

_openAboutWidget: function () {
        if (this.wManager) {
          var widgetCfg = this._getWidgetConfig('About');
          if (widgetCfg) {
            var aboutWidget = this.wManager.getWidgetByLabel(widgetCfg.label);
            if (aboutWidget) {
              this.wManager.openWidget(aboutWidget);
              this.pManager.showPanel(aboutWidget);
            } else {
              this.wManager.loadWidget(widgetCfg).then(lang.hitch(this, function (widget) {
                if (widget) {
                  this.wManager.openWidget(widget);
                  this.pManager.showPanel(widgetCfg).then(lang.hitch(this, function (panel) {
//Move the widgets position back to on screen
                    panel.setPosition({
                      top: 45,
                      left: 55
                    });
                    this.pManager.normalizePanel(panel);
                  }))
                }
              }));
            }
          }
        }
      },

      _getWidgetConfig: function(widgetName) {
        var widgetCnfg = null;
        array.some(this.wManager.appConfig.widgetPool.widgets, function(aWidget) {
          if(aWidget.name == widgetName) {
            widgetCnfg = aWidget;
            return true;
          }
          return false;
        });
        if(!widgetCnfg) {
          /*Check OnScreen widgets if not found in widgetPool*/
          array.some(this.wManager.appConfig.widgetOnScreen.widgets, function(aWidget) {
            if(aWidget.name == widgetName) {
              widgetCnfg = aWidget;
              return true;
            }
            return false;
          });
        }
        if(!widgetCnfg) {
          /*Check OnScreen groups widgets if not found in OnScreen widgets*/
          array.map(this.wManager.appConfig.widgetOnScreen.groups, function(aGroup) {
            array.some(aGroup.widgets, function(aWidget) {
              if(aWidget.name == widgetName) {
                widgetCnfg = aWidget;
                return true;
              }
              return false;
            });
          });
        }
        return widgetCnfg;
      },