Does anyone know a way to edit the default size of a pop-up in javascript web app builder application? The best would be to make it aware of the attributes and fit to size. I'm also interested in how to make it move further away from the feature it is identifying. Has anyone been able to do this?
Your best bet may be to re-post the question here: Web AppBuilder for ArcGIS
or here: Web AppBuilder Custom Widgets
They are both good groups for Web App Builder questions.
Hi Chris,
I can certainly do that, but do you know a way to do it via code? Web App Builder is simply where the app is starting it's life. We have various code modifications once we've done the initial work in WAB and could easily hit the pop-up customization as well. I should have mentioned that we're using the web app builder developer edition to create the apps and then we serve them off of our ArcGIS Server so we have access to all of the code files.
Thanks,
Brandon
Brandon,
we had some discussion about it here: WAB - popup box inconsistent sizes
Tim
Are you familiar with running the Developer tools in Google Chrome? If so, you could right click and inspect the element. In the right hand pane, you can see the properties of the element including the styles for resizing. Look for the element ID. It's not always what you think it is, as the size may be in a container, but you can hover your mouse over different elements in the code to know which elements are affected and then examine the element's CSS in the pane. You could then edit the .css file by searching for that element and modify it's CSS or you could override it with your own CSS file. That's what I have done in the JavaScript API.
Hi Tim,
Thanks for the link. Looks like a recent diccussion too!
Yes I have run the developer tools before. Some projects have worked better than others but I suspect that is my lack of knowledge rather than the tools themselves. I will do as you suggest and let you know if I run into trouble. I have another question that may have a similar answer. Is it possible to move the pop-up window or change the leader length? I can branch this into a new discussion if that would be more appropriate.
If you have access to the code the pop-up and map infowindow have methods for changing size and position:
Popup | API Reference | ArcGIS API for JavaScript
InfoWindow | API Reference | ArcGIS API for JavaScript
If you use map.infowindow.resize() you can change the height/width and probably find a clever way to programmatically check content size to do so -- I haven't tried that yet. To nudge it over you can use map.infowindow.show() and just add a bit right/left of the current position. The current location is available as map.infowindow.coords.
Hope this helps.
I'm not sure you can adjust the length of the leader (the distance between the feature and the popup). I think the leaders are just images so they have a set size:
http://js.arcgis.com/3.13/esri/dijit/images/popup.png
The leader lines are just css. A square box that is rotated 45 degrees and moved around based on location of the popup. The space of the popup from the item and the leader line are part of the esri javascript api. Not sure how to move the popup over though.
-Stan
Hi Sarah,
I was wondering if you could help me understand how to configure the Popup and InfoWindow code you mentioned in your answer. My goal was to modify the popup window to default to a specified size. Is this possible with the api references you listed? I'm sure it is, but I'm not sure which function or file to modify for my WAB files located: client\stemapp\jimu.js. Any tips? Thanks!
Kim,
The file would be the MapManager in the jimu.js folder. The resetInfoWindow function is where you will stick the code (line 28):
resetInfoWindow<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>isNewMap<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>isNewMap<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_mapInfoWindow <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_mapMobileInfoWindow<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_mapMobileInfoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">destroy</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_mapMobileInfoWindow <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PopupMobile</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>root<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>isMobileInfoWindow <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">.</SPAN>appInfo<SPAN class="punctuation token">.</SPAN>isRunInMobile <SPAN class="operator token">&&</SPAN> <SPAN class="operator token">!</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>isMobileInfoWindow<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hide</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setInfoWindow</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_mapMobileInfoWindow<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>isMobileInfoWindow <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_mapMobileInfoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"show"</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><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="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">'dojo/query'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//Maximize popup</SPAN> html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".esriPopupMobile"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"display"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"none"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".esriMobileNavigationBar"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"display"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"block"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".esriMobileInfoView.esriMobilePopupInfoView"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"display"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"block"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>window<SPAN class="punctuation token">.</SPAN>appInfo<SPAN class="punctuation token">.</SPAN>isRunInMobile <SPAN class="operator token">&&</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>isMobileInfoWindow<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hide</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setInfoWindow</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_mapInfoWindow<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>isMobileInfoWindow <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">400</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">300</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></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Hi Kim - I actually haven't worked with WAB, so my answer here is how I would go about it blind. If I personally had to jump in to find the right function/file I might do a search inside the main JS file for the "layers-add-result" event (text search in Notepad++ or other text editor). If I couldn't find that, I might search 'infowindow' or 'new Map' (where the map is initialized) and pop the code in after that block. I edit code in Aptana and there is a File Search capability that will search for text in an entire directory (ie you're not sure which JavaScript file has the Map functions). If you need to look through a lot of files that might be a good option -- I'm sure there are others.
In my own code it looks like this:
Main.js
<SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"layers-add-result"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<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">"Layers loaded successfully."</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Infowindow</SPAN> map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">315</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">150</SPAN><SPAN class="punctuation token">)</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>
To both Robert and Sarah:
Thank you for this solution. I didn't realize it would be so simple. The only issue I had was that adding this line of code in the client folder of MapManager.js doesn't work. Whereas, placing this code in the server folder of the specific app does work. As I was researching this change, I found your thread from 2015, which now makes sense! https://community.esri.com/thread/12141. Thanks for brining it out again and helping me!
Do you know if there's a way to modify the resetInfoWindow function to be used for all apps? I didn't want to have to modify this code for all my apps. It would be more efficient if I could only modify it in one place. Thanks again.
Un poco tarde para responder esto, pero para los que aun no lo saben eh aqui la respuesta:How To: Change the size of a popup in Web AppBuilder for ArcGIS Saludos
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
