topic Re: On screen widgets in Web AppBuilder Custom Widgets Questions

On screen widgets

AlexGole — Mon, 31 Oct 2016 18:46:02 GMT

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

Re: On screen widgets

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:03:05 GMT

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
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: On screen widgets

AlexGole — Mon, 31 Oct 2016 20:05:48 GMT

Thanks Robert!

Re: On screen widgets

FrancescoTonini2 — Fri, 27 Jan 2017 20:47:33 GMT

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"
},

Re: On screen widgets

RobertScheitlin__GISP — Fri, 27 Jan 2017 20:56:32 GMT

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.

Re: On screen widgets

FrancescoTonini2 — Fri, 27 Jan 2017 21:06:37 GMT

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...

Re: On screen widgets

James_001 — Tue, 31 Oct 2017 19:42:28 GMT

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"
}

Re: On screen widgets

RyanCoodey — Wed, 25 Apr 2018 01:24:37 GMT

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!

Re: On screen widgets

GeorgeKatsambas — Wed, 06 Mar 2019 19:42:58 GMT

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.

Re: On screen widgets

RobertScheitlin__GISP — Wed, 06 Mar 2019 20:58:25 GMT

George,

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

Re: On screen widgets

GeorgeKatsambas — Wed, 06 Mar 2019 21:24:55 GMT

Me and syntax errors, I have no clue then where it is. by the 10 000th copy and paste i might get it right

Re: On screen widgets

GeorgeKatsambas — Wed, 06 Mar 2019 21:33:13 GMT

ok 5th attempt lol

Re: On screen widgets

GeorgeKatsambas — Wed, 06 Mar 2019 21:41:17 GMT

Thank You Robert, i added finally the 2 additional placeholders I wanted, now I want to resize them to match the original, but in the jimu.css file changing the size is not changing the last 2 added place holders, where is that rule now?

Re: On screen widgets

GeorgeKatsambas — Wed, 06 Mar 2019 21:45:29 GMT

never mind, forgot to close and re-open WAB and add an actual widget, Thank God for Hump day