topic Re: How do you set a custom javascript widget's size? in Web AppBuilder Custom Widgets Questions

How do you set a custom javascript widget's size?

LanceGoens — Wed, 11 Feb 2015 01:12:05 GMT

I'm brand new to working with dojo and the WAB. I'm creating a custom widget and I'm trying to control the default size of the container "window" that opens to house the widget. It seems that if I add the widget to the header widget container/controller, the default size is 360 pixels wide and 100% tall. I've removed it from there and added it to the "1" widget button in the WAB and now I can at least adjust the size of the widget's container window once it's open, but more importantly... How/where do I set the size of the widget's container when it opens?

Web AppBuilder Custom Widgets‌

Re: How do you set a custom javascript widget's size?

Anonymous User — Fri, 13 Feb 2015 09:12:16 GMT

In this case it sounds like you need to create a custom Panel.

Navigate to the Panel location (you should find this in your app's config.json) and make a copy of Panel. Set the panel properties in your custom panel, then configure your widget to use the custom panel.

Hope this helps.

Re: How do you set a custom javascript widget's size?

FC_Basson — Fri, 13 Feb 2015 10:00:22 GMT

As steve way says, you can use a custom panel CSS size class. In "js/main.js" when the tool is created with toolbar.createTool(tool, panelClass), replace panelClass with your own custom class, which you also define in "css/styles.css".

So in main.js => var mytool = toolbar.createTool(tool, "myPanel")

and in styles.css => .myPanel{height:200px /*custom height*/}

Re: How do you set a custom javascript widget's size?

LanceGoens — Fri, 13 Feb 2015 16:17:34 GMT

You guys may have pin pointed the correct way to do it but I found an alternative and since I'm working on a prototype / proof of concept project, quick and dirty is what I'm after.

In the app's config.json file, I added the widget and placed a position node/element with it in the json. I'm guessing I may have actually stumbled onto the correct way to do this but I'm not sure. i haven't retested the widget in the header controller with this setup but I think those widgets are locked into the default panel size. Placing this widget in the "1" spot (near the home button) is sufficient for my need and actually preferable because I need to be able to move the window to interact with the map under it. Anyway, here is the code I added to config.json in the app root where the "width" and "height" control the panel the widget panel's size:

{

"position": {

"left": 55,

"top": 45,

"width": 650,

"height": 500

"placeholderIndex": 1,

"id": "_5",

"positionRelativeTo": "map",

"name": "SplicingSchedule",

"label": "Splicing Schedule",

"version": "1.1",

"uri": "widgets/SplicingSchedule/Widget",

"config": "widgets/SplicingSchedule/config.json"