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.

[LefterisKoumis]

There are no errors. After the instant flashing at start up, it vanishes. When you click on a feature, the popup shows up as a infowindow (floating) not as a side panel.

I checked the config.json of your popuppanel website it seems that the popuppanel needs to be in the groups widget??

"groups": [
      {
        "visible": false,
        "panel": {
          "uri": "themes/JewelryBoxTheme/panels/LDockablePanel/Panel",
          "position": {
            "left": 0,
            "top": 40,
            "bottom": 0,
            "width": 360,
            "relativeTo": "browser"
          }
        },
        "maxWidgets": 1,
        "id": "_18",
        "widgets": [
          {
            "name": "PopupPanel",
            "uri": "widgets/PopupPanel/Widget",
            "id": "widgets_PopupPanel_Widget_32",
            "icon": "widgets/PopupPanel/images/icon.png?wab_dv=2.1",
            "config": "configs/PopupPanel/config_widgets_PopupPanel_Widget_32.json",
            "version": "2.7"
          }
        ],
        "label": "Group_0",
        "icon": "widgets/PopupPanel/images/icon.png?wab_dv=2.1"
      }
    ],
    "panel": {
      "uri": "jimu/OnScreenWidgetPanel",
      "position": {
        "relativeTo": "map"
      }
    }
  },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

No that is just for that theme (jewlerybox). This is really puzzling. Your screen shot does not match any of the standard billboard theme layout options, so does that mean you have customized the billboard theme?

[LefterisKoumis]

nope, no modification. Just to verify that I have the problem, I created a new app. Then I follow these steps, and please let me know if there is something not right.

1. Change the theme to billboard. Clicked Saved.

2. extracted the contents of the popupanel zip file into a new folder PopupPanel in the widgets folder.

3. edited the app's config.json and added under the widgetOnScreen the entry

 {
        "uri": "widgets/PopupPanel/Widget"
}‍‍‍

4. open the "Configure Popup Panel" and clicked OK. That created the rest of the entries in config.json and the Popup Panel in the configs folder.

5. Refresh the app and the popup panel flashes once before it vanished. 

[RobertScheitlin__GISP]

Lefteris,

   I am not sure why you are manually adding it to the config.json in step 3...

Once the Popup panel is added to your WAB stemApp widgets folder then you can just select the popup panel in the choose widget dialog like you do any other widget.

[LefterisKoumis]

I'd like to add the widget on the widgetsonscreen group (off panel) and be invisible. If I add it to the widgets in the stemapp it becomes another widget on the headercontroller with an icon. I am using the Box theme.

[RobertScheitlin__GISP]

Lefteris,

   Well that is the issue then. You can not take an in panel widget like this and just use it in an off panel scenario and expect it to work. Off panel widgets are developed in a different manner.

[LefterisKoumis]

I have apps with the Foldable and Jewlerey theme and I use the widget in the same panel as you do in Live Preview site. The widget is defined under the groups section of the config.json. No icons on the headercontroller, and it is running in the background. I am using the box theme and want to apply the same (no icon and in the background). If I place the widget in the widgets in stemap folder it creates an on-panel widget. Below is the config.json of the live preview site. In the box theme the groups section is empty. Since the box theme does not have a LDockable panel is it possible to apply the widget on this theme? Thanks.

"groups": [
      {
        "visible": false,
        "panel": {
          "uri": "themes/JewelryBoxTheme/panels/LDockablePanel/Panel",
          "position": {
            "left": 0,
            "top": 40,
            "bottom": 0,
            "width": 360,
            "relativeTo": "browser"
          }
        },
        "maxWidgets": 1,
        "id": "_18",
        "widgets": [
          {
            "name": "PopupPanel",
            "uri": "widgets/PopupPanel/Widget",
            "id": "widgets_PopupPanel_Widget_32",
            "icon": "widgets/PopupPanel/images/icon.png?wab_dv=2.1",
            "config": "configs/PopupPanel/config_widgets_PopupPanel_Widget_32.json",
            "version": "2.7"
          }
        ],
        "label": "Group_0",
        "icon": "widgets/PopupPanel/images/icon.png?wab_dv=2.1"
      }
    ],
    "panel": {
      "uri": "jimu/OnScreenWidgetPanel",
      "position": {
        "relativeTo": "map"
      }
    }
  },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Lefteris,

   In the box theme you will have to have the widget in the header icons and then once clicked on it will show the widget. It is not similar to those other themes.

[SeanHolmes1]

Hey Robert, 

Great widget! We are running into an issue where when we try to view a related record using the popup panel, the table appears blank. If I do not use the popup panel, the related record appears to be behaving normal. Any Ideas?

[RobertScheitlin__GISP]

Sean,

   It has been mentioned a few times here that this widget does Not support related records.

[SeanHolmes1]

Ah, okay, I must have missed those. Is this something you are working on, or is support for related records completely gone?

[RobertScheitlin__GISP]

something that is on a to do list.

[SeanHolmes1]

Awesome, look forward to it! Thanks again for all you do!

[AndyWells]

Robert,

This widget is awesome, as are all of your contributions and I appreciate everything you do. And I hate to bother you with a question, but I am not sure what is going on, or if this is expected behavior. I'm using WAB 2.8 and I am using the Pop Up Panel in the header controller. I'm having trouble with the Pop Up Panel getting hidden behind other panels, and not responding to clicks. 

I have a site where you can take a look if you really want to, but here is my general situation:

The site loads with no layers turned on, and only the Pop Up Panel enabled and showing on the right side:

1. With the Pop Up Panel turned on, I turn on the Layers panel using the Layers button in the header controller
2. Enable the Buildings layer (because it has pop-ups configured and enabled) and zoom in far enough to enable the buildings layer on the map. 
3. I have left the Layers Panel turned on.
4. Click on a building, on the map. The Pop Up Panel appears, and shows the information for that particular building. (So far, so good).
5. When I click on another building on the map, the Pop Up Panel closes and the Layers Panel comes back on.
6. I can continue to click on buildings, and the Pop Up Panel never appears again, unless I turn off the Layers Panel which appears to be hiding the Pop Up Panel.

Do you have any ideas of what I need to set in order to give priority to the Pop Up Panel, if that is feasible? Maybe it is expected behavior, but I feel like most of my users are never going to remember to X out the layers panel, or the basemap gallery, etc so that the Pop Up Panel works. I try to tell users to always hit the Pop Up Panel icon (I call it Information Results on my maps) but it just seems like it should pop up all the time.

Any advice you may have would be greatly appreciate it.

Thank you.

[RobertScheitlin__GISP]

Andy,

   Honestly you are the first that I have heard of that is placing the popup panel widget in the header. The header controller widget is unique in the fact that it only allows one of the widget in its pool to be open at a time and when the opened widget is switched to another one then the previous opened widget is closed. But my popup widget overrides that feature to make sure the popup is always opened period. But as you are seeing it is open under the layer list widget. So the simple fix is one line of code to change in the popup panel widget.js file in the displayPopupContent function. In latest version it is line 348:

//was:   PanelManager.getInstance().normalizePanel(this.inPanel);
//needs to be
              PanelManager.getInstance().openPanel(this.inPanel);‍‍‍

[GeorgeKatsambas]

Andy, what widget did you use to hyperlink to your scanned tax documents

[AndyWells]

Robert,

Thanks for your response to my question. Changing from normalizePanel to openPanel worked perfectly. It wasn't a huge issue as it was, but not having to close out the other panels when a user clicks on things on the map, makes it work more like our users expect from Google Maps, so I appreciate the tip.

[AndyWells]

George,

It's just the About widget. And it's poorly formatted (for right now).

[Anonymous User]

Will this work on 10.5.1?

[RobertScheitlin__GISP]

Scott,

  Sorry I do not use Portal so I am not sure if it works there. But the one thing I do know is that Portal 10.5.1 is only using WAB version 2.4 so that is very likely a issue since this widget is developed for WAB 2.9 or greater.

[Anonymous User]

Thank you.

Scott Foster

GIS Specialist

Pipelines & Terminals

Direct: (210)-345-5198

Cell: (713)-240-7770

Email: scott.foster@valero.com<mailto:scott.foster@valero.com>

[AlbertoLópez]

Hello;

I am using this widget, and I would like that  when this widget is  closed and  later do a click in a feature, the popup of the webmap  of Portal/AGOL is displayed.

Is this  possible?

Best regards.

[RobertScheitlin__GISP]

Alberto,

   What theme are you using?

[AlbertoLópez]

Robert;

I am using a custom theme. Not one of the themes of WAB.

Thanks.

[RobertScheitlin__GISP]

Alberto,

   Not sure how this will work with a custom theme but here is some code changes you could make.

1. Add the new onClose function.
2. onOpen function add lines 15 and 16
3. displayPopupContent add lines 21 - 23

      onClose: function() {
        this.removeEvtHandlers();
        html.removeClass(query('.esriPopup')[0], 'myPopupHidden');
        this.popup.reposition();
      },

      onOpen: function () {
        var mapMan = MapManager.getInstance();
        if(mapMan.isMobileInfoWindow){
          this.map.setInfoWindow(mapMan._mapInfoWindow);
          mapMan.isMobileInfoWindow = false;
        }
        //hide the standard esri popup instead
        html.addClass(query('.esriPopup')[0], 'myPopupHidden');
        this.setEvtHandlers();
        this.displayPopupContent(this.popup.getSelectedFeature());
      },
...

      displayPopupContent: function (feature) {
        if(this.state === "closed"){
          return;
        }
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AleksandraZietara]

Hi Robert, 

Very useful widget! I am using Web App Builder Developer Edition 2.11 with Portal 10.6.1 and version 2.9 of PopupPanel. I was working with a WebApp in Dashboard Theme since a while and everything worked fine. What I experienced today is that pop-up appears both in PopupPanel and default pop-up on the WebMap. Couple hours ago, it was appearing only in PopupPanel as it should. Do you have any idea of what might went wrong? Is it possible that I changed some settings? I would really appreciate your help. 

[RobertScheitlin__GISP]

Aleksandra,

  Strange. Can I assume that you have tried shutting down WAB and restarting? I apply a css rule in my widget to the maps default popup "myPopupHidden" that sets the display to none, could you have made some change to that or somehow overridden that css rule?

[AleksandraZietara]

Thanks for reply. Yes, I have restarted WAB. I didn't change anything in code, but just in case compared files with the original folder and haven't found any difference. As I tried to troubleshoot a little bit I deleted PopupPanel permanently and copied a new one into widgets folder -the same effect. I tried to build a new app, use another layer or another WebMap - always the same - two pop-ups at the same time. 

What I discovered is when I changed theme to for example 'foldable' or 'jewelery box', tested that pop-up is working correctly there and switched back to 'dashboard' theme, the pop-up is ok in configuration view, which means I get only one pop-up in on of the boxes around the map, but when I launch the WebApp, problem appears again (traditional pop-up on the map and another one in PopupPanel widget). So now I am not so sure if everything was working fine at the beginning or if I tested only configure view all the time and pop-up have never worked in launch view. However, is it a known issue with PopupPanel in Dashboard theme?

(I did some test in WAB configured with AGOL instead of Portal and experienced the same problem)   

[RobertScheitlin__GISP]

Aleksandra,

  Yes there does seem to be an bug with my widget in the Dashboard theme. Thanks for letting me know. I will start to investigate the issue.

[RobertScheitlin__GISP]

Aleksandra,

  Version 2.11 is now available that fixes the Dashboard theme issues.

[AleksandraZietara]

Wow, that was fast! Thank you very much. I checked quickly and it seems to work perfectly now. Great job  

[AliAjami-Bakhtyarvand]

Hi,

I was trying to use this Widget on the 3D, I change platform to HTML3D and 3D true, but when I add this on the 3D app, it does not work.

Could you please let me know is it possible to use this on the 3D app ?

Thank you,

Ali

[RobertScheitlin__GISP]

No,

  Widgets have to be completely re-developed to work in 3D. WAB 3D uses JS API 4.x not 3.x.

[RichDeBell]

Hi,

I'm considering using this widget to replace the standard web map widget configuration. My major need is to configure a hyperlink in the popup to open IN the same browser tab as the web app. I've tried to customize the popup settings in the web map changing the HTML but it will not override the 'target=_blank' setting. Can this be modified with your widget either from the configuration or I guess in the code if needed?

Best!

[RobertScheitlin__GISP]

Rich,

  So you want the app to be replaced by the link in the popup?...

[RichDeBell]

Hi Robert. What I'm hoping is that in the popup widget I can configure a hyperlink from an attribute that will open in the same browser tab. I can't do that via the out-of-the-box web map popup settings.

Thanks for the quick response!

[RobertScheitlin__GISP]

Rich,

   OK, to be sure I understand. When you are in a WAB app it is open in one tab of the browser. For the poup link to open in the same tab the WAB app would be replace by the content of the link. Are you saying that is the behavior you are looking for?

[RichDeBell]

Right so I'd like to have a attribute in the popup that is a hyperlink. When clicked I would like for the link to launch in the 'current' web app browser tab NOT open in a new browser tab or window.

[RobertScheitlin__GISP]

Rich,

  That would be a coding change (since that is abnormal behavior) but it would be possible in the Popup panel widget. You would override the anchor element in the content var inside the displayPopupContent function.

[RichDeBell]

OK great thanks Robert!

Do you know which file this function parameter will be in?

Rich

[LLyons]

I think this widget might be exactly what I'm looking for but I don't have any experience adding new widgets. Are there instructions on how to implement this widget for a mainly-front-end-AGO-app-creator?

[RobertScheitlin__GISP]

Laura,

  If my "a mainly-front-end-AGO-app-creator" you mean AGOL then no you can not use custom widgets in AGOL's WAB apps.

[RichDeBell]

Hi Robert... thanks again for the help yesterday. Any chance you can provide some additional guidance on where exactly in the code the below reference can be found?

Rich,

  That would be a coding change (since that is abnormal behavior) but it would be possible in the Popup panel widget. You would override the anchor element in the content var inside the displayPopupContent function.

[RobertScheitlin__GISP]

Rich,

  Like this:

      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;
                }
              })
              sbc.selectTab(tIndex);
              sbc._resizeToMax();
            }else{
              PanelManager.getInstance().normalizePanel(this.inPanel);
            }
          }else{
            WidgetManager.getInstance().triggerWidgetOpen(this.id);
          }
          var content = feature.getContent();
          if(this.popupContent){
            this.popupContent.set("content", content);
            var cont = this.popupContent.get("content");
            var eCont = cont.replace('target="_blank"', 'target="_self"');
            if(this.popupContent){
              this.popupContent.set("content", eCont);
            }
          }
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RichDeBell]

Thanks Robert…. So I implemented this but it still will open the hyperlink in a new tab?

[RobertScheitlin__GISP]

Rich, then you are not getting the changed code in your app. I tested this and it works fine. Did you make this change in the client/stemapp/widgets folder or in the server/apps/[app#]/widgets folder?

[RichDeBell]

Hi Robert… I made the change to the file in client/sitemap/widgets directory.

I added a consol command on that variable and testing in the browser and it’s not showing anything. I also downloaded the app to deploy it too IIS and can see the code is not changed in this version. We run WebApp Builder dev on a service and I think something is holding up the change being recognized. I restarted the service and also removed and added the widget itself back in? I’m going to just try this script in the downloaded/deployed version

Thanks!

Rich

[RobertScheitlin__GISP]

Rich,

   Changes to the client/stemapp/widgets folder are only used when you create a new app. so if you want this change in an existing app then you have to make the change to the specific apps widgets folder.

[RichDeBell]

Ahhh OK so I needed to create an entirely new app to have the changes reflect from that directory. GOOD to know! Thanks so much!!

[AdamAraza]

Love this widget! Has anyone else had any issues with attribute expressions displaying incorrectly? For some reason, our site will display the attribute expression when the feature is selected from the map, but will not show the expression when I use the search widget. For example, searching for a property, I find that the water service and sanitary district are missing phone numbers and have broken links, but if I click that same property on the map, I see those fields populated.

Not sure if this is a question for pop-up panel or for search widget...

On Search 

On Click

I opened this case with Esri and they also appear to be stumped...