Onscreen Widget Customization for Cellular

3726
34
Jump to solution
10-03-2017 10:23 AM
BrandonPrice
Occasional Contributor

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...‌, https://community.esri.com/community/gis/web-gis/web-appbuilder‌, /blogs/myAlaskaGIS/2016/03/09/web-appbuilder-developer-edition-customization-resource-list

34 Replies
BrandonPrice
Occasional Contributor

Hi Robert,

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

-Brandon

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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)?

BrandonPrice
Occasional Contributor

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

0 Kudos
DavidTreering2
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

David,

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

DavidTreering2
New Contributor III

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?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

David,

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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;
  };
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
DavidTreering2
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

David,

   It is the jimu.js\utils.js

0 Kudos