topic Re: WAB 2.17 Launchpad Theme - how to modify widgets tray - resize, and shift in Web AppBuilder Custom Widgets Questions

WAB 2.17 Launchpad Theme - how to modify widgets tray - resize, and shift

MichaelLev — Tue, 26 Jan 2021 14:59:49 GMT

In Launchpad Theme, currently, widgets tray (at bottom of screen) is centered. I want to move it a little to the right so it will be more far away from Coordinate widget. How to do it?

In addition, can I "resize" it so that it will hold a 4-6 more widgets?

Re: WAB 2.17 Launchpad Theme - how to modify widgets tray - resize, and shift

jcarlson — Tue, 26 Jan 2021 15:42:22 GMT

Tweaks like that need to be done with WAB Developer. You can definitely make the adjustments you mention by building an app with the Developer version (you can even import an existing app) and then making changes to the JSON to add padding and additional widget placeholders.

You could also accomplish something like that using Experience Builder, even the off-the-shelf version, but EB may not have all the widgets you need.

Re: WAB 2.17 Launchpad Theme - how to modify widgets tray - resize, and shift

MichaelLev — Tue, 26 Jan 2021 16:22:19 GMT

jCarlson, thanks for trying to direct me. I'm developing custom widgets using the WAB 2.17 developer edition. I know that the Launchpad Theme widgets tray (at bottom of screen) is not configured in the app main config file. It should be somewhere in the code. Maybe in the specific code of Launcpad Theme, or maybe in the css?

Re: WAB 2.17 Launchpad Theme - how to modify widgets tray - resize, and shift

jcarlson — Tue, 26 Jan 2021 16:38:15 GMT

Gotcha!

So, go into the config.json file in the root of the viewer files. You should see the following AnchorBarController object:

"widgets": [ { "uri": "themes/LaunchpadTheme/widgets/AnchorBarController/Widget", "position": { "bottom": 10, "height": 40, "relativeTo": "map", "zIndex": 0 } ... ]

Adjust the position values here, and the launchpad bar will move. Here's mine, with the values set a bit ridiculously at "height": 300, "right": 200.

Re: WAB 2.17 Launchpad Theme - how to modify widgets tray - resize, and shift

MichaelLev — Tue, 26 Jan 2021 16:48:47 GMT

jCarlson, you are right and I was wrong by thinking it's not in the main config, but, I don't want to move it higher... I want to move it more to the rightside (currently it's centered), and I want to make it wider so that I will be able to see more wdgets concurrently.

By the way, I work mainly in 3D.

Re: WAB 2.17 Launchpad Theme - how to modify widgets tray - resize, and shift

jcarlson — Tue, 26 Jan 2021 16:55:40 GMT

Right, so maybe try changing the "right" property under "position" to various values and see how the app performs with the bar in that position.

As for the width, that's actually handled by the widgetPool object, and that is controlled by the theme's code. I don't have much experience making and modifying custom themes, but you'll want to make your own theme so as not to modify any other apps that reference the "Launchpad" theme files.

How many widgets do you have added currently? I was able to add quite a lot.

Re: WAB 2.17 Launchpad Theme - how to modify widgets tray - resize, and shift

MichaelLev — Tue, 26 Jan 2021 22:28:20 GMT

jCarlson, Thank you!

"right" indeed works. Only if I add "?locale=he" to the url, then "right" has no effect... maybe I'll inquire the code.
I have now 17 widgets in the tray, where I "remove" the last one in WidgetManager.js (place is reserved but it's empty). If I enlarge browser zoom, I can see concurrently less than 17, and Launchpad lets me use the tray arrows to shift the widgets in the tray window.
As for the "width" - I'll have to learn the relevant code.