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.

[KrisMilburn]

Hi Robert, this is what I'm getting in Chrome. Same behavior of the widget.

panel [widgets_PopupPanel_Widget_45_panel] created.

init.js:36 GET https://secureapps.countygp.ab.ca/AGOLMaps/AgricultureWeedInspectors/jimu.js/dijit/PopupMenu.js?wab_... 404 (Not Found)

init.js:37 Error: scriptError

    at c (init.js:11)

    at HTMLScriptElement.<anonymous> (init.js:35)

src: dojoLoader

init.js:37 info: (2) ["/AGOLMaps/AgricultureWeedInspectors/jimu.js/dijit/PopupMenu.js?wab_dv=2.7", Event]

[DanielChantlos1]

Robert,

For a layer with photos attached; would it be possible for the Popup Panel to display a preview of the photo when that feature is selected (instead of just a hyperlink)?

[RobertScheitlin__GISP]

Daniel,

   If you configure the popup in the web map to use mediainfos for that field then yes

[CraigPrisland2]

Robert,

Thank for developing this widget as well as all of the widgets that you build/maintain.  They have been extremely helpful in our apps.  I did have one question regarding the Popup Panel widget.  At startup, when I initially click on a feature (or search for it using the Search widget), the Popup panel is empty (the following screenshot is an example of this).  If I click on this same feature or a different one, it populates correctly and works great for the rest of the session.  This issue only appears on the very first selection.  Would you have any ideas as to why this is occurring?  We are using WAB Dev 2.6.

Thanks in advance,

Craig

[RobertScheitlin__GISP]

Kristen,

   The strange thing is, no where in the popup panels code is there a reference to jimu.js/dijit/PopupMenu.js...

[RobertScheitlin__GISP]

Craig,

   Strange I just testing using the Plateau Theme, WAB 2.7 and a fresh download of this widget and I did not have that issue. You did set the Popup Panel to be open at start right?

[KrisMilburn]

Thanks for taking a look Robert! I appreciate it.

I will keep trying and update if I can find a solution. I’m also going to encourage our team to update WAB Developer Edition to 2.8

[CraigPrisland2]

Robert,

I am using WAB 2.6.  I'm not sure if that makes any difference.  Yes, I did set the Popup Panel to be open at start.  The strange thing is that we have multiple WAB apps using the Plateau theme and this widget and only one of them is having this issue.  I'm currently looking into if I notice any patterns or differences between those apps that work and the one that doesn't.

Thanks,

Craig

[RobertScheitlin__GISP]

Craig,

  Check your browsers web console for any errors.

[CraigPrisland2]

I will take a look at the web console Robert, thanks. 

Also, I did notice that only one layer is causing this issue and it has related tables tied to it.  Could the related tables be the issue where I need to click the feature twice at start up?

Thanks again,

Craig

[RobertScheitlin__GISP]

Craig,

   I am not aware of any issue there. Does the browsers web console show any errors?

[CraigPrisland2]

Robert,

I'm getting various errors.  The following screenshots are few of them:

Craig

[RobertScheitlin__GISP]

Craig,

  So it looks like there is an issue querying related data but those errors are not coming from my widget. Looks like a WAB error when querying related data. In order to report this to esri tech support you will have to NOT use my popup panel (just use the standard popup) and reproduce these error then they will be able to support you with this issue.

[CraigPrisland2]

Ok, thanks again for the assistance Robert.  I appreciate it.

[CraigPrisland2]

Robert,

After I removed your Popup Panel widget and used the Esri out of the box popup, the issue that I was experiencing before did not occur and I can not reproduce this issue.  The popup is coming up correctly on the first click.

Craig

[RobertScheitlin__GISP]

I am not sure what is going on then as those errors are not originating in my widgets code. 

[DrewMerrill1]

Hey Robert,

This widget is great.  Are there any plans to add a print function to the popup panel?

[RobertScheitlin__GISP]

Drew,

   Not currently.

[DrewMerrill1]

Ok thanks.  Is it possible to configure the print widget to print only data from a popup panel? I am working with WAB for AGOL (developer) and do not have ArcGIS server.

[RobertScheitlin__GISP]

Drew,

   Not that I am aware of. Have you seen the print popup blog?

Printing Popups from Web Application 

[DrewMerrill1]

Thanks again. I read through the blog. It seems like every solution requires ArcServer and the ability to publish geoprocessing tools. I will have to come up with a different approach.

[TraceyGray]

Don

Did you ever manage to get related records to show up in the pop-up window? That is exactly what I'm trying to achieve in the Launchpad Theme

[PatrickMcKinney1]

I've discovered a mixed content issue with this widget. I'm using Web AppBuilder 2.8 and Jewelry Box Theme.  A test site is available at Property Mapper.

Whenever, a feature is selected, and the popup opens, the following resource is loaded over http:  http://js.arcgis.com/3.15/esri/dijit/images/popup.png.

Not sure if this is an issue related to the Popup Panel widget or with WAB 2.8.

Any idea how to fix this issue? I really don't want a mixed content issue occurring when we push these changes to our live site.

[PatrickMcKinney1]

I discovered an odd behavior between the popup panel and the header widgets on small screens for the Jewelry Box Theme.  When the popup panel is open, the header widgets group (a square of buttons) appears very small. You cannot close the popup panel unless you press on the tiny square and hope that a widget opens.  If the popup panel is closed, the header widgets group appears the normal size.

[RobertScheitlin__GISP]

Patrick,

  This is a Jewelry box theme bug and needs to be reported to esri tech support.

[PatrickMcKinney1]

Thanks for the heads up.  If I get any meaningful resolution, I'll post back here for reference for others.

[PatrickMcKinney1]

The HTTP call to the image comes from line 36 of the widget/sPopupPanel/css/style.css file:

.titleButton {
 float: right;
 cursor: pointer;
 background: transparent url("http://js.arcgis.com/3.15/esri/dijit/images/popup.png") no-repeat scroll 0% 0%;
 margin:0 4px
}‍‍‍‍‍‍

I would make the call as either "https://js.arcgis.com/3.15/esri/dijit/images/popup.png" or "//js.arcgis.com/3.15/esri/dijit/images/popup.png".  As written, unless a user manually updates this line, using the popup panel with HTTPS protocol will always result in mixed content.

[RobertScheitlin__GISP]

Patrick,

   Thanks for the info. I will update the url to not have the protocol in the next release and this will fix the mixed content issue.

[Ursu_Lacramioara]

Hi Robert,

I prefer to use the Popup Panel widget instead of the Select widget but once a layer is created the labels are not preserved.

 Also. it will be great if I can select more than one record.

Thanks!

[LouiePadilla]

Hi Robert,

Right now i have the attachments(4-5 photos) as links, we would like to show them in the pop up but our alternative is to have them open in a new window. How could I modify the popup attachments so that when I click on it, it will run a javascript to open a new window with a certain size instead of a target=_blank or a new tab? I've been trying to look inside the web app builder package that was downloaded from AGOL and couldn't find any "a href" elements that's created when showing the attachments. I found dojoattachpoint and noticed it looks like that's what's being used to create the attachments but that's the closest I got.

I'm open to any recommendations on this 

Thank you

[RobertScheitlin__GISP]

Louie,

   That sort of customization is not possible using the AGOL version of a WAB App.

[LouiePadilla]

Got it! So if I switch to the developer edition, what or where should I be looking in order to make that change?

Thank you,

[RobertScheitlin__GISP]

Louie,

  So are they attachments or links? Can you provide a screenshot of what this looks like in the popup?

[LouiePadilla]

Robert,

I have the web map set to show the attachments as links.

Web Map

Web App

[RobertScheitlin__GISP]

Louie,

   It would be a bit of work but in the PopupPanels Widget.js file you can find the displayPopupContent function and in there you will find this line:

this.popupContent.set("content", content);‍

You would have to search through the content objects innerHTML property and find the anchor links in the html and replace them with a call to some function that would open the href in a new window instead.

[CrystalCowardin]

I'm very very new to the Developer edition.  I added my Popup Panel widget folder to the correct location and can see it in the list.  When I select it all, I get is this box and can't do anything else.  Any help is appreciated.  Thanks

[RobertScheitlin__GISP]

Hmm.. Hard to tell where you went wrong. Can you check the web console for errors and post a screen shot of them?

[CrystalCowardin]

This is the only line I get when I select the widget

[RobertScheitlin__GISP]

Crystal,

   That is the command line window. I am asking about your browsers web console (you can press F12to get there).

[CrystalCowardin]

Sorry, I'm pretty new at this.

[RobertScheitlin__GISP]

Crystal,

   So have you added a custom widget called copywidget?

[CrystalCowardin]

I think I found the problem. I copied the PopupPanel widget to the wrong folder. It seems to be working now that I put it in the stemapp folder.  Sorry to bother you about that. Thanks for the help!

[LefterisKoumis]

Does the widget works on the Billboard theme? I placed the popup panel widget in the widgets folder and the uri under the widgetOnScreen, but no popups when I click on feature.Thanks

[RobertScheitlin__GISP]

Lefteris,

   Sure it does. You need to set it to open at start and you will be good to go.

[LefterisKoumis]

Despite the setting to close at widget startup, it does appear for a sec and then it vanishes. When I click on a feature, it doesn't come up.

I am using v2.8

In the config.json

"widgetOnScreen": {
---------
---------

 {
        "uri": "widgets/PopupPanel/Widget",
        "id": "widgets_PopupPanel_Widget_35",
        "name": "PopupPanel",
        "version": "2.6",
        "config": "configs/PopupPanel/config_widgets_PopupPanel_Widget_35.json",
        "position": {
          "relativeTo": "map"
        },
        "openAtStart": true
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

in the config/PopupPanel/config....

{
  "closeAtStart": true,
  "closeOnClear": true,
  "allowExport": true,
  "actionMenuPos": "top"
}‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Lefteris,

  I had just tested this in WAB 2.9 using the billboard theme when I made my last reply and it worked flawlessly... Is there any error in your browsers console?

[LefterisKoumis]

No, no errors. See above when I referesh a new app with only popuppanel widget.

I get a confirmation that is created. By the way I use the v. 2.8 of WAB. Don't know if there is a difference.

widget [widgets/PopupPanel/Widget] created.

[SvivaManager]

Hi Robert Scheitlin, GISP, 

Thanks again for the great work with that widget!

I'm interested with customizing the window content but I found it more complicated than expected..

Is it possible to add a button / link within the popup window that turns on a different layer + changes the selection to a different feature? (run a query task on another layer)

I tried implementing a javascript snippet in the configurations of the popup window through the web map but I couldn't see how i can select other layers when im in the scope of the window popup.. I assume that manipulating the displayed data of the popup requires a cusome template of the popup window? or can you think of a better way of doing this?

Regards,

Shay.

[RobertScheitlin__GISP]

Lefteris,

  When you click on the map and the popup does not show then check the console for errors.

[RobertScheitlin__GISP]

Shay,

   That type of workflow is not suited for the popup. You could make that work in a Popup FeatureAction maybe but I am not sure that is a good fit either.