topic Re: Move auto launch widget in ArcGIS Web AppBuilder Questions

Move auto launch widget

CCWeedcontrol — Fri, 02 Jun 2017 16:13:49 GMT

I can't figure out how to move the Legend and ESearch windows down at launch.

Pic one currently show how the ESearch appears at launch, it covers up toggle buttons. Pic two is how i would like it to appear at lunch it doesn't cover up the toggle buttons. What do i need to change to get to Legend and ESarch auto lunch to move down.

Re: Move auto launch widget

RickeyFight — Fri, 02 Jun 2017 16:17:26 GMT

What theme are you using?

Re: Move auto launch widget

RickeyFight — Sat, 11 Dec 2021 11:05:04 GMT

What you need to do is change the top style for that widget

in the style.css found here:

\WebAppBuilderForArcGIS\server\apps\7\themes\LaunchpadTheme\widgets\Header\css

Assuming you are using the launchpad theme and your panel was # 30

You need to past in:

div#_30_panel {
 top: 150px !important;
}‍‍‍

You can find your panel number by look in the config.json or inspect the element and add a new style rule.

{
 "position": {
 "right": 100,
 "top": 20,
 "relativeTo": "map"
 },
 "placeholderIndex": 1,
 "id": "_30",
 "name": "Legend",
 "label": "Legend_2",
 "version": "2.3",
 "closeable": true,
 "icon": "/webappbuilder/apps/7/widgets/Legend/images/icon.png?wab_dv=2.4",
 "uri": "widgets/Legend/Widget",
 "config": "configs/Legend/config_Legend_2.json",
 "openAtStart": true
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It should then load at 150px down from the top of the page. If 150 is not enough adjust the number.

Re: Move auto launch widget

CCWeedcontrol — Fri, 02 Jun 2017 21:39:20 GMT

That did the trick, thank you!

Re: Move auto launch widget

CCWeedcontrol — Wed, 07 Jun 2017 17:46:19 GMT

well it did move it down but now the window only moves in a fixed horizontal way along the screen.

I need to be able to move the window around anywhere.

Re: Move auto launch widget

RobertScheitlin__GISP — Wed, 07 Jun 2017 17:56:49 GMT

Rickey's way of using !Important in the css will confine the widget to that top postion and make it unmovable up and down. What you really want to do is modify the opening position code in the widget See this thread:

https://community.esri.com/thread/190920-set-the-on-screen-widget-position-programmatically

Re: Move auto launch widget

CCWeedcontrol — Sat, 11 Dec 2021 11:05:08 GMT

Robert i add the following and it moved the context of the inside of the ESearch down (see attached).

  startup: function() {
        this.inherited(arguments);

        this._normalizePositionObj(this.position);
        this._makeOriginalBox();
        this.makePositionInfoBox();
        this.makeMoveable(this._positionInfoBox.w, this._positionInfoBox.w * 0.25);
        this.inherited(arguments);
        var position = {
          relativeTo: map,
          left: 277,
          top: 225,
          width: 300,
          height: 420
        };
        this.getPanel().setPosition(position);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Move auto launch widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 11:05:11 GMT

Not sure what all the other code is about but you only need this :

      startup: function(){
        this.inherited(arguments);

        var position = {
          relativeTo: map,
          left: 277,
          top: 225,
          width: 300,
          height: 420
        };
        this.getPanel().setPosition(position);

        this.fetchData();
        this.list.parentWidget = this;
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Move auto launch widget

CCWeedcontrol — Sat, 11 Dec 2021 11:05:14 GMT

I replaced what i had previously( not sure what the other code was, i was already there.) with what you posted(lines 8-22) and nothing changed at start up.

postCreate: function() {
        this._originalBox = {
          w: 400,
          h: 410
        };
      },

      startup: function() {
        this.inherited(arguments);

        var position = {
          relativeTo: map,
          left: 277,
          top: 325,
          width: 300,
          height: 420
        };
        this.getPanel().setPosition(position);

        this.fetchData();
        this.list.parentWidget = this;
      },

      _onMaxBtnClicked: function(evt) {
        evt.stopPropagation();
        var posInfo = this._getPositionInfo();
        if (posInfo.isRunInMobile) {
          if (this.windowState === 'maximized') {
            this.panelManager.normalizePanel(this);
          } else {
            this.panelManager.maximizePanel(this);
          }
          this._setMobilePosition();
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Move auto launch widget

RobertScheitlin__GISP — Thu, 08 Jun 2017 17:04:14 GMT

Well I added that code to the eSearch widgets startup and it move the opening position as it should. So I am not sure what you are doing differently.

Re: Move auto launch widget

CCWeedcontrol — Thu, 08 Jun 2017 18:02:44 GMT

oh my bad i was adding the code to the OnscreenWidgetIcon.js. I added it to the eSearch Widget.js and works thanks.