Help with Simple Mod to Tab Theme

ShannonDeArmond — Mon, 15 May 2017 20:08:05 GMT

I'm working in WABD 2.3 and I want to modify the tab theme slightly. I want to add one extra widget holder in the top right corner relative to the map. (See attached screen shot.) I was hoping to make a copy of the default tab theme and make that modification. Can anyone point me to the right spot in the theme code to make that change?

Thanks for any help.

-Shannon

Re: Help with Simple Mod to Tab Theme

AlisonSizer — Sun, 12 Dec 2021 16:58:34 GMT

The files you're looking for are the theme's layouts' config files:

TabTheme > layouts > default > config.json
TabTheme > layouts > layout1 > config.json

The widget placeholders are in those files in the widgetOnScreen widgets array, and they're javascript objects with just a position. Like this, in default > config.json:

{
  "position": {
    "left": 95,
    "top": 45,
     "width": 400,
     "height": 410
   }
 }

The placeholder above is 95px in from the left of the map, and 45px from the top of the map.

To add a fourth (or more) placeholder, find the last existing placeholder and add a similar javascript object, with the desired position. In this case, you're probably only changing the "left" number. Then in layout1 > config.json, find the existing placeholder objects (you may need to do this by matching the position in the json with what you see on the screen in builder) and add a new one in an order that makes sense. Web AppBuilder numbers these placeholders in the order they appear in the json, so if you're working with right-aligned ones, you'll what them to be listed left-most to right-most.

topic Help with Simple Mod to Tab Theme in Web AppBuilder Custom Themes Questions

Help with Simple Mod to Tab Theme

Re: Help with Simple Mod to Tab Theme