Popup Panel Widget Version 2.17 - 9/1/2020

267312
584
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)
Attachments
Comments

Adam,

 Seems more like a Search widget issue but the first thing I would try is version 2.11 of WAB since you are on 2.6 and a lot has happened since then.

Hey Robert,

Love this widget and we use this with all of our applications! My development skills are still a work in progress, but curious how difficult it would be to add a a button for a transparency slider on the popup window?

We have an application that you lets you add georeferenced maps to the "Map", and to control transparency, the user has to go to the "Layer List" widget to adjust the transparency. We are looking to add that function to the pop-up window to help make that functionality easier to use. I took a screenshot of this same functionality using the CMV template, but have been having trouble matching this using the WAB template.

Curious if you had any thoughts or suggestions on this?

Chris,

  This something I could probably assist with but you need to start a new question for this in the Web AppBuilder Custom Widgets‌ Space

Hi Robert,

I'm using it without side panel, but like a traditional panel on screen instead.

Do you have any ideas to prevent showing popup when loading the widget for the first time?

Your application does so also.

When widget is loaded for the first time it appears for a while and disappears suddenly. 

Is it possible to prevent this showing?

Thanks, 

Gianni

Gianni,

   No. The panel that the widget resides in is not something I have control over in my widgets code. So the panel is opened and it then starts up the widget code.

Thanks for the answer.

And Is there anything I can do in root files (general config.json, main.js,

and so on).

I've tried to set initial display:none and after set it to block, but the

behaviour is something not stable.

Can you suggest me some workaround?

Thanks

Il mer 1 mag 2019, 14:42 Robert Scheitlin, GISP <geonet@esri.com> ha

scritto:

GeoNet <https://community.esri.com/?et=watches.email.document_comment>

Popup Panel Widget Version 2.11 - 02/06/19

new comment by Robert Scheitlin, GISP

<https://community.esri.com/people/rscheitlin?et=watches.email.document_comment> View

all comments on this document

<https://community.esri.com/docs/DOC-7355-popup-panel-widget-version-211-020619?commentID=72913&et=watches.email.document_comment#comment-72913>

HI Robert,

Nice widget.

One issue is the WAB dashboard theme has light and dark options.  Your widget is coded to reference the light arrows from the popup.png file - so these disappear when using the light option.  We hosted a custom copy of the popup.png with coloured buttons to solve this. 

Can you catch this and switch to the dark arrows if a user selects the light dashboard theme? 

Regards,

Marc

Marc,

  Thanks for the info. I will look into this.

Robert Scheitlin, GISP

Hi Robert,

Just wanted to thank you for your work on this widget. It allowed us to create the user experience we envisioned. We were able to add to to our application and customize it for our needs. 

https://maps.knoxmpc.org/groundbreakers/

Thanks again,

-Nick

Hi Robert,

It seems like this pop up tool doesn't work on our App. Once added this widget, there is no information shown on the pop-up panel. Any idea?

Thanks

Kim

Kim,

   What version of WAB Developer or Portal are you using?

Hi Robert,

We are using WAB 2.12 and ArcGIS Portal 10.6.1

It seems like this widget doesn't work on Tab Theme. Our Apps are all using Tab Theme. We tried using same Web Map but different themes and found only Tab Theme was not working properly. 

Thanks

Kim

Kim,

   It is likely the custom theme then. Are there any errors in the browsers web console?

Hi Robert,

Here is the error message in the web console:

We still received error message even using the existing ArcGIS Portal Tab Theme:

Kim,

   I have no issue using the Popup Panel Widget in WAB 2.12 and the tab theme as shown in this screenshot...

Hi Robert,

Thanks for the prompt reply. 

If the popup panel added to Sidebar Controller, it works without issue.

If added to the Tool Bar, however, we received error message:

Kim,

  OK. I never expected someone to use the Tab Theme and not place the widget in the sidebar controller. The fix is simple though (changes are lines 16 - 19):

      displayPopupContent: function (feature) {
        if (feature) {
          if(this.inPanel){
            if(this.appConfig.theme.name === 'JewelryBoxTheme'){
              PanelManager.getInstance().maximizePanel(this.inPanel);
            }else if(this.appConfig.theme.name === 'TabTheme') {
              var sbc = WidgetManager.getInstance().getWidgetsByName("SidebarController")[0];
              var configs = sbc.getAllConfigs();
              var tIndex;
              array.some(configs, function(g, index) {
                if(g.name === 'PopupPanel'){
                  tIndex = index;
                  return true;
                }
              })
              if(tIndex){
                sbc.selectTab(tIndex);
                sbc._resizeToMax();
              }
            }else{
              PanelManager.getInstance().normalizePanel(this.inPanel);
            }
          }else{
            WidgetManager.getInstance().triggerWidgetOpen(this.id);
          }
...

Hi Robert,

Problem solved. Thanks for your help.

The reason we don't want to add it in sidebar controller is we already have many widgets in there. We also found another problem was if added the popup widget in the first four slots, it works fine (Image 1). Added in fifth slot, we need to click Popup Panel icon again to see the panel (Image 2). Any other slots after fifth, the widget is not working and with error in web console (Image 3). 

Kim,

  OK, obviously I did not do enough testing with the tab theme. Here is the fix for the popup panel being inside the "more tab":

      displayPopupContent: function (feature) {
        if (feature) {
          if(this.inPanel){
            if(this.appConfig.theme.name === 'JewelryBoxTheme'){
              PanelManager.getInstance().maximizePanel(this.inPanel);
            }else if(this.appConfig.theme.name === 'TabTheme') {
              var sbc = WidgetManager.getInstance().getWidgetsByName("SidebarController")[0];
              var configs = sbc.getAllConfigs();
              var tIndex;
              array.some(configs, function(g, index) {
                if(g.name === 'PopupPanel'){
                  tIndex = index;
                  return true;
                }
              })
              if(tIndex){
                if(tIndex > 4){
                  var tab = sbc.tabs[4];
                  var groups = tab.config.groups
                  array.some(groups, function(g, index) {
                    if(g.name === 'PopupPanel'){
                      sbc._onOtherGroupClick(g);
                      return true;
                    }
                  });
                }else{
                  sbc.selectTab(tIndex);
                }
                sbc._resizeToMax();
              }
            }else{
              PanelManager.getInstance().normalizePanel(this.inPanel);
            }
          }else{
            WidgetManager.getInstance().triggerWidgetOpen(this.id);
          }
...

Marc,

  Version 2.12 addresses the DashBoard Theme issue.

Thanks Robert!

Robert

Can I adjust the extent for the ‘Zoom To’ function?

Thanks

Keith

Keith,

   No the zoom to method is internal to the API. I just call 

popup._zoomToFeature(e)

Hi Robert,

This widget is awesome, and my organization has been using it for some time.  One thing that we run into, though, is that if you click a feature that is very close to the edge of your screen on the right, the feature will get pushed out of the map view when you click on it and the popup comes up.  I've included pictures below using the Live Preview Site to demonstrate the issue.  Is it possible for the web map view to center on the feature you click rather than push it to the side and possibly out of the map view?

Clicked on the Emergency Siren at  Memorial Auditorium Parking lot circled in red below:

After clicking on feature, the side panel pop-up shifts the map view so the feature is no long within the view:

Olivia,

   I must have re-introduced this bug. Because I had fixed that issue in a previous release. I will work on getting this fixed again.

Robert Scheitlin, GISP

Hi.  Is it possible to disable the Zoom to and the Clear selected links in the ActionPane or ActionList?  I've tried do it via commenting lines 13-16 or 14-15 in widget.html and lines 113-115  in widget.js, but both of those attempts kicked back a load error for the widget.

Below is an image showing the problem I'm trying to avoid.  The Layer List widget is in the Header Controller while the Popup Panel is On Screen.  You can see both are open, with the Layer List 'over' the Popup Panel, but the Zoom to and three dots in the Panel's Action area bleed through.  Is there a transparency setting of the on-screen widgets I need to adjust?

I'm using 2.12.

Image shows Layer List widget over the Popup Panel widget but Panel stuff still shows through the Layer List.

Adam,

   You can try adding this rule to the style.css in the widget folder:

.esriPopup, .esriPopupMobile, .esriMobileNavigationBar, .esriMobilePopupInfoView {
    z-index: 5;
}‍‍‍

It is actually not specific to my widget. If you place any other onscreen widget behind the layerlist and then make the layerlist appear in front again you will see the other widgets resize handle (through the LayerList) as well.

Thanks for the information and tip, Robert.  That works nicely.

Hi Robert, I just wanted to start by saying thanks so much for this great widget.

I am actually circling back around to an issue that craigp22 had June 5, 2018 (Page 15 of comments). I am having the same issue that he had with having to select a feature that displays related table fields in the popup twice. I understand that you had resolved that the issue wasn't coming from your widget, but wanted to see if there was any possible new insight to the problem.

I am running WAB 2.6 for Portal & using the Jewelry Box theme with your Popup Panel widget loaded into the sidebar.

Here is the console errors that I receive:

init.js:114 TypeError: Cannot read property 'relationships' of undefined
at Object._queryRelatedLayer (init.js:2318)
at Object._queryRelatedLayers (init.js:2318)
at Object._getRelatedRecords (init.js:2315)
at Object.getComponents (init.js:2297)
at Object.startup (init.js:2337)
at init.js:417
at Object.forEach (init.js:70)
at Object._startChildren (init.js:417)
at init.js:424
at l (init.js:107) "TypeError: Cannot read property 'relationships' of undefined
at Object._queryRelatedLayer (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:2318:380)
at Object._queryRelatedLayers (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:2318:93)
at Object._getRelatedRecords (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:2315:50)
at Object.getComponents (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:2297:322)
at Object.startup (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:2337:73)
at https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:417:223
at Object.forEach (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:70:459)
at Object._startChildren (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:417:129)
at https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:424:460
at l (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:107:277)
----------------------------------------
rejected at a (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:108:174)
at l (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:107:436)
at b.extend.then.then.b.then (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:110:152)
at https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:131:246
at Object._setContent (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:424:370)
at Object._setContentAttr (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:419:138)
at Object.set (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:360:383)
at Object.displayPopupContent (https://gis.withersravenel.com/popuppanel/Widget.js:360:31)
at Object.<anonymous> (https://gis.withersravenel.com/popuppanel/Widget.js:228:16)
at Object.<anonymous> (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:63:277)
----------------------------------------
Error
at b.extend.then.then.b.then (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:110:97)
at https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:131:246
at Object._setContent (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:424:370)
at Object._setContentAttr (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:419:138)
at Object.set (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:360:383)
at Object.displayPopupContent (https://gis.withersravenel.com/popuppanel/Widget.js:360:31)
at Object.<anonymous> (https://gis.withersravenel.com/popuppanel/Widget.js:228:16)
at Object.<anonymous> (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:63:277)
at Object.<anonymous> (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:653:468)
at Object.c [as onSetFeatures] (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:119:193)"
n @ init.js:114
(anonymous) @ init.js:114
filter @ init.js:71
l @ init.js:114
setTimeout (async)
t @ init.js:114
t @ init.js:107
n.reject @ init.js:109
a @ init.js:108
l @ init.js:107
then.b.then @ init.js:110
(anonymous) @ init.js:131
_setContent @ init.js:424
_setContentAttr @ init.js:419
set @ init.js:360
displayPopupContent @ Widget.js:360
(anonymous) @ Widget.js:228
(anonymous) @ init.js:63
(anonymous) @ init.js:653
c @ init.js:119
_updateFeatures @ init.js:1198
(anonymous) @ init.js:62
c @ init.js:103
C.then.then @ init.js:105
addCallbacks @ init.js:105
addBoth @ init.js:106
(anonymous) @ init.js:1191
forEach @ init.js:70
setFeatures @ init.js:1191
f @ init.js:197
setFeatures @ init.js:1155
(anonymous) @ init.js:1257
c @ init.js:103
C.then.then @ init.js:105
_showPopup @ init.js:1254
_mapClickHandler @ init.js:1252
(anonymous) @ init.js:63
(anonymous) @ init.js:653
c @ init.js:119
_fire @ init.js:1299
_fireClickEvent @ init.js:1306
(anonymous) @ init.js:63
setTimeout (async)
_onClickHandler @ init.js:1305
(anonymous) @ init.js:63
Show 11 more frames
init.js:114 TypeError: Cannot read property 'NLS_prevMedia' of null
at Object._handleComponentsSuccess (init.js:2350)
at init.js:63
at l (init.js:107)
at t (init.js:107)
at d.resolve (init.js:109)
at Object.<anonymous> (init.js:2297)
at init.js:63
at l (init.js:107)
at t (init.js:107)
at d.resolve (init.js:109) "TypeError: Cannot read property 'NLS_prevMedia' of null
at Object._handleComponentsSuccess (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:2350:3)
at https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:63:277
at l (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:107:277)
at t (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:107:203)
at d.resolve (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:109:280)
at Object.<anonymous> (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:2297:405)
at https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:63:277
at l (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:107:277)
at t (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:107:203)
at d.resolve (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:109:280)
----------------------------------------
rejected at a (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:108:174)
at l (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:107:436)
at t (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:107:203)
at d.resolve (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:109:280)
at Object.<anonymous> (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:2297:405)
at https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:63:277
at l (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:107:277)
at t (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:107:203)
at d.resolve (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:109:280)
at Object.<anonymous> (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:2315:429)
----------------------------------------
Error
at b.extend.then.then.b.then (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:110:97)
at Object.startup (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:2337:101)
at https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:417:223
at Object.forEach (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:70:459)
at Object._startChildren (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:417:129)
at https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:424:460
at l (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:107:277)
at b.extend.then.then.b.then (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:110:152)
at https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:131:246
at Object._setContent (https://gis.withersravenel.com/portal/jsapi/jsapi/init.js:424:370)"

Thanks so much for any assistance that you can provide!

Justin R.

Justin,

   Sorry I have no information on this issue.

Robert,

Can i edit in the panel? the entire community is hurting for an attribute table editor, that i will take anything that provides a better user experience

Bobby

Bobby,

  No there is no editing.

Hi Robert,

Thanks for reviewing my input and fixing the bug in your latest widget update so quickly.  I implemented the latest widget update, and it definitely works.  However, I am finding that although the pop-up panel will not push the feature off-screen, it will still push the feature so that it is obscured by whatever widget is open in the header controller.  Is there anything that can be done so that the select feature doesn't get pushed behind the open header controller widget?

Here is a picture of the Live Preview Site where selected a feature and then I minimized the layer list to demonstrate how the selected feature is obscured by the layer list if it is not minimized.

Dear Robert, I'm using it in my launchpad theme.

I got some problem with the close button on iPad with Safari and Chrome..

If I want to close the popup panel I have to push the button..but it works only between the title and the content...

It seems like there is another events like MOVE that has the priority or the height of the button is 0.

I'm investigating in CSS here but no success:

.jimu-on-screen-widget-panel>.jimu-panel-title>.btns-container>.close-btn,
.jimu-on-screen-widget-panel>.jimu-panel-title>.btns-container>.foldable-btn,
.jimu-on-screen-widget-panel>.jimu-panel-title>.btns-container>.max-btn{
  width: 35px;
  height: 100%;
  border-radius: 35px;
  opacity: 1;
  cursor: pointer;
  margin: 0 !important;
}

Thank you in advance,

Naty

Naty,

   Sorry, that sounds like a WAB issue and not something specific to my widget. You should report that to esri tech support.

Hello Robert, 

Guessing that you know how does esri's Popup work, by having implemented a custom PopupPanel, do you know if there is a way to only enable the popup when a flag variable is enabled? Either using your Popup variant or the default one. If so, where should we edit the code so we accomplish such thing?

Thank you. 

Iván,

   You would have to add an event listener for the popups set-features event and then look for that flag and prevent the popup there.

Thank you for this great widget.

How do I change the popup size (or position) on Mobile format? Or maybe have it fullscreen. 

Hello, Robert,

Thanks for this widget !

I have a problem with this one : I use Web App Builder Developer Edition 2.13 and version 2.12.1 of the PopupPanel widget.

I created an application with the Tab theme and added 3 widgets in the sidebar controller : legend, Around me (default active) and popup panel.

The problem is that when I click on my map, the default popup is displayed and the popup panel widget is not activated (image 1): is this normal? I would like that when I click on the map, it opens the popup panel widget automatically and not the default popup...

If I click on the popup panel widget, the result is displayed in the widget and if I click on another entity on the map, the widget is updated (image).

Thanks

Hélène

Hélène,

   You have to set the popup panel to open at startup.

https://developers.arcgis.com/web-appbuilder/guide/widgets-tab.htm#GUID-2598C83F-123C-42EF-9371-4B00... 

Thank you Robert for your quick answer!

Is there a way to activate the popup panel widget when you click on the map, even if another widget is enabled?

For example, if a user looks at the map legend via the legend widget and clicks on the map again, he does not see the content of the pop-up window, he must first think to click on the popup widget to see the result.

Can we have the pop-up window anchored on one side of the map for example without it being a widget ?

Thanks
Hélène

Hélène,

   Looks like there was a change in WAB 2.13 when using the Tab theme that broke my widget. In the past when you have another widget active (using Tab theme) it would make the popup panel active automatically when you clicked on a feature in the map. To fix this I will be releasing a 2.13 version of this widget today that addresses that code issue.

Great !

Thank you for being (so) responsive !

Hélène

Please test out the 2.13 version.

I tried the 2.13 version but I have the same result : when the popup widget is not active and I click on a feature in the map : it does not activate automatically...

I tried to create a new application in WAB4dev with tab theme, it the same result.

It works with the JewerlyBox Theme.

I'm going to be out of the office for a week, I could do more tests if necessary when I get back.
Thank you

Hélène

Hélène,

   I think I just found the issue. It looks like if the popup panel is the first tab in the tab theme there is an issue. I will do some more testing. Right now you can set the popup panel widget to any other tab position then 1 and it will work.

Hélène,

  Please re-download the 2.13 version of this widget as I have now addressed the issue with the popup panel not opening when it is in the first tab position in the tab theme.

Hi Robert,

Is version 2.12 of this widget still available?

2.13 version of widget should work with WAB 2.12

Version history
Last update:
‎11-17-2015 09:06 AM
Updated by: