Is there a way I can modify code in WAB Developer Edition to change the size of the widget window for specific widgets in LaunchPad theme? I am using WAB Developer Edition 2.1
Daniel,
Take a look at the example here:
Widget on-screen configuration—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
I looked in the OnScreenWidgetPanel.js file and do not see these lines of code inside.
Am I missing something? Also, I am hoping to set different sizes for different widgets.
For WABde 2.0 you would go to the widget of interest.
For example, for the About Widget...
[app#]\widgets\About\css\style.css
Another way to do it (other than Robb's way). If you want to resize a specific widget in the Launchpad theme then I would add this code to the startup function in that specific widgets Widget.js:
<SPAN class="keyword token">var</SPAN> panel <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getPanel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> pos <SPAN class="operator token">=</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">;</SPAN> pos<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">=</SPAN> <SPAN class="number token">600</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPosition</SPAN><SPAN class="punctuation token">(</SPAN>pos<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>panelManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">normalizePanel</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
This may be a simple question, but what lines do you place this in the startup function?
It does not really matter. I placed it right before the end of the function.
I gave your code a try. It works pretty well. However, if a user is to use the resize handle the widget size will default to width:400 height:400. The resize handle will not allow any size smaller than 400 after that. (400 is an estimate. The widget is reset to whatever the default is.)
Any ideas on how to overcome this issue? I might just remove the ability to resize as shown in your example here: disable/hide resize handle for Widget
Also, ESRI should probably be supplementing your salary. Thanks for all of your hard work on the forums. You have helped many people!
Phil,
Nice catch. Here is the modified code to correct that issue:
<SPAN class="keyword token">var</SPAN> panel <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getPanel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">=</SPAN> <SPAN class="number token">600</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPosition</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>panelManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">normalizePanel</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
All,
Better yet, because the widget will revert to normal size once closed and reopened, you should just add a new onOpen function and not use the startup addition suggested earlier:
<SPAN class="token function">onOpen</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> panel <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getPanel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">=</SPAN> <SPAN class="number token">600</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPosition</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>panelManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">normalizePanel</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
I have tried both suggestions: placing latest code in startup and onOpen functions. Neither overcome the resize handle issue. I'm testing this on WAB 2.1 with Chrome and IE 10.
I'm curious if danielchantlos has experienced the same thing. Anyone else?
This is what my onOpen function looks like (in Widget.js):
onOpen<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> panel <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getPanel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">=</SPAN> <SPAN class="number token">300</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>height <SPAN class="operator token">=</SPAN> <SPAN class="number token">300</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPosition</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>panelManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">normalizePanel</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'onOpen'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
I did not test making the widget smaller then the default original size for that you will have to have this in the startup function:
<SPAN class="keyword token">var</SPAN> panel <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getPanel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">=</SPAN> <SPAN class="number token">300</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>height <SPAN class="operator token">=</SPAN> <SPAN class="number token">300</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>_originalBox <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> w<SPAN class="punctuation token">:</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>width<SPAN class="punctuation token">,</SPAN> h<SPAN class="punctuation token">:</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>height<SPAN class="punctuation token">,</SPAN> l<SPAN class="punctuation token">:</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>left <SPAN class="operator token">||</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> t<SPAN class="punctuation token">:</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>top <SPAN class="operator token">||</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPosition</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>panelManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">normalizePanel</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
and the onOpen function just the way you have it.
This has been super helpful for me. However, I wanted to modify it a bit and wanted the panel to open initially on default settings. After user clicks on the map, I wanted the panel to resize to my specified size. I have added the code on the map click event listener and the window successfully resizes. Now I want to add some code to the onclose function that will return the panel to the default state and not resized. I wanted to do this because the window is taking too much screen real estate once the onclick event is initizlized.
I have declared my variable in startup function :
var panel = this.getPanel();
Added These Lines on Startup event
panel.position.width = 820; panel.setPosition(panel.position); panel.panelManager.normalizePanel(panel);
Now not sure how to reset the panel to original size on close event
Anish,
In your startup function in the widget save the widgets original size to a widget var and then in the onClose function (you may have to add this function to the widget) get set the widgets size back to the original size var saved earlier.
Hi Robert,
I am wondering why this code doesn't work when added to the Elevation Profile widget that you wrote. Does something else need to be changed to make this work in that widget?
Matt,
What is not working? I just tested in WAB 2.8 Launchpad adding this to the onOpen of the Elevation Profile widget.
<SPAN class="keyword token">var</SPAN> panel <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getPanel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> pos <SPAN class="operator token">=</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">;</SPAN> pos<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">=</SPAN> <SPAN class="number token">720</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPosition</SPAN><SPAN class="punctuation token">(</SPAN>pos<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> panel<SPAN class="punctuation token">.</SPAN>panelManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">normalizePanel</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
You are correct Robert. The re-size works great. I didn't have it setup properly.Thanks for all your help!
Probably quite late but in my case, I had to re-size the widget within the response part of function and could not get the panel details with 'this'. I modified the code a bit and below code helped me to set resize the widget.// Re-size the widgetpanel = _widgetManager.activeWidget.getPanel() //With this line you can fetch the concerned widgetpanel.position.width = 600; // Set your width valuepanel.setPosition(panel.position);panel.panelManager.normalizePanel(panel);
Hope this helps!!!
Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
