topic Re: Custom widget height sizing in Web AppBuilder Custom Widgets Questions

Custom widget height sizing

JamesCrandall — Thu, 26 May 2022 21:08:22 GMT

WAB Dev 2.19

Lauchpad Theme

Trying to resize an entire custom widget to maximize it's height property. Already attempted to set position{} properties in the config.json with no affect. However if I inspect the widget in DevTools and manually adjust the height value to 80% it looks like what I want but unsure how to achieve this:

I also tried to implement PanelManger in the Widget.js file itself in an onOpen() function but ran into errors.

Re: Custom widget height sizing

BrianLeroux — Fri, 27 May 2022 12:24:06 GMT

Try reviewing the following thread to see if that helps.

how-to-change-the-width-and-height-of-the-custom

Re: Custom widget height sizing

JamesCrandall — Fri, 27 May 2022 14:44:05 GMT

Thanks Brian and Robert of course!

That does in fact work to alter the size of the widget.

Is there any way to specify a percent size instead of just integer value? Something like instead of 600 can set it so 80%?

panel.setPosition({ top: 120, left: 10, width: 650, height: 600, margin: 10, index: 0 });

This only worked in the startup: function () {} for my widget. I tried to implement onOpen(){} but it doesn't fire when I close/open the widget. Full solution:

_resizeWidget: function (widgetName) { var wm = WidgetManager.getInstance(); var pm = PanelManager.getInstance(); var myWidget = null; arrayUtils.some(wm.appConfig.widgetPool.widgets, function (aWidget) { if (aWidget.name === widgetName) { myWidget = aWidget; } }); if (myWidget) { var controller = wm.getWidgetsByName("AnchorBarController"); var pos = { relativeTo: map, left: 277, top: 225, width: 600, height: 820 }; if (controller.length > 0) { pm.showPanel(myWidget).then(lang.hitch(this, function (panel) { //panel.setPosition({ top: 120, left: 10, width: 350, height: 80%, margin: 10, index: 0 }); panel.setPosition({ top: 120, left: 10, width: 650, height: 600, margin: 10, index: 0 }); pm.normalizePanel(panel); })); } else { pm.showPanel(myWidget); } } }, onOpen: function () { this._resizeWidget("Pega WU Tool"); //doesn't ever fire }, startup: function () { //resize widget to specs this._resizeWidget("Pega WU Tool"); }

Re: Custom widget height sizing

BrianLeroux — Fri, 27 May 2022 15:17:57 GMT

Have you tried putting 80% as the height value? If that does not work you should be able to calculate the pixel value you want. I would try to take map.height x 0.8 to get 80 % of the map height.

For onOpen, any error in console? I would add a console.log("OnOpen Fired") to make sure you see that event occurring.

Re: Custom widget height sizing

JamesCrandall — Fri, 27 May 2022 15:33:25 GMT

heck of an idea! Thanks!

var heightVal = this.map.height * 0.80 panel.setPosition({ top: 75, left: 10, width: 350, height: heightVal, margin: 10, index: 0 });

No errors, the onOpen: function(){} just never gets fired at all. I'm sure it has something to do with the Widget Life Cycle but I haven't fully investigated that yet.

Re: Custom widget height sizing

BrianLeroux — Fri, 27 May 2022 15:48:08 GMT

onOpen fires right after startup completes so you should see it firing pretty quickly once you open the widget. Personally I would try to get your events to fire appropriately just by using console logging. Once that works then you can add back the calling of your resize function.

Also I don't think it matters at all but I like to order the functions based on the timing. for example I keep startup first and then onOpen and finally my custom functions.