Popup Panel Widget Version 2.17 - 9/1/2020

11-17-2015 09:06 AM
Labels (1)

Popup Panel Widget Version 2.17 - 9/1/2020

For those of you that don't want the popup to block features on the map or wish you could have selections results info display some where beside the map info window, this is the widget for you. This widget basically takes the JS API sample "Popup content in side panel" and makes it into a WAB widget.

Live Preview Site

Older Versions

Last 2.13 version

Last 2.12 version

Last 2.11 version

Last 2.9 version

List of the latest enhancements and changes:

  1. Fixed an issue when you have the AT widget configured to be open by default and have the popup panel widget set to close on startup, the AT widget will not resize to fill whole width of app.

List of the older enhancements and changes:

  1. Fixed an issue where the tab theme in WAB 2.13 would not open the popup panel.
  2. Fixed an issue where feature on the edge of the map are no longer visible when using Jewlerybox theme, once the drawer is opened.
  3. Fixed issues with Tab theme when not using sidebar or when using the widget in a position higher then the 4 of the sidebar controller.
  4. Fixed issue with setting page error.
  5. Fixed issue with Dashboard theme dark style not being able to see the next/previous buttons
  6. Fixed double popup issue when using the Dashboard Theme.
  7. Fixed dark icon colors for next and previous when using Dashboard Theme.
  8. Removed protocol from a css item dependency to prevent mixed content warnings.
  9. Added configuration setting for placing the action menu at the top or bottom of the panel.
  10. Added configuration for disabling export options on action menu.
  11. Widget is now configurable to close on startup and/or close on clear
  12. Widget has been enhanced to work with the Tab Theme as well as the Jewelry Box Theme (as far as opening and closing the controller widget).
  13. Widget now implements the actions menu for panning and open in attribute table.
  14. Fixed an issue where the popup will not populate on some mobile devices
  15. Prevents the WAB Mobile popup from be activated.
  16. Added Zoom To selected
  17. Added Clear selected
  18. Widget will automatically open if the widget is closed or minimized (the widget needs to be opened or set to pre-load or else the standard popup widget will be used). App will no longer revert to the standard popup once the widget is closed.
  19. Enhanced the widget to select the popup widget tab as well as open the sidebar when using the tab theme
  20. Fixed the RelatedRecordsPopupProjector error issue when using Popup Panel widget.
  21. Fixed next and previous moving more than one record in some circumstances.
  22. Made sure selected feature is in view extent when the popup panel opens in the Jewelry box theme
  23. Fixed double vertical sliders in some circumstances.
Labels (1)

Thank you for this as well as for deploying an updated widget with the new code!

Robert Scheitlin, GISP

Not sure if this has been asked, but would it be possible to clear the selection on the map once the widget is closed (without clicking Clear)?



I'll look at that for the next release.

Sorry to say it, but the code you listed above and added to the new widget download is not working for me. I double checked to make sure that the syntax in your online post matched what was in the widget that I downloaded this morning, and it does.

ArcGIS Web Application 

I'm going to try to persuade the client to leave the pop-up window open on start up, but wanted you to know there still seems to be something off.


  Look at the live preview site like at the top of this post it is using the new version and has the AT widget open by default and everything is working fine...

I see that. Weird. Was your demo app created in WAB Developer Edition 2.16?

Nope 2.17. When I look at your test sites source code for the widget it is missing line 6 below and that is the crucial piece.

      closeWidget: function() {
          if(this.appConfig.theme.name === 'JewelryBoxTheme'){
            html.addClass(this.map.container.parentNode, 'sideBarHidden');

Oh man. I missed seeing the 2.17 release! I need to get on their notification email list.

Thank you. My test site is working as we'd like now!

I noticed that when I add the popup widget to an app, the AT loses its horizontal scroll bar. Did anyone else notice that?

Nope definitely not seeing that. I just did some testing and could not reproduce that. What theme are you using when you see this?

I'm not seeing that on my test site. We're using the Jewelry Box theme, if that helps you troubleshoot.

THANK YOU @RobertScheitlin__GISP for all your work maintaining this widget! Just ran into tab theme bug and was THRILLED to discover you had already fixed it. Keep up the good work. Your efforts are very much appreciated. 

Robert, do you keep the code for this widget in a repository we can access? Thanks Brian



No. The source code is shared here on the esri community but not on github or anything else.

Thanks for the quick reply.

PopupPanel is released as Apache 2.0, so do you mind if I put it in Github with full attribution? Git is just a deeply ingrained part of my workflow. If you say not to share it, I will keep it in a private repo so no big deal.

FYI this widget came up today because the version installed (2.13) here is now unresponsive (inconsistently) in Chrome 89. It works fine still in Firefox, Edge (89) and Chrome 86. It works on some copies of Chrome 89 (testing all on Windows 10) and not others, it's quite maddening.

Your Live Preview Site works so I think you might have already fixed whatever is causing the problem.


 If you do place on git it will be your version as I will continue to release on the esri community with updates. As far as the Chrome issue the fix is quite simple just open your WAB apps env.js and change the 

var apiVersion = '3.xx';
var apiVersion = '3.35';
apiUrl = 'https://js.arcgis.com/3.xx';
apiUrl = 'https://js.arcgis.com/3.35';

and then clear your browsers cache.

Portal seems intent on hiding the actual WAB files from view. I know where they go when I deploy from WAB, Developer Edition, because I put them there.

I was able to find the C:/ArcGIS/ArcGISPortal/content/items/ folder associated with the app based on its ID but no files. It's quite frustrating. It's opaque. 

Update: I think I get it, the file in content/items/ is just the config.json file and the actual code is all buried in C:/Program Files/ArcGIS/Portal/apps/webappviewer/

Since it is shared among all the apps built in Portal, I can break all of them at the same time!! The power! I wonder if this might not be the time to pry our apps loose from the iron grip of Portal and move it into WABDE... time to make a convincing argument.

@RobertScheitlin__GISP -- is there any mechanism in place to get notifications when Esri does a release of WABDE? It appears that you bump version numbers on your suite of widgets when releases come out, but I randomly have to check the developers.esri.com site to find out if there is a new release.

If it comes out on a calendar basis I suppose I could put a reminder in my calendar.

I could write a scraper and have it check every single day but polling it seems really silly. 🙂

Thanks again --Brian

Good afternoon Robert,

I created a customer web application using Web App Builder (Developer Edition) as of December 2019. I used one of your custom Popup Panel widgets that I believe allowed me to select a location on a map and there was an automatic zoom to extent click event. You can reference this web application (https://gis.miamigov.com/miamizoning/) that had a similar function. For some reason, the automatic zoom to function now longer works and I am trying to retrace my steps. I would like to know which version that you created above best supports that function ? 

I would like to add that popup panel to the following web application (http://cggisw.coralgables.com/zoning/) If there is any insight you can lend me, my team and I would really appreciate it. 

Thank you for your expertise !


The popup panel widget never had an auto zoom to selected feature functionality. Are you asking how to change the code to add that?

Sure I would love to be able to add that feature. My team and I were really confused as to which widget deployed in our custom web app granted us that function. If we can incorporate it in the pop-up panel that would be perfect.


In the Widget.js find the displayPopupContent and make this change:

            this.popupContent.set("content", content);
//Added code
            var evt = new MouseEvent("click", {
              bubbles: false,
              cancelable: true,
              view: window
//end Add

We've been using this widget for years with our Developers edition of WAB, but recently switched to using the built-in WAB in 10.8.1.  We registered the widget as documented by esri.  Working fine except when you have multiple items selected - it shows there are 2 records, but the arrows to navigate aren't showing up anymore.  Any thoughts?  Thanks

@BobWheeler Are there any errors in the browsers web console? I am not a Portal user, so I can not test in that environment.

No errors that I can see.




Version history
Revision #:
1 of 1
Last update:
‎11-17-2015 09:06 AM
Updated by: