topic Re: Layer List auto start location change in ArcGIS Web AppBuilder Questions

Layer List auto start location change

LeoLadefian4 — Thu, 03 Sep 2015 15:14:20 GMT

How do i set the location of the Layer List when auto start is set to true. The Layer List covers up the zoom in and out buttons in the Launchpad Theme

Re: Layer List auto start location change

RobertScheitlin__GISP — Sun, 12 Dec 2021 01:26:21 GMT

Leo,

There is no configuration for this so you have to edit the

[install dir]server\apps\[ap number]\themes\LaunchpadTheme\panels\LaunchpadPanel\Panel.js

When you open this file find this function:

setPosition: function(position){
      var style, box, row, col, size;

      box = this._getLayoutBox();
      size = Math.floor(box.w / (position.width + position.margin));

      row = Math.floor(position.index / size);
      col = position.index % size;
      position.left = (row + 1) * position.margin + col * (position.width + position.margin);
      position.top -= position.margin * row;
      position.left += 50;

      this.position = lang.clone(position);

      if(window.appInfo.isRunInMobile){
        position.left = 0;
        position.top = box.h / 2;
        position.width = box.w;
        position.height = box.h / 2;
      }

      style = utils.getPositionStyle(position);
      style.position = 'absolute';

      domConstruct.place(this.domNode, jimuConfig.mapId);
      domStyle.set(this.domNode, style);

      this._onResponsible();
    },

and add line 11 above

Re: Layer List auto start location change

YueWu1 — Sun, 12 Dec 2021 01:26:23 GMT

Hi Leo,

You can use any modern browser developer debugging tool to find the specific .css setting for this layerlist theme in the application.

Open the file under your project name: something may like this path:

/wwwroot/arcgis-web-appbuilder-1.2/apps/5/theme/LaunchpadTheme/stylee/default/css/jimu-theme.css

Under

/* css for jimu-panel- */
.jimu-on-screen-widget-panel,
.jimu-panel {

you need to change by adding this lines:

margin-top: 270px;

Also, please take a look about this documentation to get familiar about the architecture of the Web App Builder

Development overview—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Hope this helps

Re: Layer List auto start location change

LeoLadefian4 — Thu, 03 Sep 2015 17:21:03 GMT

Thanks, I was looking under the config.json for the widget layerlist. wrong spot i suppose.

Re: Layer List auto start location change

RobertScheitlin__GISP — Thu, 03 Sep 2015 17:30:06 GMT

Leo,

You are correct, the config.json will not help in this case as the widgets position is calculated in the code at runtime and is not stored in the config.json.

Re: Layer List auto start location change

LeoLadefian4 — Thu, 03 Sep 2015 17:42:05 GMT

This is what I'm looking at in the code, a little different than what you show.

_setPositionStyle: function(a) {

var b;

this.position.zIndex && (a.zIndex = this.position.zIndex);

this.position.left = a.left;

this.position.top =

a.top;

this.position.width = a.width;

this.position.height = a.height;

b = h.getPositionStyle(a);

e.mixin(b, a.borderRadiusStyle);

c.set(this.domNode, b)

onWindowResize: function() {

var a, b = {};

window.appInfo.isRunInMobile ? (a = "map" === this.position.relativeTo ? this.map.id : window.jimuConfig.layoutId, a = f.getMarginBox(a), b.left = 0, b.top = 0, b.width = a.w, b.height = a.h, b.zIndex = this.position.zIndex) : (b = e.clone(this.position), "minimized" === this.windowState && (b.height = this.titleHeight));

b = h.getPositionStyle(b);

b.position = "absolute";

"auto" === b.zIndex && (b.zIndex = 0);

c.set(this.domNode, b);

this._onResponsible()

setPosition: function(a, b) {

var d, g, k;

b || (b = "map" === a.relativeTo ? this.map.id : window.jimuConfig.layoutId);

d = f.getMarginBox(b);

k = Math.floor(d.w / (a.width + a.margin));

g = Math.floor(a.index / k);

a.left = (g + 1) * a.margin + a.index % k * (a.width + a.margin);

a.top -= a.margin * g;

this.position = e.clone(a);

window.appInfo.isRunInMobile && (a.left = 0, a.top = 0, a.width = d.w, a.height = d.h);

d = h.getPositionStyle(a);

d.position = "absolute";

"auto" === d.zIndex && (d.zIndex =

0);

p.place(this.domNode, b);

c.set(this.domNode, d);

this._onResponsible()

Re: Layer List auto start location change

RobertScheitlin__GISP — Sun, 12 Dec 2021 01:26:26 GMT

Leo,

It looks like you are working with the minified code. That is not a problem. Here is the change for that version (line 8):

       setPosition: function(a, b) {
            var d, g, k;
            b || (b = "map" === a.relativeTo ? this.map.id : window.jimuConfig.layoutId);
            d = f.getMarginBox(b);
            k = Math.floor(d.w / (a.width + a.margin));
            g = Math.floor(a.index / k);
            a.left = (g + 1) * a.margin + a.index % k * (a.width + a.margin);
            a.left += 50;
            a.top -= a.margin * g;
            this.position = e.clone(a);
            window.appInfo.isRunInMobile && (a.left = 0, a.top = 0, a.width = d.w, a.height = d.h);
            d = h.getPositionStyle(a);
            d.position = "absolute";
            "auto" === d.zIndex && (d.zIndex =
                0);
            p.place(this.domNode, b);
            c.set(this.domNode, d);
            this._onResponsible()
        },

Re: Layer List auto start location change

LeoLadefian4 — Thu, 03 Sep 2015 18:54:42 GMT

Thanks so much, that worked great, and seems to take effect for all pop-up windows for that location. My only other question is I've imported an app from my account to the developer console, but the changes don't take place in the app I've imported. What's the procedure for editing an imported app? downloading, unzipping and re uploading gives me and invalid app error.

Re: Layer List auto start location change

RobertScheitlin__GISP — Thu, 03 Sep 2015 19:04:30 GMT

Leo,

Change to code like this will only work if you are hosting the editied code base on your own web server. You can not get these changes back up into AGOL version of WAB.

Re: Layer List auto start location change

IslamSaeed1 — Wed, 18 Sep 2019 16:05:55 GMT

Hello Robert,

Actually i am having a similar inquiry , i want the widget to open on the right side of the screen but when searching the mentioned block of code i didn't find that exact section, i am attaching my panel.js file for your reference

Re: Layer List auto start location change

RobertScheitlin__GISP — Wed, 18 Sep 2019 16:12:19 GMT

Islam,

You are going to have a really hard time trying to make any code changes to a minified/uglified code like that. This is why you should be using WAB Developer version.

Re: Layer List auto start location change

IslamSaeed1 — Wed, 18 Sep 2019 16:20:43 GMT

I am using the portal for arcgis 10.6.1 out of the box WAB so there is no way to tweak this ?

Re: Layer List auto start location change

RobertScheitlin__GISP — Wed, 18 Sep 2019 16:27:00 GMT

It's not impossible just extremely difficult.