topic Re: "Geocoder" in "Tab Theme" in ArcGIS Web AppBuilder Questions

"Geocoder" in "Tab Theme"

TarigAhmed1 — Thu, 20 Nov 2014 20:23:30 GMT

How can I get the "Geocoder" widget in the "Tab Theme" ?

Thanks

Tarig

Re: "Geocoder" in "Tab Theme"

JosephMootz1 — Sun, 23 Nov 2014 02:13:16 GMT

Add the following widget to the config.json file in the "client\stemapp\themes\FoldableTheme\layouts\default" folder

{

"uri": "widgets/Geocoder/Widget",

"position": {

"left": 45,

"top": 5

}

I deduced this solution from clues in the the Help file under Developer Guide -Theme Development - Create A Theme. I inspected the config.json in the corresponding "Foldable Layout" folder and found it had the above code. This only works if you are using the downloaded Web App builder. I don't have a solution if you are using the Web App Builder within ArcGIS Online. I reported this as bug WebApp-001119 a month ago but do not know if any action will be taken on it.

Re: "Geocoder" in "Tab Theme"

TarigAhmed1 — Tue, 25 Nov 2014 17:06:11 GMT

That didn't work for me . I tried different ways to add it to the .... client\stemapp\themes\TabTheme\layouts\default\config.json

Geocoding is one of the basic and fundamental GIS operations, I think it should be available in all Themes .

I was able to add the "Enhanced Search" widget before, it was easy and forward to add.

Thank you Joseph.

-----------

{

"widgetOnScreen": {

"widgets": [{

"uri": "themes/TabTheme/widgets/Header/Widget",

"positionRelativeTo": "browser",

"position": {

"left": 0,

"top": 0,

"right": 0,

"height": 44

}

}, {

"uri": "themes/TabTheme/widgets/Footer/Widget",

"positionRelativeTo": "browser",

"position": {

"left": 0,

"right": 0,

"bottom": 0,

"height": 24

}

}, {

"uri": "themes/TabTheme/widgets/SidebarController/Widget",

"positionRelativeTo": "browser",

"position": {

"left": 0,

"top": 44,

"bottom": 24

}

}, {

"uri": "widgets/HomeButton/Widget",

"position": {

"left": 7,

"top": 75

}

}, {

"uri": "widgets/BasemapGallery/Widget",

"position": {

"right": 60,

"top": 45,

"width": 430,

"height": 410

}

}, {

"uri": "widgets/AttributeTable/Widget"

}, {

"uri": "widgets/Splash/Widget",

"visible": false,

"positionRelativeTo": "browser"

}]

"widgetPool": {

"panel": {

"uri": "themes/TabTheme/panels/TabPanel/Panel",

"positionRelativeTo": "browser",

"position": {

"top": 44,

"left": 0,

"bottom": 22

}

{

"widgetOnScreen": {

"widgets": [{

"uri": "themes/TabTheme/widgets/Header/Widget",

"positionRelativeTo": "browser",

"position": {

"left": 0,

"top": 0,

"right": 0,

"height": 44

}

}, {

"uri": "themes/TabTheme/widgets/Footer/Widget",

"positionRelativeTo": "browser",

"position": {

"left": 0,

"right": 0,

"bottom": 0,

"height": 24

}

}, {

"uri": "themes/TabTheme/widgets/SidebarController/Widget",

"positionRelativeTo": "browser",

"position": {

"left": 0,

"top": 44,

"bottom": 24

}

}, {

"uri": "widgets/HomeButton/Widget",

"position": {

"left": 7,

"top": 75

}

}, {

"uri": "widgets/BasemapGallery/Widget",

"position": {

"right": 60,

"top": 45,

"width": 430,

"height": 410

}

}, {

"uri": "widgets/AttributeTable/Widget"

}, {

"uri": "widgets/Splash/Widget",

"visible": false,

"positionRelativeTo": "browser"

}]

"widgetPool": {

"panel": {

"uri": "themes/TabTheme/panels/TabPanel/Panel",

"positionRelativeTo": "browser",

"position": {

"top": 44,

"left": 0,

"bottom": 22

}

"widgets": [{

"uri": "widgets/Legend/Widget"

{

"uri": "widgets/LayerList/Widget"

{

"uri": "widgets/Geocoder/Widget"

}]

"map": {

"position": {

"top": 44,

"right": 0,

"bottom": 24,

"left": 55

}

"map": {

"position": {

"top": 44,

"right": 0,

"bottom": 24,

"left": 55

}

Re: "Geocoder" in "Tab Theme"

JosephMootz1 — Wed, 26 Nov 2014 05:49:45 GMT

I added it as shown in Bold below. I hope this helps. I agree, I cannot understand why this would not be available in all themes.

{

"widgetOnScreen": {

"panel": {

"uri": "themes/FoldableTheme/panels/TitlePanel/Panel"

"widgets": [{

"uri": "themes/FoldableTheme/widgets/HeaderController/Widget",

"positionRelativeTo": "browser",

"position": {

"left": 0,

"top": 0,

"right": 0,

"height": 40

}

}, {

"uri": "widgets/Scalebar/Widget",

"position": {

"left": 25,

"bottom": 25

}

} , {

"uri": "widgets/Geocoder/Widget",

"position": {

"left": 45,

"top": 5

}

} , {

"uri": "widgets/Coordinate/Widget",

"position": {

"left": 200,

"bottom": 20

}

}, {

Re: "Geocoder" in "Tab Theme"

TarigAhmed1 — Wed, 26 Nov 2014 20:17:51 GMT

Oh .. I think you're working under the "Foldable Theme" right? ...

I need it to show when I select the "Tab Theme"

Re: "Geocoder" in "Tab Theme"

RobertScheitlin__GISP — Wed, 26 Nov 2014 20:34:53 GMT

Tarig,

I was able to add it to the default tab theme as well. I just did what Joseph was instructing but I used this folder client\stemapp\themes\TabTheme\layouts\default\config.json. The other thing to be aware of is that this will only add the Geocoder to NEW applications using the Tab theme. It will not add the geocoder to existing apps. If you need to add it to an existing app then you have to go into that apps config.json and add those line and make sure you app has the Geoocder folder under its widgets folder.

Re: "Geocoder" in "Tab Theme"

TarigAhmed1 — Mon, 01 Dec 2014 17:00:01 GMT

Robert, Joseph ~

Its working like a charm. Thank you Robert, you were right that's exactly what I was doing, I was just refreshing and looking at an existing app hoping the widget will show up .

I tested it on both new and an existing app, everything looks great.

Thank you so much Joseph great work .

~ Tarig