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:
<div class="jimu-panel jimu-launchpad-panel" id="widgets_Pega WU Tool_Widget_43_panel" widgetid="widgets_Pega WU Tool_Widget_43_panel" style="inset: 120px auto auto 60px; width: 350px; height: 80%; padding: 0px; margin: auto; z-index: 101; position: absolute; opacity: 1;"></div>
I also tried to implement PanelManger in the Widget.js file itself in an onOpen() function but ran into errors.
Solved! Go to Solution.
Try reviewing the following thread to see if that helps.
Try reviewing the following thread to see if that helps.
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");
}
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.
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.
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.