"Geocoder" in "Tab Theme"

2806
6
Jump to solution
11-20-2014 12:23 PM
TarigAhmed1
New Contributor III

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

Thanks

Tarig

0 Kudos
1 Solution

Accepted Solutions
JosephMootz1
Occasional Contributor

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

      }

    }, {

View solution in original post

6 Replies
JosephMootz1
Occasional Contributor

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.

TarigAhmed1
New Contributor III

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

    }

  }

}

0 Kudos
JosephMootz1
Occasional Contributor

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

      }

    }, {

TarigAhmed1
New Contributor III

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

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
TarigAhmed1
New Contributor III

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

0 Kudos