topic Re: Close/destroy widget A from widget B on clear button in ArcGIS Web AppBuilder Questions

Close/destroy widget A from widget B on clear button

naveenbesri — Thu, 25 Aug 2022 16:03:12 GMT

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.

Re: Close/destroy widget A from widget B on clear button

naveenbesri — Thu, 25 Aug 2022 17:11:31 GMT

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

Re: Close/destroy widget A from widget B on clear button

RobertScheitlin__GISP — Fri, 26 Aug 2022 12:46:59 GMT

@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#M1659

Re: Close/destroy widget A from widget B on clear button

naveenbesri — Mon, 29 Aug 2022 14:59:33 GMT

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.

Re: Close/destroy widget A from widget B on clear button

RobertScheitlin__GISP — Tue, 30 Aug 2022 12:32:47 GMT

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

Re: Close/destroy widget A from widget B on clear button

naveenbesri — Tue, 30 Aug 2022 14:00:42 GMT

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.

Re: Close/destroy widget A from widget B on clear button

RobertScheitlin__GISP — Tue, 30 Aug 2022 17:59:07 GMT

@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, ...

Re: Close/destroy widget A from widget B on clear button

naveenbesri — Wed, 31 Aug 2022 16:03:27 GMT

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

Re: Close/destroy widget A from widget B on clear button

RobertScheitlin__GISP — Wed, 31 Aug 2022 17:48:16 GMT

@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; },