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
Solved! Go to Solution.
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.
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.