On screen widgets

2127
13
Jump to solution
10-31-2016 11:46 AM
AlexGole
Occasional Contributor II

Hi all,

I am trying to add additional widget placeholder (there are 5 currently by default, Iwant 6 or 7 placeholders) to the foldable theme with default layout for one of our applications and for some reasons I have not been successful yet.

Here is what I am doing: 

1) I go to stemapp>themes>FoldableTheme>layouts> default>config.json.

2) I add a widget placeholder by adding this code to the config.json file:

{
"position": {
"left": 305,
"top": 45
}
},

Results:

a new layout is highlighted in WAB

the other layouts are all messed up:

Any idea or help is welcome,

Thanks,

Alex

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Alex,

  Go into that apps main config.json and add the two new placeholders there. Find your "widgetsOnScreen" object and its "widgets" array then scroll down till you see the last of your original 5 on screen widget and add:

      {
        "position": {
          "left": 305,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 6
      },
      {
        "position": {
          "left": 355,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 7
      },

View solution in original post

13 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Alex,

  Go into that apps main config.json and add the two new placeholders there. Find your "widgetsOnScreen" object and its "widgets" array then scroll down till you see the last of your original 5 on screen widget and add:

      {
        "position": {
          "left": 305,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 6
      },
      {
        "position": {
          "left": 355,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 7
      },

View solution in original post

AlexGole
Occasional Contributor II

Thanks Robert!

0 Kudos
FrancescoTonini2
Occasional Contributor II

Robert Scheitlin, GISP,

The chunk of code above you suggest to add in the config.json file, is that after you download and unzip the app folders locally, or is that inside the \server\apps\<app id> folder? I am asking because for me after adding that code chunk and refresh the app editor launched with WAB, it throws an error. 

I have the 3 off-panel widgets below and am trying to add your chunk to this list to create 2-3 more slots to be filled in the WAB editor:

{
"position": {
"right": 100,
"top": 20,
"relativeTo": "map"
},
"placeholderIndex": 1,
"id": "_29",
"name": "Swipe",
"version": "2.3",
"uri": "widgets/Swipe/Widget",
"config": "configs/Swipe/config_Swipe.json",
"openAtStart": false,
"closeable": true
},
{
"position": {
"right": 150,
"top": 20,
"relativeTo": "map"
},
"placeholderIndex": 1,
"id": "_30",
"name": "BasemapGallery",
"version": "2.3",
"uri": "widgets/BasemapGallery/Widget",
"config": "configs/BasemapGallery/config_BasemapGallery.json"
},
{
"position": {
"right": 200,
"top": 20,
"relativeTo": "map"
},
"placeholderIndex": 1,
"id": "_31",
"name": "About",
"version": "2.3",
"uri": "widgets/About/Widget",
"config": "configs/About/config_About.json"
},

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

The code is for adding new blank placeholder in WAB before exporting the app. You should not get an error unless you has created some syntax error in your edits.

0 Kudos
FrancescoTonini2
Occasional Contributor II

Thank you Robert! 

I guess I was thrown off by the fact that my 3 widgets all have "placeholderIndex": 1 but everything still works, while if I add a new placeholder it has to have a different index (e.g. 2,3, etc) or it will throw an error...

0 Kudos
IrfanAfsar
Occasional Contributor II

Thanks Robert,

They are working fine, I have added the above code in Launchpad theme right before the widget FullScreen. Now I have many of widgets on my screen!

},
"version": "2.6",
"id": "widgets_FullScreen_Widget_35",
"name": "FullScreen" /
},
{
"position": {
"right": 80,
"top": 20,
"relativeTo": "map"
},
"placeholderIndex": 6
},
{
"position": {
"right": 50,
"top": 20,
"relativeTo": "map"
},
"placeholderIndex": 7
}

],
"panel": {
"uri": "jimu/OnScreenWidgetPanel",
"position": {
"relativeTo": "map"
}

0 Kudos
RyanCoodey
Regular Contributor

Trying to do this in Portal 10.6 (WAB 2.6) with the Launchpad Theme. Just want to add one additional placeholder on the right. I open "C:\Program Files\ArcGIS\Portal\apps\webappbuilder\stemapp\themes\LaunchpadTheme\layouts\layout2\config.json" and add:

{
      "position": {
        "right": 20,
        "top": 250
      }
    },

Adding that just under the same entry with a top position of 200. There is no attribute on the other 3 placeholders for "placeHolderIndex". After adding it acts a bit wonky, the Extent Navigation arrows take this new spot now.

Feel like I a missing something simple... any ideas? Thanks a lot!

0 Kudos
GeorgeKatsambas
Occasional Contributor III

In WAB 2.11 I am adding this code but all i get is a blank page when trying to load the map in developer with a spinning cursor and no console errors? I want to add 2 more placeholders so I am adding the code posted in the config.json file.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

George,

   Sounds like you made a syntax error in the json file then.