Clarification on mobileLayout

379
2
Jump to solution
04-16-2019 06:55 AM
FranklinAlexander
Occasional Contributor III

I know I have asked a similar question, and have read numerous posts on this subject, but I am still confused about how the mobileLayout section in the main app config is supposed to work. To my understanding, any widget or map configurations in the mobileLayout section should kick in when the app is run in mobile. I have viewed the Config Manager and jimu utilities where this behavior appears to be defined, but when I try and make a change in a configuration in the mobileLayout section, it always appears to be ignored. I usually end up giving up and modifying the javascript in some file to force the desired behavior. In this case I do not want the legend to openAtStart in mobile config, but just setting this to false in the mobileLayout does not work (it still opens). I would also like to set a new map extent in mobile, but no luck there either. It would be really nice if I could get this to work since I run in to this a lot and it would save a lot of time. Here is my entire main config:

{
  "theme": {
    "name": "FWRITheme",
    "styles": [
      "green",
      "default",
      "yellow",
      "black",
      "blue"
    ],
    "version": "2.10",
    "sharedTheme": {
      "isPortalSupport": true,
      "useHeader": false,
      "useLogo": false
    }
  },
  "portalUrl": "https://myfwc.maps.arcgis.com",
  "appId": "",
  "authorizedCrossOriginDomains": [],
  "title": "FWC Fish Stocking Locator",
  "subtitle": "Fish and Wildlife Conservation Commission",
  "keepAppState": false,
  "logo": "images/logo.png",
  "geometryService": "https://utility.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer",
  "links": [],
  "widgetOnScreen": {
    "widgets": [
      {
        "uri": "themes/FWRITheme/widgets/HeaderController/Widget",
        "position": {
          "left": 0,
          "top": 0,
          "right": 0,
          "height": 40,
          "relativeTo": "browser"
        },
        "version": "2.10",
        "id": "themes_FWRITheme_widgets_HeaderController_Widget_20",
        "name": "HeaderController"
      },
      {
        "uri": "widgets/Scalebar/Widget",
        "position": {
          "left": 7,
          "bottom": 25,
          "relativeTo": "map"
        },
        "version": "2.10",
        "id": "widgets_Scalebar_Widget_21",
        "name": "Scalebar"
      },
      {
        "uri": "widgets/Search/Widget",
        "position": {
          "left": 55,
          "top": 5,
          "relativeTo": "map"
        },
        "version": "2.10",
        "id": "widgets_Search_Widget_22",
        "name": "Search"
      },
      {
        "uri": "widgets/Coordinate/Widget",
        "position": {
          "left": 7,
          "bottom": 5,
          "relativeTo": "map"
        },
        "version": "2.10",
        "id": "widgets_Coordinate_Widget_23",
        "name": "Coordinate"
      },
      {
        "position": {
          "left": 55,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 1,
        "id": "_27",
        "name": "SearchStockedFish",
        "label": "Search Stocked Fish",
        "version": "2.10",
        "closeable": true,
        "uri": "widgets/SearchStockedFish/Widget",
        "config": "configs/SearchStockedFish/config__27.json",
        "openAtStart": true
      },
      {
        "position": {
          "left": 105,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 1,
        "id": "_28",
        "name": "WaterbodySearch",
        "label": "Search for Waterbodies",
        "version": "2.9",
        "closeable": true,
        "uri": "widgets/WaterbodySearch/Widget",
        "config": "configs/WaterbodySearch/config__28.json",
        "icon": "configs\\WaterbodySearch\\icon__28.png"
      },
      {
        "position": {
          "left": 155,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 1,
        "id": "_26",
        "name": "Identify",
        "version": "2.9.0.1",
        "uri": "widgets/Identify/Widget",
        "closeable": true,
        "IsController": false,
        "config": "configs/Identify/config__26.json"
      },
      {
        "position": {
          "left": 205,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 1,
        "id": "_24",
        "name": "Print",
        "version": "2.10",
        "closeable": true,
        "uri": "widgets/Print/Widget",
        "config": "configs/Print/config__24.json"
      },
      {
        "position": {
          "left": 255,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 1,
        "id": "_25",
        "version": "2.5",
        "closeable": true,
        "uri": "widgets/eBookmark/Widget",
        "name": "eBookmark",
        "IsController": false,
        "config": "configs/eBookmark/config__25.json"
      },
      {
        "uri": "widgets/OverviewMap/Widget",
        "position": {
          "right": 0,
          "bottom": 0,
          "zIndex": 1,
          "relativeTo": "map"
        },
        "version": "2.10",
        "id": "widgets_OverviewMap_Widget_29",
        "name": "OverviewMap"
      },
      {
        "uri": "widgets/HomeButton/Widget",
        "position": {
          "left": 7,
          "top": 75,
          "relativeTo": "map"
        },
        "version": "2.10",
        "id": "widgets_HomeButton_Widget_30",
        "name": "HomeButton"
      },
      {
        "uri": "widgets/MyLocation/Widget",
        "position": {
          "left": 7,
          "top": 150,
          "relativeTo": "map"
        },
        "version": "2.10",
        "visible": false,
        "id": "widgets_MyLocation_Widget_31",
        "name": "MyLocation"
      },
      {
        "uri": "widgets/AttributeTable/Widget",
        "visible": false,
        "version": "2.10",
        "position": {
          "relativeTo": "browser"
        },
        "id": "widgets_AttributeTable_Widget_32",
        "name": "AttributeTable"
      },
      {
        "uri": "widgets/Splash/Widget",
        "visible": false,
        "position": {
          "relativeTo": "browser"
        },
        "version": "2.10",
        "id": "widgets_Splash_Widget_33",
        "name": "Splash"
      },
      {
        "uri": "widgets/ZoomSlider/Widget",
        "position": {
          "top": 5,
          "left": 7,
          "relativeTo": "map"
        },
        "version": "2.10",
        "id": "widgets_ZoomSlider_Widget_34",
        "name": "ZoomSlider"
      },
      {
        "uri": "widgets/ExtentNavigate/Widget",
        "visible": false,
        "position": {
          "top": 190,
          "left": 7,
          "relativeTo": "map"
        },
        "version": "2.10",
        "id": "widgets_ExtentNavigate_Widget_35",
        "name": "ExtentNavigate"
      },
      {
        "uri": "widgets/FullScreen/Widget",
        "visible": true,
        "position": {
          "top": 110,
          "left": 7,
          "relativeTo": "map"
        },
        "version": "2.10",
        "id": "widgets_FullScreen_Widget_36",
        "name": "FullScreen"
      },
      {
        "uri": "widgets/FWRISplash/Widget",
        "positionRelativeTo": "browser",
        "id": "widgets_FWRISplash_Widget_37",
        "name": "FWRISplash",
        "version": "0.0.1",
        "position": {
          "relativeTo": "browser"
        },
        "config": "configs/FWRISplash/config__38.json"
      },
      {
        "uri": "widgets/FWRIViewSettings/Widget",
        "positionRelativeTo": "browser",
        "id": "widgets_FWRIViewSettings_Widget_38",
        "name": "FWRIViewSettings",
        "version": "0.0.1",
        "position": {
          "relativeTo": "browser"
        }
      },
      {
        "uri": "widgets/LocalLayer/Widget",
        "positionRelativeTo": "browser",
        "id": "widgets_LocalLayer_Widget_39",
        "name": "LocalLayer",
        "version": "2.0",
        "position": {
          "relativeTo": "browser"
        },
        "config": "configs/LocalLayer/config_widgets_LocalLayer_Widget_39.json"
      }
    ],
    "panel": {
      "uri": "jimu/OnScreenWidgetPanel",
      "position": {
        "relativeTo": "map"
      }
    }
  },
  "map": {
    "3D": false,
    "2D": true,
    "position": {
      "left": 0,
      "top": 40,
      "right": 0,
      "bottom": 0
    },
    "itemId": "3dbbb8f6d83c481381decdb150963858",
    "mapOptions": {
      "extent": {                       //I want to change this extent in mobile
        "xmin": -10223667.439313974,
        "ymin": 2732381.698461617,
        "xmax": -8364718.911418981,
        "ymax": 3745019.449183363,
        "spatialReference": {
          "wkid": 102100
        }
      }
    },
    "id": "map",
    "portalUrl": "https://myfwc.maps.arcgis.com",
    "mapRefreshInterval": {
      "useWebMapRefreshInterval": true
    }
  },
  "widgetPool": {
    "panel": {
      "uri": "themes/FWRITheme/panels/FoldablePanel/Panel",
      "position": {
        "top": 5,
        "right": 5,
        "bottom": 5,
        "zIndex": 5,
        "relativeTo": "map"
      }
    },
    "widgets": [
      {
        "uri": "widgets/Legend/Widget",  
        "visible": true,
        "version": "2.10",
        "id": "widgets_Legend_Widget_18",
        "name": "Legend",
        "openAtStart": true,  // I do not want this to open at start in mobile
        "index": 2
      },
      {
        "uri": "widgets/LayerList/Widget",
        "version": "2.10",
        "id": "widgets_LayerList_Widget_19",
        "name": "LayerList",
        "index": 3,
        "config": "configs/LayerList/config_widgets_LayerList_Widget_19.json",
        "openAtStart": false
      },
      {
        "name": "eDraw",
        "label": "Draw and Measure",
        "version": "2.8.1",
        "visible": false,
        "uri": "widgets/eDraw/Widget",
        "config": "configs/eDraw/config_widgets_eDraw_Widget_40.json",
        "index": 5,
        "id": "widgets_eDraw_Widget_40"
      },
      {
        "name": "HelpfulLinks",
        "version": "2.10",
        "uri": "widgets/HelpfulLinks/Widget",
        "config": "configs/HelpfulLinks/config_widgets_Links_Widget_41.json",
        "index": 6,
        "id": "widgets_HelpfulLinks_Widget_41"
      }
    ],
    "groups": []
  },
  "mobileLayout": {
    "widgetOnScreen": {
      "widgets": [
        {
          "uri": "themes/FWRITheme/widgets/HeaderController/Widget",
          "position": {
            "left": 0,
            "top": 0,
            "right": 0,
            "height": 40,
            "relativeTo": "browser"
          },
          "version": "2.10"
        },
        {
          "uri": "widgets/Scalebar/Widget",
          "position": {
            "left": 7,
            "bottom": 40,
            "relativeTo": "map"
          },
          "version": "2.10"
        },
        {
          "uri": "widgets/Search/Widget",
          "position": {
            "left": 55,
            "top": 5
          },
          "version": "2.10"
        },
        {
          "uri": "widgets/Coordinate/Widget",
          "position": {
            "left": 7,
            "bottom": 17,
            "relativeTo": "map"
          },
          "version": "2.10"
        },
        {
          "position": {
            "left": 55,
            "top": 45
          }
        },
        {
          "position": {
            "left": 105,
            "top": 45
          }
        },
        {
          "position": {
            "left": 155,
            "top": 45
          }
        },
        {
          "position": {
            "left": 205,
            "top": 45
          }
        },
        {
          "position": {
            "left": 255,
            "top": 45
          }
        },
        {
          "uri": "widgets/OverviewMap/Widget",
          "position": {
            "right": 0,
            "bottom": 0,
            "zIndex": 1
          },
          "version": "2.10"
        },
        {
          "uri": "widgets/HomeButton/Widget",
          "inPanel": false,
          "position": {
            "left": 7,
            "top": 75
          },
          "version": "2.10"
        },
        {
          "uri": "widgets/MyLocation/Widget",
          "inPanel": false,
          "position": {
            "left": 7,
            "top": 110
          },
          "version": "2.10"
        },
        {
          "uri": "widgets/AttributeTable/Widget",
          "version": "2.10",
          "visible": false,
          "position": {
            "relativeTo": "browser"
          }
        },
        {
          "uri": "widgets/Splash/Widget",
          "visible": false,
          "position": {
            "relativeTo": "browser"
          },
          "version": "2.10"
        },
        {
          "uri": "widgets/ZoomSlider/Widget",
          "visible": true,
          "position": {
            "top": 5,
            "left": 7
          },
          "version": "2.10"
        },
        {
          "uri": "widgets/ExtentNavigate/Widget",
          "visible": false,
          "position": {
            "top": 190,
            "left": 7
          },
          "version": "2.10"
        },
        {
          "uri": "widgets/FullScreen/Widget",
          "visible": false,
          "position": {
            "top": 150,
            "left": 7
          },
          "version": "2.10"
        },
        {
          "uri": "widgets/FWRISplash/Widget",
          "positionRelativeTo": "browser"
        },
        {
          "uri": "widgets/FWRIViewSettings/Widget",
          "positionRelativeTo": "browser"
        },
        {
          "uri": "widgets/LocalLayer/Widget",
          "positionRelativeTo": "browser"
        }
      ]
    },
    "map": {
      "position": {
        "left": 0,
        "top": 40,
        "right": 0,
        "bottom": 0
      },
      "mapOptions": {
        "extent": {
          "xmin": -97,  // change does not take effect
          "ymin": 27,
          "xmax": -88,
          "ymax": 36,
          "spatialReference": {
            "wkid": 102100
          }
        }
      }
    },
    "widgetPool": {
      "panel": {
        "uri": "themes/FWRITheme/panels/FoldablePanel/Panel",
        "position": {
          "top": 5,
          "right": 5,
          "bottom": 5,
          "zIndex": 5
        }
      },
      "widgets": [
        {
          "uri": "widgets/Legend/Widget",
          "visible": false,
          "version": "2.10",
          "id": "widgets_Legend_Widget_18",
          "name": "Legend",
          "openAtStart": false,  // opens anyway
          "index": 1
        }
      ]
    }
  },
  "loadingPage": {
    "backgroundColor": "#508dca",
    "backgroundImage": {
      "visible": false
    },
    "loadingGif": {
      "visible": true,
      "uri": "configs/loading/images/predefined_loading_1.gif",
      "width": 58,
      "height": 29
    }
  },
  "wabVersion": "2.10",
  "isTemplateApp": true,
  "isWebTier": false,
  "httpProxy": {
    "useProxy": true,
    "alwaysUseProxy": false,
    "url": "",
    "rules": []
  },
  "dataSource": {
    "dataSources": {
      "widget~_27~0": {
        "id": "widget~_27~0",
        "type": "Features",
        "label": "Find Stocked Fish",
        "dataSchema": {
          "geometryType": "esriGeometryPoint",
          "fields": [
            {
              "name": "OBJECTID",
              "type": "esriFieldTypeOID",
              "alias": "OBJECTID",
              "domain": null
            },
            {
              "name": "Shape",
              "type": "esriFieldTypeGeometry",
              "alias": "Shape",
              "domain": null
            },
            {
              "name": "COUNTY",
              "type": "esriFieldTypeString",
              "alias": "COUNTY",
              "length": 254,
              "domain": null
            },
            {
              "name": "WATERBODY",
              "type": "esriFieldTypeString",
              "alias": "WATERBODY",
              "length": 254,
              "domain": null
            },
            {
              "name": "FISH_STOCK",
              "type": "esriFieldTypeDouble",
              "alias": "FISH_STOCK",
              "domain": null
            },
            {
              "name": "SPECIES",
              "type": "esriFieldTypeString",
              "alias": "SPECIES",
              "length": 254,
              "domain": null
            },
            {
              "name": "SIZE",
              "type": "esriFieldTypeString",
              "alias": "SIZE",
              "length": 254,
              "domain": null
            },
            {
              "name": "PHASE",
              "type": "esriFieldTypeString",
              "alias": "PHASE",
              "length": 254,
              "domain": null
            },
            {
              "name": "LONG",
              "type": "esriFieldTypeDouble",
              "alias": "LONG",
              "domain": null
            },
            {
              "name": "LAT",
              "type": "esriFieldTypeDouble",
              "alias": "LAT",
              "domain": null
            },
            {
              "name": "Year",
              "type": "esriFieldTypeString",
              "alias": "Year",
              "length": 10,
              "domain": null
            },
            {
              "name": "created_user",
              "type": "esriFieldTypeString",
              "alias": "created_user",
              "length": 255,
              "domain": null
            },
            {
              "name": "created_date",
              "type": "esriFieldTypeDate",
              "alias": "created_date",
              "length": 8,
              "domain": null
            },
            {
              "name": "last_edited_user",
              "type": "esriFieldTypeString",
              "alias": "last_edited_user",
              "length": 255,
              "domain": null
            },
            {
              "name": "last_edited_date",
              "type": "esriFieldTypeDate",
              "alias": "last_edited_date",
              "length": 8,
              "domain": null
            }
          ],
          "displayField": "COUNTY",
          "objectIdField": {
            "name": "OBJECTID",
            "type": "esriFieldTypeOID",
            "alias": "OBJECTID",
            "domain": null
          },
          "typeIdField": null
        }
      },
      "widget~_27~1": {
        "id": "widget~_27~1",
        "type": "Features",
        "label": "Find a Waterbody",
        "dataSchema": {
          "geometryType": "esriGeometryPoint",
          "fields": [
            {
              "name": "OBJECTID",
              "type": "esriFieldTypeOID",
              "alias": "OBJECTID",
              "domain": null
            },
            {
              "name": "FEATURE_ID",
              "type": "esriFieldTypeDouble",
              "alias": "GNIS ID",
              "domain": null
            },
            {
              "name": "FEATURE_NA",
              "type": "esriFieldTypeString",
              "alias": "Name",
              "length": 254,
              "domain": null
            },
            {
              "name": "COUNTY_NUM",
              "type": "esriFieldTypeDouble",
              "alias": "County FIPS Code",
              "domain": null
            },
            {
              "name": "PRIMARY_LA",
              "type": "esriFieldTypeString",
              "alias": "Latitude (DMS)",
              "length": 254,
              "domain": null
            },
            {
              "name": "SOURCE_LAT",
              "type": "esriFieldTypeString",
              "alias": "Source Latitude (DMS)",
              "length": 254,
              "domain": null
            },
            {
              "name": "SOURCE_LON",
              "type": "esriFieldTypeString",
              "alias": "Source Longitude (DMS)",
              "length": 254,
              "domain": null
            },
            {
              "name": "SOURCE_L_1",
              "type": "esriFieldTypeDouble",
              "alias": "Source Latitude",
              "domain": null
            },
            {
              "name": "SOURCE_L_2",
              "type": "esriFieldTypeDouble",
              "alias": "Source Longitude",
              "domain": null
            },
            {
              "name": "MAP_NAME",
              "type": "esriFieldTypeString",
              "alias": "USGS Quad Name",
              "length": 254,
              "domain": null
            },
            {
              "name": "Shape",
              "type": "esriFieldTypeGeometry",
              "alias": "Shape",
              "domain": null
            },
            {
              "name": "FEATURE_CL",
              "type": "esriFieldTypeString",
              "alias": "FEATURE_CL",
              "length": 254,
              "domain": null
            },
            {
              "name": "STATE_ALPH",
              "type": "esriFieldTypeString",
              "alias": "STATE_ALPH",
              "length": 254,
              "domain": null
            },
            {
              "name": "STATE_NUME",
              "type": "esriFieldTypeDouble",
              "alias": "STATE_NUME",
              "domain": null
            },
            {
              "name": "COUNTY_NAM",
              "type": "esriFieldTypeString",
              "alias": "COUNTY_NAM",
              "length": 254,
              "domain": null
            },
            {
              "name": "PRIM_LONG_",
              "type": "esriFieldTypeString",
              "alias": "PRIM_LONG_",
              "length": 254,
              "domain": null
            },
            {
              "name": "PRIM_LAT_D",
              "type": "esriFieldTypeDouble",
              "alias": "PRIM_LAT_D",
              "domain": null
            },
            {
              "name": "PRIM_LONG1",
              "type": "esriFieldTypeDouble",
              "alias": "PRIM_LONG1",
              "domain": null
            },
            {
              "name": "ELEV_IN_M",
              "type": "esriFieldTypeDouble",
              "alias": "ELEV_IN_M",
              "domain": null
            },
            {
              "name": "ELEV_IN_FT",
              "type": "esriFieldTypeDouble",
              "alias": "ELEV_IN_FT",
              "domain": null
            },
            {
              "name": "DATE_CREAT",
              "type": "esriFieldTypeDate",
              "alias": "DATE_CREAT",
              "length": 8,
              "domain": null
            },
            {
              "name": "DATE_EDITE",
              "type": "esriFieldTypeString",
              "alias": "DATE_EDITE",
              "length": 254,
              "domain": null
            },
            {
              "name": "created_user",
              "type": "esriFieldTypeString",
              "alias": "created_user",
              "length": 255,
              "domain": null
            },
            {
              "name": "created_date",
              "type": "esriFieldTypeDate",
              "alias": "created_date",
              "length": 8,
              "domain": null
            },
            {
              "name": "last_edited_user",
              "type": "esriFieldTypeString",
              "alias": "last_edited_user",
              "length": 255,
              "domain": null
            },
            {
              "name": "last_edited_date",
              "type": "esriFieldTypeDate",
              "alias": "last_edited_date",
              "length": 8,
              "domain": null
            }
          ],
          "displayField": "MAP_NAME",
          "objectIdField": {
            "name": "OBJECTID",
            "type": "esriFieldTypeOID",
            "alias": "OBJECTID",
            "domain": null
          },
          "typeIdField": null
        }
      }
    },
    "settings": {}
  },
  "logoLink": "http://"
}

 Thanks!!

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Franklin,

  There is not very many parameters that are used in the standard config that are also used in the mobilelayout. So you have to look in the utils.js the only thing that it takes from the mobileLayout concerning the map is the maps position (it ignores the extent). Your legend widget is in the widgetPool and the only thing that the utils.js has code to care about for the widgetPool is the widgetPool.panel it does nothing with any of the info about the widgets them self. So the only way you are going to get utils.js to care about the things you want to change in mobileLayout is to add your own code. for example:

    if(config2.widgetPool && config2.widgetPool.widgets){
      mixinConfig.widgetPool.widgets = config2.widgetPool.widgets;
    }‍‍‍‍‍‍

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

Franklin,

  There is not very many parameters that are used in the standard config that are also used in the mobilelayout. So you have to look in the utils.js the only thing that it takes from the mobileLayout concerning the map is the maps position (it ignores the extent). Your legend widget is in the widgetPool and the only thing that the utils.js has code to care about for the widgetPool is the widgetPool.panel it does nothing with any of the info about the widgets them self. So the only way you are going to get utils.js to care about the things you want to change in mobileLayout is to add your own code. for example:

    if(config2.widgetPool && config2.widgetPool.widgets){
      mixinConfig.widgetPool.widgets = config2.widgetPool.widgets;
    }‍‍‍‍‍‍
FranklinAlexander
Occasional Contributor III

Thank you Robert, that will help greatly in the future!! So I can change the mobileLayout, and then tell the util.js file to Look Here!!! That should be a lot easier in most cases than searching through all of the files to try and find the best place to drop some custom code. Probably safer too, as sometimes that can have unintended consequences. For instance to stop the legend from opening in mobile mode, I had to edit the configManager.js file by dropping in:

this.appConfig.widgetPool.widgets[0].openAtStart = false;

under an existing conditional. It is working, but some of the files in the jimu.js folder give me a little pause when I think about modifying them! 

Thanks again

0 Kudos