topic Re: move HomeButton widget programmatically in ArcGIS Web AppBuilder Questions

move HomeButton widget programmatically

NatashaManzuiga — Wed, 27 Jul 2016 07:13:41 GMT

Hi all,

at the top of my HomeButton I have a custom widget that can grow....

and I wish I could set top position value to HomeButton.

I am able to get the height of the custom widget

ar cs = domStyle.getComputedStyle(divCustomWidget);

var h = cs.height;

but how can I set the top distance at the HomeButton widget?

Thanks,

Naty

Re: move HomeButton widget programmatically

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:30:34 GMT

Naty,

You just need to get a reference to the widget:

Requires:

'jimu/WidgetManager',
'dojo/_base/html',
WidgetManager,
html,

main code

        var widgetCfg = this._getWidgetConfig('HomeButton');
        if(widgetCfg){
          var hbWidget = WidgetManager.getInstance().getWidgetByLabel(widgetCfg.label);
          html.setStyle(hbWidget.domNode, "top", "90px");
        }

support function:

_getWidgetConfig: function(widgetName){
        var widgetCnfg = null;
        array.some(WidgetManager.getInstance().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(WidgetManager.getInstance().appConfig.widgetOnScreen.widgets, function(aWidget) {
            if(aWidget.name == widgetName) {
              widgetCnfg = aWidget;
              return true;
            }
            return false;
          });
        }
        return widgetCnfg;
      },

Re: move HomeButton widget programmatically

NatashaManzuiga — Tue, 02 Aug 2016 10:05:11 GMT

Robert, your code perfectly works.

But if I resize the window, the HomeWidget reset the top distance to the one I set in config.json...

.....

Thanks,

Naty

Re: move HomeButton widget programmatically

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:30:37 GMT

Naty,

So you just have to add code to handle the re-layout in the LayoutManager.js for it then (lines 21-23):

_onLayoutChange: function(appConfig){
      this._changeMapPosition(appConfig);

      //relayout placehoder
      array.forEach(this.widgetPlaceholders, function(placeholder){
        placeholder.moveTo(appConfig.getConfigElementById(placeholder.configId).position);
      }, this);

      //relayout icons
      array.forEach(this.preloadWidgetIcons, function(icon){
        icon.moveTo(appConfig.getConfigElementById(icon.configId).position);
      }, this);

      //relayout paneless widget
      array.forEach(this.widgetManager.getOnScreenOffPanelWidgets(), function(widget){
        if(widget.closeable){
          //this widget position is controlled by icon
          return;
        }
        var position = appConfig.getConfigElementById(widget.id).position;
        if(widget.id.indexOf('HomeButton') > -1){
          position.top = 90;
        }
        widget.setPosition(position);
      }, this);

      //relayout groups
      array.forEach(this.preloadGroupPanels, function(panel){
        var position = appConfig.getConfigElementById(panel.config.id).panel.position;
        panel.setPosition(position);
      }, this);
    },

Re: move HomeButton widget programmatically

NatashaManzuiga — Wed, 03 Aug 2016 12:37:45 GMT

Many thanks Robert!

Naty