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.

[RobertScheitlin__GISP]

Sergio,

   Yes a widget can have a dijit like the Search inside it. But typically you can not add a widget inside another widget.

[SergioCamargo]

Robert, you have a example? , please

[RobertScheitlin__GISP]

There are several out of the box widgets that use the Search dijit that you can use as an example. The Screening widget is one example.

[Joseph_IrwinGunasekaran1]

Thank you Robert

[SergioCamargo]

Robert, 

Do you have a solution or alternative idea?. Robert Scheitlin, GISP your words: " The pop up panel widget does not support showing related records in it contents like the default pop up does."

[RobertScheitlin__GISP]

Not currently.

[Anonymous User]

rscheitlin‌

I am redeploying this and cant seem to find the instructions for where to configure the widget into the folder structure (i.e. where to put the widget, where to change the code, etc.).

Could you attach or direct me to where the instructions are for deploying this into a fresh 2.7 build? Thanks!

[RobertScheitlin__GISP]

Andew,

The official documentation is here:

Custom widget and theme deployment—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Develo... 

All you need to do is copy the PopupPanel folder from the zip to the [install dir]\client\stemapp\widgets folder. Then when creating a new app the popup panel widget will be listed in the choose widget panel.

[Anonymous User]

And will that put it in the 'docked' location on the side of the app rather than be a 'floating' widget?

[RobertScheitlin__GISP]

No, Having it in that location means you need to use the Jewlerybox theme and add it to the jewlerybox drawer.

[Anonymous User]

I knew there was another step.

Excuse my ignorance, but where would I 'add this to the jewelrybox drawer'?

[Anonymous User]

Ignore that! Silly me

[TylerBadertscher]

Hi Robert, great widget! I do have one question regarding why there may be (2) scroll options in the popup. I am displaying a long list of attributes and in the popup and there seems to be 2 scroll features; one for the popup and one for the list of the data. I have attached a picture for reference.

Thank you for the help.

[RobertScheitlin__GISP]

Tyler,

    I have not seen that before. I will have to look into it.

[TylerBadertscher]

Sounds good, thank you Robert. Its not a big issue until its used on mobile. The right slider is the one that scrolls on mobile. Both scroll on desktop. 

[LefterisKoumis]

Hello Robert. 

I noticed that if I use infoWindow the popup widget does not work but when I use the infotempate it does work. Is that intentional?

Thanks.

[RobertScheitlin__GISP]

Yes,

   Yes, the Popup dijit in the JS API is different from the InfowWindow. The maps infoWindow defaults to a popup dijit and not an InfoWindow.

[LefterisKoumis]

Well, that explains it. I have the popup widget installed on the app and it works great. However, I created a widget where users can just click on the map and see a popup of the lat long an other info of the clicked point. It seems that because it is an infowindow is not displayed because of the popup widget, and the popup widget is not displayed because of the infowindow. Any suggestions?

[RobertScheitlin__GISP]

Lefteris,

  you need to use InfoTemplate or PopupTemplate for your widget and then all will play nice together.

[LefterisKoumis]

The workflow is to click on the a location on the map, it will record the lat long of the point, place a graphic at point and display the popup window with point lat long and other info. 

With the InfoTemplate, and Popuptemplate, it takes another click on that point to display the popup. The popup widget works great for features already on the map.

[RobertScheitlin__GISP]

Share your widget in a new post and I will show you how to make it use a template even for what you are doing.

[SteveCacioppo]

I would also be very interested in being able to add/edit features with this widget.

[RobertScheitlin__GISP]

Steve,

  This widget will never support editing. You need to use the edit widget or smart editor widget for editing.

[AnnieCahill]

Hi, is this widget working in v 2.7?  Thanks!

[RobertScheitlin__GISP]

Absolutely.

[WhitneyNewcomb]

Hi Robert, I was wondering if you could help me with something! 

When I select something from the Search box instead of bringing up the Configured Popup in the Popup Panel Widget it brings up the raw values:

Is there any way to change it so that when I select something from the Search results I get the Configured Popup? 

Thank you so much!

[RobertScheitlin__GISP]

Whitney,

   Hmm.. Besides relates this widget should show identical to what the standard esri popup shows. I don't use the search widget much, but are you saying that when not using my widget the standard popup show the correct info and when using it it does not?

[WhitneyNewcomb]

It looks like I'm having similar problems as to what people in this thread were experiencing  https://community.esri.com/thread/170809 

[RobertScheitlin__GISP]

Whitney,

   Are you using WAB 2.7?

[WhitneyNewcomb]

I am using 2.6

Was this fixed in the update?

[RobertScheitlin__GISP]

I think it was in 2.7 but don't hold me to that.

[WhitneyNewcomb]

I'll go ahead and upgrade and get back to you.

Thanks!

[WhitneyNewcomb]

It does not appear to have been fixed from 2.6 to 2.7

[JamesCrandall]

Robert,

I attempted to alter the resetInfoWindo function in the MapManager.js file in an attempt to modify the popup for the Edit widget (ie. I'm using your Popup Widgets "edit" option to open the edit widget.  My customer requirement however is for the attributes of the edit widget to be contained in a panel rather than a callout-popup at the location of the feature being edited.

I understand that this probably has more to do with the Edit widget, not your excellent popup widget, but any tip on which file to tweak to adjust the edit widget popup?

Thanks for all of your work and assistance.

[RobertScheitlin__GISP]

James,

   The Edit widgets popup is a whole other animal. It is basically a AttributeInspector inside the maps popup window and doe not correlate to the PopUp Panel widget much at all.

[Anonymous User]

rscheitlin‌ will you be at Dev Summit? I feel like I owe you a beer or ten  

[RobertScheitlin__GISP]

I will be, but I don't drink. See you there.

[Anonymous User]

Coffee (or another happy-morning-drink) it is!

[JamesCrandall]

Thank you!

I took a quick stab at altering the Edit Widget's default popup window.  I just added the infoWindow.resize after line 322 of the Widget.js file.

this.map.infoWindow.resize(340,820)‍

It's still a "callout" where the popup opens at the location of the feature being edited, but it's a start (at least will alleviate some aggravation of having to scroll so much when modifying many attributes.  Unsure about any negative affects or full performance, just a quick test.

[RobertScheitlin__GISP]

Main issue will be that all the popups in that app will be that size.

[JamesCrandall]

The popup for the Edit widget really needs to be in a panel because most common complaint from users is that the popup covers up the map features.  I think there is a hosted app that does this (Basic Viewer app?) that at least elongates the popup and docks it on the right side of the window without any callout, just as its own panel.

[Anonymous User]

Hey Robert!

Do you have any idea on this one? 

My particular app doesn't have related records, so I am wondering if this is leveraged elsewhere which would require me to keep it.

I deleted all the contents from that file (quick, dirty test) and the app appears to be functioning as expected, but I'm wondering if you know if this function is required elsewhere?

[RobertScheitlin__GISP]

Andrew sorry I am missing the context of your comment.

[Anonymous User]

Oh, I'm sorry -- this comment didn't get nested under Tyler's comment.

I was referring to the console error that the app seems to generate:

This was from your sample site (ArcGIS Web Application ). When clicking on a feature and the widget is engaged, this error gets thrown in the console -- same behavior on my site.

It appears that, in my narrow example, it's kosher to just remove references to that .JS file if there's no known solution at this point. It appears that the RelatedRecordsPopupProjector is only referenced in PopupManager.js

[RobertScheitlin__GISP]

You should be fine then if you do not need related data.

[EricBowman3]

Hi Robert - I'm using WAB 2.7.  Do the related records still work on the pop-panel?  I may be missing something, but not sure.   

Thanks, 

Eric

[RobertScheitlin__GISP]

Eric,

   Related records are shown in the default popup in WAB (due to some custom magic in the hood) but that has never been compatible with my popup panel widget. So no relates will not be shown in my widget.

[BobWheeler]

This functionality is great - was just asking about it at the Dev Summit.  Hopefully esri sees the benefit this widget provides and incorporates.  Thanks Robert! 

[TylerBadertscher]

Any update on the slider issue?

[RobertScheitlin__GISP]

Sorry none yet.