topic Re: Onscreen Widget Customization for Cellular in Web AppBuilder Custom Widgets Questions

Onscreen Widget Customization for Cellular

BrandonPrice — Tue, 03 Oct 2017 17:23:40 GMT

Hello,

I would like to change the onscreen widgets for the mobile only. The desktop version has a bookmark and a near me widget. I would like to remove the near me entirely and then reduce the icon size and placement of the bookmark widget. I am using the tabbed theme. Is this easy to do?

Thanks,
Brandon

https://community.esri.com/groups/web-appbuilder-custom-themes?sr=search&searchId=bf141f67-89d3-4e25-852d-225001a8626b&searchIndex=1‌, https://community.esri.com/community/gis/web-gis/web-appbuilder‌, /blogs/myAlaskaGIS/2016/03/09/web-appbuilder-developer-edition-customization-resource-list‌

Re: Onscreen Widget Customization for Cellular

BrandonPrice — Tue, 03 Oct 2017 17:34:53 GMT

I also forgot to add that the desktop version has the bookmark widget openAtStart. Is that possible to take off for the mobile?

Re: Onscreen Widget Customization for Cellular

RobertScheitlin__GISP — Tue, 03 Oct 2017 18:16:39 GMT

Brandon,

In the apps main config.json there is a mobileLayout object which allows you to change the widgets visible when in mobile and there properties like openAtStart

Re: Onscreen Widget Customization for Cellular

BrandonPrice — Tue, 03 Oct 2017 18:22:46 GMT

That’s what I went to before I posted this question. The placeholders stayed the same. Is it suppose to work?

Re: Onscreen Widget Customization for Cellular

RobertScheitlin__GISP — Tue, 03 Oct 2017 18:25:02 GMT

It does work. I use this all the time.

Re: Onscreen Widget Customization for Cellular

BrandonPrice — Tue, 03 Oct 2017 19:47:59 GMT

I believe the problem was that I added the widgets manually after the script was downloaded. Do you know a proper procedure for this? I stuck the downloaded widget folders in the configs and widgets folders and then it reflected okay in the desktop but not for the mobile.

Re: Onscreen Widget Customization for Cellular

RobertScheitlin__GISP — Tue, 03 Oct 2017 20:56:31 GMT

Hmm.. I have not been down that road before. Is the widget listed in the mobilelayout portion of the config.json?

Re: Onscreen Widget Customization for Cellular

BrandonPrice — Tue, 03 Oct 2017 21:05:59 GMT

What looks like the placeholders for the onscreen widgets in the mobile part of the config.json have no name. Is this the way it’s suppose to be? I have attached both the mobile and desktop parts of the config.json.

Re: Onscreen Widget Customization for Cellular

RobertScheitlin__GISP — Tue, 03 Oct 2017 21:13:24 GMT

Brandon,

Unless you made some code changes to the app after you downloaded it to the web server it would be much easier to do all your configuration in WAB and download it again to your web server.

Re: Onscreen Widget Customization for Cellular

BrandonPrice — Tue, 03 Oct 2017 22:33:35 GMT

Hi Robert,

Unfortunately that is the case. I haven’t found anything yet. The desktop version works properly after I manually added the widgets. The mobile ones work ok but I can’t customize them like the desktop one.

Brandon

Re: Onscreen Widget Customization for Cellular

BrandonPrice — Wed, 04 Oct 2017 00:19:11 GMT

Hi Robert,

By the way. This change to the mobile display isn't necessary. Just would be nice cosmetically.

-Brandon

Re: Onscreen Widget Customization for Cellular

RobertScheitlin__GISP — Wed, 04 Oct 2017 12:43:12 GMT

Brandon,

I would like to remove the near me entirely

So do you see the near me widget listed in the mobileLayout > widgetOnScreen section of the main config (your images do not show enough info)?

Re: Onscreen Widget Customization for Cellular

BrandonPrice — Wed, 04 Oct 2017 19:51:03 GMT

Hi Robert,

No I do not see it. It is only in the regular version. The mobile has a placeholder that is blank that looks like maybe the nearme should be.

-Brandon

Re: Onscreen Widget Customization for Cellular

DavidTreering2 — Thu, 30 Nov 2017 16:41:06 GMT

Robert,

I'm having the same problem and have tried modifying the mobileLayout > widgetOnScreen section of the main config file with no luck. Any hints?

{
"uri": "widgets/AttributeTable/Widget",
"version": "2.6",

"openAtStart": false,

"initiallyExpand": false,

"visible": false,
"position": {
"left": 10,
"bottom": 70,
"relativeTo": "map"
},
"closeable": true
},

Re: Onscreen Widget Customization for Cellular

RobertScheitlin__GISP — Thu, 30 Nov 2017 20:09:24 GMT

David,

You just need to delete the AT widget from the mobile layout (delete all you have above).

Re: Onscreen Widget Customization for Cellular

DavidTreering2 — Thu, 07 Dec 2017 22:06:12 GMT

Thank you, Robert, but I am not able to remove the Attribute Table at start (nor the Scalebar, tried as a test) by removing the item from the mobileLayout > widgetOnScreen section. This is in production, and does not reflect the test/dev code edits, but may help give you an idea of what the app does.

https://maps.cookcountyil.gov/medexammaps/

When I edit the main widgetOnScreen section, I can keep the AT from opening by setting "openAtStart": false, so I know I'm in the right place in the main config.json file. Any other ideas?

Re: Onscreen Widget Customization for Cellular

RobertScheitlin__GISP — Fri, 08 Dec 2017 15:48:13 GMT

David,

OK I have done some testing and this seems to not be working anymore. So should file a bug with esri tech support.

Re: Onscreen Widget Customization for Cellular

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:15:17 GMT

All,

OK I have done some debugging and the only properties that get used from the mobileLayout are the widgets position, the maps position and a panel position. The visible property is not used (which is ridiculous).

Here is one of my sites showing that the AT Widget and ScaleBar widget have been hidden in mobile but not Desktop: ArcGIS Web Application

Here is the change that needs to be made for the visible property to be used.

jimu.js\utils.js:

  /*
  Mixin config2 to config1, return the mixed object, but do not modify config1.
  What to mixin:
    replace widget's position, group's panel position, map's position.
  */
  mo.mixinAppConfigPosition = function(config1, config2){
    var mixinConfig = lang.clone(config1);
    if(!config2){
      return mixinConfig;
    }
    config2 = lang.clone(config2);
    var os1 = mixinConfig.widgetOnScreen;
    var os2 = config2.widgetOnScreen;
    if(os2 && os2.widgets){
      if(Object.prototype.toString.call(os2.widgets) ===
        '[object Object]'){

        array.forEach(os1.widgets, function(widget1, i){
          var k;
          if(widget1.uri){
            k = widget1.uri;
          }else{
            k = 'ph_' + i;
          }

          if(os2.widgets[k] && os2.widgets[k].position){
            if(!os2.widgets[k].position.relativeTo){
              os2.widgets[k].position.relativeTo = 'map';
            }
            widget1.position = os2.widgets[k].position;
          }
        }, this);
      }else{
        array.forEach(os2.widgets, function(widget2, i){
          if(widget2.position && !widget2.position.relativeTo){
            widget2.position.relativeTo = 'map';
          }
          if(os1.widgets[i] && widget2.position){
            os1.widgets[i].position = widget2.position;
          }
          if(os1.widgets[i] && widget2.hasOwnProperty("visible")){
            os1.widgets[i].visible = widget2.visible;
          }
        });
      }
    }

    if(os2 && os2.groups){
      if(Object.prototype.toString.call(os2.groups) ===
        '[object Object]'){

        array.forEach(os1.groups, function(group1, i){
          var k;
          if(group1.label){
            k = group1.label;
          }else{
            k = 'g_' + i;
          }

          if(os2.groups[k] && os2.groups[k].panel && os2.groups[k].panel.position){
            if(!os2.groups[k].panel.position.relativeTo){
              os2.groups[k].panel.position.relativeTo = 'map';
            }
            group1.panel.position = os2.groups[k].panel.position;
          }
        }, this);
      }else{
        var managerName;
        if(config1.layoutDefinition){
          managerName = config1.layoutDefinition.manager;
        }else{
          managerName = 'jimu/layoutManagers/AbsolutePositionLayoutManager';
        }

        if(managerName === 'jimu/layoutManagers/AbsolutePositionLayoutManager'){
          array.forEach(os2.groups, function(group2, i){
            if(group2.panel && group2.panel.position &&
              !group2.panel.position.relativeTo){
              group2.panel.position.relativeTo = 'map';
            }
            if(os1.groups[i] && group2.panel && group2.panel.position){
              os1.groups[i].panel.position = group2.panel.position;
            }
          });
        }else if(managerName === 'jimu/layoutManagers/GridLayoutManager'){
          os1.groups = handleGridLayoutOnScreenGroupChange(os1.groups, os2.groups.map(function(g){
            return g.id;
          }));
        }
      }
    }

    if(config2.map && config2.map.position){
      if(mixinConfig.map){
        mixinConfig.map.position = config2.map.position;
      }else{
        mixinConfig.map = {position: config2.map.position};
      }
    }

    if(config2.widgetPool && config2.widgetPool.panel){
      if(config2.widgetPool.panel.position && !config2.widgetPool.panel.position.relativeTo){
        config2.widgetPool.panel.position.relativeTo = 'map';
      }
      mixinConfig.widgetPool.panel.position = config2.widgetPool.panel.position;
    }

    //mobileLayout is used to override it's main config, so replace totally
    if(config2.mobileLayout){
      mixinConfig.mobileLayout = config2.mobileLayout;
    }
    return mixinConfig;
  };
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Onscreen Widget Customization for Cellular

DavidTreering2 — Fri, 08 Dec 2017 18:53:20 GMT

You are a superstar! Thank you!

I don't have a util.js in jimujs folder. Did you mean to create a new one?

- David Treering, GISP

Re: Onscreen Widget Customization for Cellular

RobertScheitlin__GISP — Fri, 08 Dec 2017 18:54:41 GMT

David,

It is the jimu.js\utils.js