Select to view content in your preferred language

Close/destroy widget A from widget B on clear button

1327
8
Jump to solution
08-25-2022 09:03 AM
naveenbesri
Frequent Contributor

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. 

0 Kudos
3 Solutions

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

 

View solution in original post

RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

8 Replies
naveenbesri
Frequent Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

@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
Frequent Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
naveenbesri
Frequent Contributor

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. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

@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
Frequent Contributor

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 

naveenbesri_0-1661961547551.png

 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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