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
Solved! Go to Solution.
Hi Robert,
By the way. This change to the mobile display isn't necessary. Just would be nice cosmetically.
-Brandon
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)?
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
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
},
David,
You just need to delete the AT widget from the mobile layout (delete all you have above).
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?
David,
OK I have done some testing and this seems to not be working anymore. So should file a bug with esri tech support.
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;
};
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
David,
It is the jimu.js\utils.js