Popup Panel Widget Version 2.17 - 9/1/2020

[#1]

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.

[DanielChantlos1]

Glad to see the new auto-close configuration for v2.1.1. Thanks Robert!

[PatrickMcKinney1]

We are having an issue with the popup panel not loading on mobile devices. We are using v2.0.1 of the plugin and v 2.0 of WAB.

We have this issue with android devices and the Chrome dev tools phone emulator.

[RobertScheitlin__GISP]

Patrick,

  I just tested on my Android Tablet using Chrome 4.2 and it worked fine.

[DanielChantlos1]

Robert,

Do you still have plans to implement the use of related records for this widget?

[RobertScheitlin__GISP]

Daniel,

  I do have it on a todo list.

[PatrickMcKinney1]

Do you have any tips on how we can test to see what is going on?

I know we're using the Chrome51 patch found at Web AppBuilder 2.0 patch for Chrome51

The patch allows us to run the app builder using Chrome.  I guess at this point it could be any number of things, including the tax parcels layer we are querying against.

[RobertScheitlin__GISP]

Patrick,

  So the popup panel widget is not working for any layer on an android device, but is working on apple or desktop browsers?

[RobertScheitlin__GISP]

Daniel,

  I am confused. What does the data extract widget have to d with the popup panel widget? I am missing the connection.

[DanielChantlos1]

(Deleted post) I was mistaken thinking other widgets were opening with Popup Panel. Maybe you can still help me out...how could I change the window size of a specific widget upon opening in LaunchPad theme?

[RobertScheitlin__GISP]

See this thread:

Layer List auto start location change

[NicholasBarger]

I'm having a small problem with WAB2.1.  I have the popup widget in the side panel of the jewelry box theme.  For some reason the arrows that appear when you have multiple popups are not visible.  They are there and work but it is just white space.  You need to hunt around to find them.  Any ideas?

[RobertScheitlin__GISP]

Nick,

  Are you using version 1.2.0.1?

[NicholasBarger]

I figured this out...it was a line that I changed.  I was changing all of my apps to https and the popup widget was breaking that.  So I reset the path for the images for the buttons.  I think I'm good.  More specifically I downloaded the images for the buttons from the internet and stored them within my network so they could also be https locations.  Then I went into the css/style.css of the popup widget folder and changed the location of the image file.  I had moved that file to another location.

[PatrickMcKinney1]

There is only 1 layer set for the popup, the tax parcels.  It does work on desktop PC's.  I'll have to check my iPad mini at home.

[RobertScheitlin__GISP]

Patrick,

   I would enable popups for another layer then for testing.

[GregNewton]

Hi Robert,

I read through the comments, and it seems the popup panels are supposed to have the same functions (plus additional ones) as the default popups.  One thing I found missing was the "Set as Incident" link when selecting a feature with the Situation Awareness widget.  This is useful for setting a buffer on specific feature rather than having to draw a boundary.  Have you encountered this issue or figured out any workarounds?

Thanks,

Greg

[RobertScheitlin__GISP]

Greg,

   I am not a Situation Awareness widget user so I was not aware that it added a "Set as Incident" action. I will have to find some time to see if I can ad this to the Popup Panel widget as well.

[RodWoodfordOld]

cheers Robert, it would be a useful addition.

Rod

[BlakeTerhune]

I'm using the Popup Panel widget (version 2.1.1) in Web AppBuilder 2.1 with the Jewelry Box theme and adding the widget to the left side pane. In the web map, I've added a layer from the web that has parcels (among other things). The parcels layer also has four relationships published with the map service. In Web AppBuilder, when I click the first parcel, the popup panel widget is always empty but every parcel I click on after that shows the attributes correctly. Any ideas why the first click is always a dud?

[RobertScheitlin__GISP]

Blake,

   That is strange. I can not get the Live Preview Site to do that or any of my other sites that use the popup panel. Can you tell me if there is an error in the browsers web console?

[BlakeTerhune]

I think it has to do with the relationship that it participates in. I originally had M:N and I figured that was messing it up but then I tried 1:M and it still had the same behavior. If I don't use the related data, the popup panel works fine on the first click. Here's what the Chrome console logged on the first click.

init.js:1945 esri.layers.FeatureLayer: unable to find 'relationships/0/FULL_ADDRESS' field in the layer 'fields' information [url: http://servername:6080/arcgis/rest/services/WAM/relTest/MapServer/1]
init.js:113 TypeError: Cannot read property 'relationships' of undefined(…) "TypeError: Cannot read property 'relationships' of undefined
at _queryRelatedLayer (http://js.arcgis.com/3.17/init.js:2065:199)
at _queryRelatedLayers (http://js.arcgis.com/3.17/init.js:2064:447)
at _getRelatedRecords (http://js.arcgis.com/3.17/init.js:2061:378)
at getComponents (http://js.arcgis.com/3.17/init.js:2045:367)
at startup (http://js.arcgis.com/3.17/init.js:2069:73)
at http://js.arcgis.com/3.17/init.js:412:229
at Object.forEach (http://js.arcgis.com/3.17/init.js:70:383)
at _startChildren (http://js.arcgis.com/3.17/init.js:412:132)
at http://js.arcgis.com/3.17/init.js:419:460
at h (http://js.arcgis.com/3.17/init.js:107:279)
----------------------------------------
rejected at a (http://js.arcgis.com/3.17/init.js:108:174)
at h (http://js.arcgis.com/3.17/init.js:107:438)
at then.c.then (http://js.arcgis.com/3.17/init.js:110:152)
at http://js.arcgis.com/3.17/init.js:131:128
at _setContent (http://js.arcgis.com/3.17/init.js:419:370)
at _setContentAttr (http://js.arcgis.com/3.17/init.js:414:138)
at set (http://js.arcgis.com/3.17/init.js:355:304)
at displayPopupContent (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:293:31)
at .<anonymous> (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:177:16)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:63:209)
----------------------------------------
Error
at then.c.then (http://js.arcgis.com/3.17/init.js:110:97)
at http://js.arcgis.com/3.17/init.js:131:128
at _setContent (http://js.arcgis.com/3.17/init.js:419:370)
at _setContentAttr (http://js.arcgis.com/3.17/init.js:414:138)
at set (http://js.arcgis.com/3.17/init.js:355:304)
at displayPopupContent (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:293:31)
at .<anonymous> (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:177:16)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:63:209)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:643:121)
at c [as onSetFeatures] (http://js.arcgis.com/3.17/init.js:119:79)"m @ init.js:113(anonymous function) @ init.js:114filter @ init.js:71h @ init.js:114
init.js:113 TypeError: Cannot read property 'relationships' of undefined(…) "TypeError: Cannot read property 'relationships' of undefined
at _queryRelatedLayer (http://js.arcgis.com/3.17/init.js:2065:199)
at _queryRelatedLayers (http://js.arcgis.com/3.17/init.js:2064:447)
at _getRelatedRecords (http://js.arcgis.com/3.17/init.js:2061:378)
at getComponents (http://js.arcgis.com/3.17/init.js:2045:367)
at startup (http://js.arcgis.com/3.17/init.js:2069:73)
at http://js.arcgis.com/3.17/init.js:412:229
at Object.forEach (http://js.arcgis.com/3.17/init.js:70:383)
at _startChildren (http://js.arcgis.com/3.17/init.js:412:132)
at http://js.arcgis.com/3.17/init.js:419:460
at h (http://js.arcgis.com/3.17/init.js:107:279)
----------------------------------------
rejected at a (http://js.arcgis.com/3.17/init.js:108:174)
at h (http://js.arcgis.com/3.17/init.js:107:438)
at then.c.then (http://js.arcgis.com/3.17/init.js:110:152)
at http://js.arcgis.com/3.17/init.js:131:128
at _setContent (http://js.arcgis.com/3.17/init.js:419:370)
at _setContentAttr (http://js.arcgis.com/3.17/init.js:414:138)
at set (http://js.arcgis.com/3.17/init.js:355:304)
at displayPopupContent (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:293:31)
at .<anonymous> (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:149:16)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:63:209)
----------------------------------------
Error
at then.c.then (http://js.arcgis.com/3.17/init.js:110:97)
at http://js.arcgis.com/3.17/init.js:131:128
at _setContent (http://js.arcgis.com/3.17/init.js:419:370)
at _setContentAttr (http://js.arcgis.com/3.17/init.js:414:138)
at set (http://js.arcgis.com/3.17/init.js:355:304)
at displayPopupContent (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:293:31)
at .<anonymous> (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:149:16)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:63:209)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:643:121)
at c [as onSelectionChange] (http://js.arcgis.com/3.17/init.js:119:79)"m @ init.js:113(anonymous function) @ init.js:114filter @ init.js:71h @ init.js:114
init.js:113 TypeError: Cannot read property 'relationships' of undefined(…) "TypeError: Cannot read property 'relationships' of undefined
at _queryRelatedLayer (http://js.arcgis.com/3.17/init.js:2065:199)
at _queryRelatedLayers (http://js.arcgis.com/3.17/init.js:2064:447)
at _getRelatedRecords (http://js.arcgis.com/3.17/init.js:2061:378)
at getComponents (http://js.arcgis.com/3.17/init.js:2045:367)
at startup (http://js.arcgis.com/3.17/init.js:2069:73)
at http://js.arcgis.com/3.17/init.js:412:229
at Object.forEach (http://js.arcgis.com/3.17/init.js:70:383)
at _startChildren (http://js.arcgis.com/3.17/init.js:412:132)
at http://js.arcgis.com/3.17/init.js:419:460
at h (http://js.arcgis.com/3.17/init.js:107:279)
----------------------------------------
rejected at a (http://js.arcgis.com/3.17/init.js:108:174)
at h (http://js.arcgis.com/3.17/init.js:107:438)
at then.c.then (http://js.arcgis.com/3.17/init.js:110:152)
at http://js.arcgis.com/3.17/init.js:131:128
at _setContent (http://js.arcgis.com/3.17/init.js:419:370)
at _setContentAttr (http://js.arcgis.com/3.17/init.js:414:138)
at set (http://js.arcgis.com/3.17/init.js:355:304)
at displayPopupContent (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:293:31)
at .<anonymous> (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:149:16)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:63:209)
----------------------------------------
Error
at then.c.then (http://js.arcgis.com/3.17/init.js:110:97)
at http://js.arcgis.com/3.17/init.js:131:128
at _setContent (http://js.arcgis.com/3.17/init.js:419:370)
at _setContentAttr (http://js.arcgis.com/3.17/init.js:414:138)
at set (http://js.arcgis.com/3.17/init.js:355:304)
at displayPopupContent (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:293:31)
at .<anonymous> (http://servername:3344/webappbuilder/apps/3/widgets/PopupPanel/Widget.js?wab_dv=2.1:149:16)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:63:209)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:643:121)
at c [as onSelectionChange] (http://js.arcgis.com/3.17/init.js:119:79)"m @ init.js:113(anonymous function) @ init.js:114filter @ init.js:71h @ init.js:114
init.js:113 TypeError: Cannot read property 'NLS_prevMedia' of null(…) "TypeError: Cannot read property 'NLS_prevMedia' of null
at _handleComponentsSuccess (http://js.arcgis.com/3.17/init.js:2077:356)
at http://js.arcgis.com/3.17/init.js:63:209
at h (http://js.arcgis.com/3.17/init.js:107:279)
at k (http://js.arcgis.com/3.17/init.js:107:205)
at g.resolve (http://js.arcgis.com/3.17/init.js:109:280)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:2045:450)
at http://js.arcgis.com/3.17/init.js:63:209
at h (http://js.arcgis.com/3.17/init.js:107:279)
at k (http://js.arcgis.com/3.17/init.js:107:205)
at g.resolve (http://js.arcgis.com/3.17/init.js:109:280)
----------------------------------------
rejected at a (http://js.arcgis.com/3.17/init.js:108:174)
at h (http://js.arcgis.com/3.17/init.js:107:438)
at k (http://js.arcgis.com/3.17/init.js:107:205)
at g.resolve (http://js.arcgis.com/3.17/init.js:109:280)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:2045:450)
at http://js.arcgis.com/3.17/init.js:63:209
at h (http://js.arcgis.com/3.17/init.js:107:279)
at k (http://js.arcgis.com/3.17/init.js:107:205)
at g.resolve (http://js.arcgis.com/3.17/init.js:109:280)
at .<anonymous> (http://js.arcgis.com/3.17/init.js:2062:243)
----------------------------------------
Error
at then.c.then (http://js.arcgis.com/3.17/init.js:110:97)
at startup (http://js.arcgis.com/3.17/init.js:2069:101)
at http://js.arcgis.com/3.17/init.js:412:229
at Object.forEach (http://js.arcgis.com/3.17/init.js:70:383)
at _startChildren (http://js.arcgis.com/3.17/init.js:412:132)
at http://js.arcgis.com/3.17/init.js:419:460
at h (http://js.arcgis.com/3.17/init.js:107:279)
at then.c.then (http://js.arcgis.com/3.17/init.js:110:152)
at http://js.arcgis.com/3.17/init.js:131:128
at _setContent (http://js.arcgis.com/3.17/init.js:419:370)"m @ init.js:113(anonymous function) @ init.js:114filter @ init.js:71h @ init.js:114

[RobertScheitlin__GISP]

Blake,

   I would bet that you would find the same issue with the standard popup (i.e. not using the popup panel widget). I don't having anything in my code that works with relates so it is an API or WAB core issue.

[LesiMai3]

Hi Robert,

Is there a way to automatically switch to the popup panel when the user clicks on a map with other widgets open?

Thank you!

Lesi

[RobertScheitlin__GISP]

Lesi,

  Sure use the JewleryBox theme or add the Popup Panel widget to the header controller if the widgets you want to use consecutively are on screen widgets.

[RickeyFight]

rscheitlin, 

I am using the launchpad theme. The popup does not display any information in the popup panel on mobile devices. 

You can view the affect in chrome if you turn on the mobile view or look at it on your phone. It does work on my iPad though. 

ArcGIS Web Application 

Any help would be appreciated! 

[RobertScheitlin__GISP]

Rickey,

   I can't seem to reproduce this issue in WAB 2.1 and PopupPanel 2.1.1. You should probably upgrade.

[RickeyFight]

That seems to have fixed it,

Thank you! 

[LesiMai3]

Hi Robert,

Thank you for sharing this great widget. 

I placed the widget on the left pane of the Jewelry Box theme and configured it to be closed when the app initially launches. But when I tested it, I can see two blank panels flashing (one on the left and the other on the right) for about 1-2 seconds before they close up as expected. Is there a way to build a promise somewhere so that the end users won't see the flashing of panels?

Thank you!

Lesi

[RobertScheitlin__GISP]

Less,

  Do you see the same issue in my live preview site? No there is not a promise that can be used for that purpose.

[LesiMai3]

Hi Robert,

Yes, I do see the same issue on your live preview site. Are there any workarounds to that?

Thank you,

Lesi

[RobertScheitlin__GISP]

Lesi,

  No nothing specific to this widget. The fact that the theme automatically has the panel open is associated with the theme and not my widget. I added the ability for my widget to close the panel at startup as workaround. You would have to dig into the themes code to do any better, but that is not specific to this widget and any questions about that should be started in a new thread.

[niekvan_den_berg]

Hello Robert,

The pop-up panel is a great widget, thanks for sharing it.

Have you considered showing the results in an accordion style instead?

Some users might overlook the second, third and fourth layer in the pop-up sidepanel.

[RobertScheitlin__GISP]

No I have not as that would not be very friendly or optimized for mobile users

[deleted-user-0W0-oLHxDjCX]

Is there a way to disable the default portal pop-up configuration and use another pop-up implementation? Is lateral pop-up another implementation of default pop-up event in WAB?

[RobertScheitlin__GISP]

Ezequias,

   The default is if there is a popup configured in the web map for the layer then that is the configuration that will be used for that layer in WAB.

[deleted-user-0W0-oLHxDjCX]

But if I want to make the application switch showing some information to one user and another different to another (without creating another service layer)?

[RobertScheitlin__GISP]

Ezequias,

   There is nothing in this widget or WAB to handle that scenario.

[deleted-user-0W0-oLHxDjCX]

We are with an idea of redirect the object generated by config.json and make some modifications on popUpInfo on-the-fly. We think that it could work.

[RobertScheitlin__GISP]

That may be possible. Good luck.

[KimSundeen1]

Will this popup panel be updated for WAB version 2.2?

[RobertScheitlin__GISP]

The current version will work in 2.2 just fine.

[KimSundeen1]

It definitely works great still!

Kim (Ness) Sundeen

Sent from my iPhone

[KevinMilton]

Robert,

I am using an Https. Do i need to configure the app in any way, or will it work as is?

Thank you,

Kevin

[RobertScheitlin__GISP]

Kevin,

   The widget will work fine with https

[KevinMilton]

Robert,

When i add this widget to web app builder, the app spins up but never actually works? Is this something you have come across before? Do you have any suggestions on how to resolve this issue? Do you think it might be helpful to try your newest version? I am using web app builder developer edition version 2.0. Do I need to be using a different widget for that particular version? Any help is appreciated.

Thank you,

Kevin

[RobertScheitlin__GISP]

Kevin,

   You need to ensure you are using version 2.0 of the widget if you are using version 2.0 of WAB

[AnthonyDaniels]

Robert,

What do I need to add to the config file of the app to use the popup panel.

Thanks for your hard work

[RobertScheitlin__GISP]

Anthony,

   You don't have to do any thing manually in the config. Once you have added the widget to the stemapp widgets folder it will be a choose in the choose widget dialog.

[AnthonyDaniels]

Thanks. Do you have a shortcut to how to configure it. I am trying to use

it with LocalLayer widget

On Mon, Feb 27, 2017 at 12:36 PM, Robert Scheitlin, GISP <geonet@esri.com>

[RobertScheitlin__GISP]

Anthony,

   The popup panel widget has no configuration. It just takes the place of the standard popup. The use of LL widget does not affect the use of this widget.