Add Widget Containers to Jewelry Box Theme?

[CarmellaBurdi1]

I'd like to add two extra widget containers to the Jewelry Box theme panel. I've attached an image to show where I'd like to add them. I was able to add them in 2.2, but now in 2.3 when I made the same modifications to the config.json nothing happens.

I've made a new layout called "layout3" and added that to the manifest.json. That shows up well. See attached image.

But when I edit the code to try add two more containers, nothing happens. I've attached a snip of my code - I'd be grateful for any help!

Carmie

[RobertScheitlin__GISP]

Carmella,

  When I add this code to the config it works fine for me in 2.3:

      {
        "position": {
          "left": 205,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 4,
        "id": "_26"
      },
      {
        "position": {
          "left": 255,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 5,
        "id": "_27"
      },
      {
        "position": {
          "left": 305,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 6,
        "id": "_28"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[CarmellaBurdi1]

Hi Robert,

Thank you so much for getting back to me! Unfortunately, I can't seem to get this to work. 

I've attached my config file. When I use this as is, my "home" button and my "My Location" button shift to the right (see attached screenshot) and I do not get any extra widget containers. 

Am I missing some brackets or something? 

Thank you,

Carmie

[RobertScheitlin__GISP]

Carmie,

   There are a lot of oddities about your config.json. This is what my widgetsOnScreen object looks like:

  "widgetOnScreen": {
    "widgets": [
      {
        "uri": "themes/JewelryBoxTheme/widgets/HeaderController/Widget",
        "position": {
          "left": 0,
          "top": 0,
          "right": 0,
          "height": 40,
          "relativeTo": "browser"
        },
        "version": "2.3",
        "id": "themes_JewelryBoxTheme_widgets_HeaderController_Widget_19",
        "icon": "themes/JewelryBoxTheme/widgets/HeaderController/images/icon.png?wab_dv=2.1",
        "name": "HeaderController"
      },
      {
        "uri": "widgets/Scalebar/Widget",
        "position": {
          "left": 7,
          "bottom": 25,
          "relativeTo": "map"
        },
        "version": "2.3",
        "id": "widgets_Scalebar_Widget_20",
        "icon": "widgets/Scalebar/images/icon.png?wab_dv=2.1",
        "name": "Scalebar"
      },
      {
        "uri": "widgets/Search/Widget",
        "position": {
          "left": 55,
          "top": 5,
          "relativeTo": "map"
        },
        "version": "2.3",
        "id": "widgets_Search_Widget_21",
        "icon": "widgets/Search/images/icon.png?wab_dv=2.1",
        "name": "Search"
      },
      {
        "uri": "widgets/Coordinate/Widget",
        "position": {
          "left": 7,
          "bottom": 5,
          "relativeTo": "map"
        },
        "version": "2.3",
        "id": "widgets_Coordinate_Widget_22",
        "icon": "widgets/Coordinate/images/icon.png?wab_dv=2.1",
        "name": "Coordinate",
        "visible": false,
        "config": "configs/Coordinate/config_Coordinate.json"
      },
      {
        "position": {
          "left": 55,
          "top": 45,
          "relativeTo": "map",
          "width": 200
        },
        "placeholderIndex": 1,
        "id": "_23",
        "uri": "",
        "version": "2.1"
      },
      {
        "position": {
          "left": 105,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 2,
        "id": "_24"
      },
      {
        "position": {
          "left": 155,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 3,
        "id": "_25"
      },
      {
        "position": {
          "left": 205,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 4,
        "id": "_26"
      },
      {
        "position": {
          "left": 255,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 5,
        "id": "_27"
      },
      {
        "position": {
          "left": 305,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 6,
        "id": "_28"
      },
      {
        "uri": "widgets/OverviewMap/Widget",
        "position": {
          "right": 0,
          "bottom": 0,
          "relativeTo": "map"
        },
        "version": "2.3",
        "id": "widgets_OverviewMap_Widget_26",
        "icon": "widgets/OverviewMap/images/icon.png?wab_dv=2.1",
        "name": "OverviewMap"
      },
      {
        "uri": "widgets/HomeButton/Widget",
        "position": {
          "left": 7,
          "top": 75,
          "relativeTo": "map"
        },
        "version": "2.3",
        "id": "widgets_HomeButton_Widget_27",
        "icon": "widgets/HomeButton/images/icon.png?wab_dv=2.1",
        "name": "HomeButton"
      },
      {
        "uri": "widgets/MyLocation/Widget",
        "position": {
          "left": 7,
          "top": 110,
          "relativeTo": "map"
        },
        "version": "2.3",
        "id": "widgets_MyLocation_Widget_28",
        "icon": "widgets/MyLocation/images/icon.png?wab_dv=2.1",
        "name": "MyLocation"
      },
      {
        "uri": "widgets/AttributeTable/Widget",
        "version": "2.3",
        "position": {
          "relativeTo": "browser"
        },
        "id": "widgets_AttributeTable_Widget_29",
        "icon": "widgets/AttributeTable/images/icon.png?wab_dv=2.1",
        "name": "AttributeTable",
        "featureActions": [
          {
            "name": "ShowRelatedRecords",
            "uri": "actions/ShowRelatedRecordsFeatureAction"
          },
          {
            "name": "ViewInTable",
            "uri": "actions/ViewInAttributeTableFeatureAction"
          }
        ],
        "config": "configs/AttributeTable/config_AttributeTable.json",
        "visible": false
      },
      {
        "uri": "widgets/Splash/Widget",
        "visible": false,
        "position": {
          "relativeTo": "browser"
        },
        "version": "2.3",
        "id": "widgets_Splash_Widget_30",
        "icon": "widgets/Splash/images/icon.png?wab_dv=2.1",
        "name": "Splash"
      },
      {
        "uri": "widgets/ZoomSlider/Widget",
        "position": {
          "top": 5,
          "left": 7,
          "relativeTo": "map"
        },
        "version": "2.3",
        "id": "widgets_ZoomSlider_Widget_31",
        "icon": "widgets/ZoomSlider/images/icon.png?wab_dv=2.1",
        "name": "ZoomSlider"
      },
      {
        "uri": "widgets/ExtentNavigate/Widget",
        "visible": false,
        "position": {
          "top": 148,
          "left": 7,
          "relativeTo": "map"
        },
        "version": "2.3",
        "id": "widgets_ExtentNavigate_Widget_33",
        "name": "ExtentNavigate"
      }
    ],
    "groups": [
      {
        "visible": false,
        "panel": {
          "uri": "themes/JewelryBoxTheme/panels/LDockablePanel/Panel",
          "position": {
            "left": 0,
            "top": 40,
            "bottom": 0,
            "width": 360,
            "relativeTo": "browser"
          }
        },
        "maxWidgets": 1,
        "id": "_18",
        "widgets": [
          {
            "name": "PopupPanel",
            "uri": "widgets/PopupPanel/Widget",
            "id": "widgets_PopupPanel_Widget_32",
            "icon": "widgets/PopupPanel/images/icon.png?wab_dv=2.1",
            "config": "configs/PopupPanel/config_PopupPanel.json",
            "version": "2.1.1"
          }
        ],
        "label": "Group_0",
        "icon": "widgets/PopupPanel/images/icon.png?wab_dv=2.1"
      }
    ],
    "panel": {
      "uri": "jimu/OnScreenWidgetPanel",
      "position": {
        "relativeTo": "map"
      }
    }
  }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[CarmellaBurdi1]

Hmm... if I copy and paste this in, it does not work. I don't see any Themes at all. See attached. 

Robert, I'm curious why your code is referencing version 2.1 so much. Could that be part of the issue? I'm working off a fresh install of 2.3. 

Just to make sure I'm making sense - this is what I did: 

1) Added a folder called "layout3" to my Layouts folder in the JewerlyBoxTheme folder

...\Desktop\arcgis-web-appbuilder-2.3\WebAppBuilderForArcGIS\client\stemapp\themes\JewelryBoxTheme\layouts\layout3

2) Copied the config/images from the "default" layout folder to "layout3"

3) Edited and added in the code in which I add in the extra widget containers to the config.json located in "layout3" 

4) Added in the new "layout3" to the manifest.json in my JewelryBoxTheme

Am I missing a step anywhere? Like I said, this worked fine in 2.2 and all looked nice. 

Thank you so much for your help. 

Carmie

[RobertScheitlin__GISP]

Carmie,

   I see what you are saying now. Using your workflow I see the same results. I have been adding the additional onscreen widget slots in the main config.json of an app already created using the default layout and it woks fine. This seems like a bug that need to be reported to esri tech support.

[CarmellaBurdi1]

Hi Robert,

Thank you so much! I feel a bit better that maybe I'm not crazy!

Here's another question if you've got time.  

Since I really like using the Jewelry Box theme with your pop-up panel widget I attempted to integrate it into the Foldable Theme (since that already had the 5 widget containers I needed). 

It works kind of okay when I'm editing the web app (see attached screenshot) - but when I attempt to launch the app, nothing happens. The side panel never opens (even if I leave the close panel buttons checked off) I just have the swirly loading circle forever and ever. 

I've attached the config.json I used for my Foldable Theme Layout.... I'm sure I'm just not knowledgeable enough to understand where I went wrong. But this is really frustrating me as I don't want to put my widgets into the header container! It's sort of a last resort to do that. 

Thank you!

Carmie

[RobertScheitlin__GISP]

Carmie,

  Your easiest route is to just use the jewlerybox theme (the standard one) and then once you create your app open the main config.json for that app and add the thre additional placeholder as I mentioned in the start of this thread, as that works fine. 

[MattPohl]

Had anyone tried to do this with a newer version (> 2.13). When I do this in jewelry box theme I don't get the additional placeholders appearing in the right place. the 1st new one ends up where the overview map widget should be and the other 2 end up where the home screen widget should be. No matter how I set the "left" and "top" values, the placeholders don't move. I am making the changes to the config.json file on an already created app. I have also tried this on a freshly created app and get the same results. 

[MattPohl]

So in other posts I have read and even in a technical support article on ESRI's website, it states the code creating additional placeholders should be inserted after the last placeholder in the config.json (in the jewelry box theme that would be after placeholder 3). When doing it that way, the results are not as expected (as seen in my previous post). However, I found that if the code is inserted at the end of the widgetOnScreen segment, it works just fine. not sure if anyone has had this problem, but that is what worked for me. I tested this on multiple themes in WAB version 2.13 and 2.17 with the same results