mobile friendly custom widget config

scottmiller10 — Mon, 11 Jun 2018 17:44:23 GMT

I'm trying to make a widget's config different for when the site is opened on a phone. I'm trying to do this within the apps main config.json file, but it's not taking my changes. I added the following lines to the bottom of the mobileLayout array.

{
"uri": "widgets/FindSchool/Widget",
"position": {
"left": 0,
"top": 30,
"right": 50,
"relativeTo": "map"
},
"version": "2.3"
}

Re: mobile friendly custom widget config

RobertScheitlin__GISP — Mon, 11 Jun 2018 18:19:45 GMT

Scott,

A widgets position in mobile is ultimately controlled by the panel that the widget resides in. So changing the left and right property will not make a difference if the widgets panel is making the widget panel 100% width.

Re: mobile friendly custom widget config

scottmiller10 — Mon, 11 Jun 2018 18:45:22 GMT

I want to make the widget open on 50% width and hug the left side of the screen, but I don't know what panel it's in.

{
"theme": {
"name": "LaunchpadTheme",
"styles": [
"default",
"style2",
"style3"
],
"version": "2.3"
},
"portalUrl": "http://udel.maps.arcgis.com",
"appId": "",
"authorizedCrossOriginDomains": [],
"title": "Attendance Zone Site",
"subtitle": "<div class=\"attribute-custom-style\"><b><font size=\"4\">Red Clay S.D.</font></b></div>",
"keepAppState": true,
"logo": "images/new.png",
"geometryService": "http://utility.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer",
"links": [
{
"label": "Help",
"url": "https://cadsrgis2.org/hurricane/help.pdf"
}
],
"widgetOnScreen": {
"widgets": [
{
"uri": "themes/LaunchpadTheme/widgets/AnchorBarController/Widget",
"position": {
"bottom": 10,
"height": 40,
"relativeTo": "map",
"zIndex": 0
},
"version": "2.3",
"id": "themes_LaunchpadTheme_widgets_AnchorBarController_Widget_19",
"name": "AnchorBarController",
"icon": "/webappbuilder/apps/25/themes/LaunchpadTheme/widgets/AnchorBarController/images/icon.png?wab_dv=2.4"
},
{
"uri": "themes/LaunchpadTheme/widgets/Header/Widget",
"position": {
"left": 15,
"top": 17,
"width": 670,
"height": 46,
"relativeTo": "map"
},
"version": "2.3",
"id": "themes_LaunchpadTheme_widgets_Header_Widget_20",
"name": "Header",
"icon": "/webappbuilder/apps/25/themes/LaunchpadTheme/widgets/Header/images/icon.png?wab_dv=2.4",
"config": null
},
{
"uri": "widgets/Search/Widget",
"position": {
"left": 350,
"top": 25,
"width": 300,
"zIndex": 1,
"relativeTo": "map"
},
"version": "2.3",
"id": "widgets_Search_Widget_21",
"name": "Search",
"icon": "/webappbuilder/apps/25/widgets/Search/images/icon.png?wab_dv=2.4",
"config": "configs/Search/config_Search.json"
},
{
"uri": "widgets/OverviewMap/Widget",
"position": {
"right": 20,
"top": 20,
"relativeTo": "map"
},
"version": "2.3",
"id": "widgets_OverviewMap_Widget_22",
"name": "OverviewMap",
"icon": "/webappbuilder/apps/25/widgets/OverviewMap/images/icon.png?wab_dv=2.4"
},
{
"uri": "widgets/ZoomSlider/Widget",
"position": {
"left": 25,
"top": 95,
"relativeTo": "map"
},
"version": "2.3",
"id": "widgets_ZoomSlider_Widget_23",
"name": "ZoomSlider",
"icon": "/webappbuilder/apps/25/widgets/ZoomSlider/images/icon.png?wab_dv=2.4"
},
{
"uri": "widgets/HomeButton/Widget",
"position": {
"left": 25,
"top": 175,
"relativeTo": "map"
},
"id": "widgets_HomeButton_Widget_24",
"name": "HomeButton",
"version": "2.3",
"icon": "/webappbuilder/apps/25/widgets/HomeButton/images/icon.png?wab_dv=2.4"
},
{
"uri": "widgets/MyLocation/Widget",
"position": {
"left": 25,
"top": 215,
"relativeTo": "map"
},
"version": "2.3",
"id": "widgets_MyLocation_Widget_25",
"name": "MyLocation",
"icon": "/webappbuilder/apps/25/widgets/MyLocation/images/icon.png?wab_dv=2.4"
},
{
"uri": "widgets/AttributeTable/Widget",
"version": "2.3",
"position": {
"right": 20,
"bottom": 80,
"relativeTo": "map"
},
"closeable": true,
"id": "widgets_AttributeTable_Widget_26",
"name": "AttributeTable",
"featureActions": [
{
"name": "ShowRelatedRecords",
"uri": "actions/ShowRelatedRecordsFeatureAction"
},
{
"name": "ViewInTable",
"uri": "actions/ViewInAttributeTableFeatureAction"
}
],
"icon": "/webappbuilder/apps/25/widgets/AttributeTable/images/icon.png?wab_dv=2.4"
},
{
"uri": "widgets/Coordinate/Widget",
"position": {
"left": 20,
"bottom": 60,
"relativeTo": "map"
},
"id": "widgets_Coordinate_Widget_27",
"name": "Coordinate",
"version": "2.3",
"icon": "/webappbuilder/apps/25/widgets/Coordinate/images/icon.png?wab_dv=2.4"
},
{
"uri": "widgets/Scalebar/Widget",
"position": {
"left": 27,
"bottom": 25,
"relativeTo": "map"
},
"version": "2.3",
"id": "widgets_Scalebar_Widget_28",
"name": "Scalebar",
"icon": "/webappbuilder/apps/25/widgets/Scalebar/images/icon.png?wab_dv=2.4"
},
{
"uri": "widgets/Splash/Widget",
"position": {
"relativeTo": "browser"
},
"version": "2.3",
"id": "widgets_Splash_Widget_29",
"name": "Splash",
"icon": "/webappbuilder/apps/25/widgets/Splash/images/icon.png?wab_dv=2.4",
"config": "configs/Splash/config_Splash.json"
},
{
"position": {
"right": 100,
"top": 20,
"relativeTo": "map"
},
"placeholderIndex": 1,
"id": "_30",
"version": "2.3",
"closeable": true,
"uri": ""
},
{
"position": {
"right": 150,
"top": 20,
"relativeTo": "map"
},
"placeholderIndex": 2,
"id": "_31"
},
{
"position": {
"right": 200,
"top": 20,
"relativeTo": "map"
},
"placeholderIndex": 3,
"id": "_32"
},
{
"uri": "widgets/ExtentNavigate/Widget",
"visible": false,
"position": {
"top": 255,
"left": 25,
"relativeTo": "map"
},
"version": "2.3",
"id": "widgets_ExtentNavigate_Widget_33",
"name": "ExtentNavigate",
"icon": "/webappbuilder/apps/25/widgets/ExtentNavigate/images/icon.png?wab_dv=2.4"
}
],
"panel": {
"uri": "jimu/OnScreenWidgetPanel",
"position": {
"relativeTo": "map"
}
}
},
"map": {
"3D": false,
"2D": true,
"position": {
"left": 0,
"top": 0,
"right": 0,
"bottom": 0
},
"itemId": "acb43de4039a4b70ba1d02ce9e29293e",
"mapOptions": {},
"id": "map",
"portalUrl": "http://udel.maps.arcgis.com"
},
"widgetPool": {
"panel": {
"uri": "themes/LaunchpadTheme/panels/LaunchpadPanel/Panel",
"position": {
"relativeTo": "map"
}
},
"widgets": [
{
"name": "FindSchool",
"uri": "widgets/FindSchool/Widget",
"config": "configs/FindSchool/config_FindSchool.json",
"index": 2,
"openAtStart": true,
"id": "widgets_FindSchool_Widget_47",
"version": "2.3"
}
],
"groups": []
},
"mobileLayout": {
"widgetOnScreen": {
"widgets": [
{
"uri": "themes/LaunchpadTheme/widgets/AnchorBarController/Widget",
"position": {
"bottom": 0,
"height": 40,
"width": "100%",
"zIndex": 0,
"relativeTo": "map"
},
"version": "2.3"
},
{
"uri": "themes/LaunchpadTheme/widgets/Header/Widget",
"position": {
"left": 0,
"right": 0,
"top": 0,
"height": 46,
"relativeTo": "map"
},
"version": "2.3"
},
{
"uri": "widgets/Search/Widget",
"position": {
"left": 10,
"top": 10,
"right": 10,
"zIndex": 0,
"relativeTo": "map"
},
"version": "2.3"
},
{
"uri": "widgets/OverviewMap/Widget",
"position": {
"right": 20,
"top": 20
},
"version": "2.3"
},
{
"uri": "widgets/ZoomSlider/Widget",
"position": {
"right": 10,
"bottom": 160,
"relativeTo": "map"
},
"version": "2.3"
},
{
"uri": "widgets/HomeButton/Widget",
"position": {
"right": 10,
"bottom": 75,
"relativeTo": "map"
}
},
{
"uri": "widgets/MyLocation/Widget",
"inPanel": false,
"position": {
"right": 10,
"bottom": 115,
"relativeTo": "map"
},
"version": "2.3"
},
{
"uri": "widgets/AttributeTable/Widget",
"version": "2.3",
"position": {
"left": 10,
"bottom": 70,
"relativeTo": "map"
},
"closeable": true
},
{
"uri": "widgets/Coordinate/Widget",
"position": {
"left": 20,
"bottom": 60
}
},
{
"uri": "widgets/Scalebar/Widget",
"position": {
"left": 50,
"bottom": 70,
"relativeTo": "map"
},
"version": "2.3"
},
{
"uri": "widgets/Splash/Widget",
"visible": false,
"position": {
"relativeTo": "browser"
},
"version": "2.3"
},

{
"position": {
"left": 10,
"bottom": 195,
"relativeTo": "map"
}
},
{
"position": {
"left": 10,
"bottom": 155,
"relativeTo": "map"
}
},
{
"position": {
"left": 10,
"bottom": 115,
"relativeTo": "map"
}
},
{
"uri": "widgets/ExtentNavigate/Widget",
"visible": false,
"position": {
"right": 10,
"bottom": 238,
"relativeTo": "map"
},
"version": "2.3"
}

]
},
"map": {
"position": {
"left": 0,
"top": 0,
"right": 0,
"bottom": 0
}
},
"widgetPool": {
"panel": {
"uri": "themes/LaunchpadTheme/panels/LaunchpadPanel/Panel",
"position": {

"top": 30,

"width": "50%",
"relativeTo": "map"
}

}
}
},
"loadingPage": {
"backgroundColor": "#508dca",
"backgroundImage": {
"visible": false
},
"loadingGif": {
"visible": true,
"uri": "/webappbuilder/apps/36/configs/loading/images/predefined_loading_1.gif",
"width": 58,
"height": 29
}
},
"wabVersion": "2.3",
"isTemplateApp": true,
"isWebTier": false,
"httpProxy": {
"useProxy": true,
"alwaysUseProxy": false,
"url": "",
"rules": []
}
}

Re: mobile friendly custom widget config

RobertScheitlin__GISP — Mon, 11 Jun 2018 19:59:51 GMT

Scott,

Your config file tells you that it is using the themes\LaunchpadTheme\panels\LaunchpadPanel\Panel.js

topic mobile friendly custom widget config in ArcGIS Web AppBuilder Questions

mobile friendly custom widget config

Re: mobile friendly custom widget config

Re: mobile friendly custom widget config

Re: mobile friendly custom widget config