Popup Panel Widget Version 2.17 - 9/1/2020

43 Kudos · 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

List of the latest enhancements and changes:

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:

Fixed an issue where the tab theme in WAB 2.13 would not open the popup panel.
Fixed an issue where feature on the edge of the map are no longer visible when using Jewlerybox theme, once the drawer is opened.
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.
Fixed issue with setting page error.
Fixed issue with Dashboard theme dark style not being able to see the next/previous buttons
Fixed double popup issue when using the Dashboard Theme.
Fixed dark icon colors for next and previous when using Dashboard Theme.
Removed protocol from a css item dependency to prevent mixed content warnings.
Added configuration setting for placing the action menu at the top or bottom of the panel.
Added configuration for disabling export options on action menu.
Widget is now configurable to close on startup and/or close on clear
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).
Widget now implements the actions menu for panning and open in attribute table.
Fixed an issue where the popup will not populate on some mobile devices
Prevents the WAB Mobile popup from be activated.
Added Zoom To selected
Added Clear selected
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.
Enhanced the widget to select the popup widget tab as well as open the sidebar when using the tab theme
Fixed the RelatedRecordsPopupProjector error issue when using Popup Panel widget.
Fixed next and previous moving more than one record in some circumstances.
Made sure selected feature is in view extent when the popup panel opens in the Jewelry box theme
Fixed double vertical sliders in some circumstances.

HélèneETIENNE · ‎11-05-2019

Hi Robert,

Sorry for the late answer.
I tested the new version of the widget, with the tab controller open and a "Around Me" widget activated by default.

Here are the results:

- With the widget in 1st position : indeed, the widget does not activate automatically when I click on the map, once activated, it works but if you switch to another widget, it does not activate when you click on the map....

- With the widget in 2nd position :
As long as the pop-up panel widget has not been activated, the classic pop-up window is displayed.

If I activate the pop-up panel widget : it works and when you switch to other widgets, the pop-up widget is activated when you click on the map: it works.

There is one (only) problem, with the "Around me" widget : when I have activated the pop-up panel widget at least once and I come back to the Around me widget : I enter an address in the search bar and instead of having the result displayed in this "Around me" widget, the pop-up widget is activated but without results.

There's no errors in the browsers web console...

The pop-up panel widget should not be activated when you launch a search in the Around Me widget... I don't know if this is easily possible...

Thanks for you work.

Hélène

LefterisKoumis · ‎11-13-2019

Hello Robert.

I have an app where point is plotted on the map and since I have set the map.infowindow , the ESRI popup would be displayed with info for that point.

Since I implemented the popup panel widget, when a point is plotted, the popup panel is not displayed. It takes another click on the point to see the popup panel with the point info. I tried the panel manager but still the popup panel is not active. How do I eliminate the extra click. THanks.

BillSchlatter · ‎11-18-2019

Sorry if this has been brought up already, I didn't read all ~500 comments.

Would it be possible to add some sort of default text to show when there is no currently-selected feature? One of my coworkers has seen this Esri-Leaflet map: Census 2020 Hard to Count Map and wants me to achieve similar on-click infobox functionality in a WAB map we're working on. Thankfully, he doesn't care about the mouse-hover effects. It would basically let us turn the left-hand into an About widget when nothing is selected, and a Popup Panel whenever something is selected, letting us save some screen real estate.

Even if that's not possible, this widget is excellent, and thank you for developing it!

RobertScheitlin__GISP · ‎11-18-2019

Bill,

There is nothing in place currently for configuring the panel default text but you can add this in the widgets code base.

      postCreate: function () {
        this.inherited(arguments);
        this.popupMenu = PopupMenu.getInstance();
        this.featureActionManager = FeatureActionManager.getInstance();

        if(this.config.hasOwnProperty("actionMenuPos") && this.config.actionMenuPos === "top"){
          //top
          this.popupContent = new ContentPane({
            id: 'popupContent',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
            region: "center",
            style: 'margin-top: 22px;'
          }).placeAt(this.divBottom).startup();
        } else {
          //bottom
          this.popupContent = new ContentPane({
            id: 'popupContent',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
            region: "center"
          }).placeAt(this.divTop).startup();
        }
//I added Lorem ipsum text to the content in the widget.js postCreate function.‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

      clearResults: function() {
        if(this.config.closeOnClear){
          this.closeWidget();
        }
        if(this.instructions){
          domUtils.show(this.instructions);
          this.instructions.innerHTML = this.nls.selectfeatures;
        }
        if(this.popupContent){
          this.popupContent.set("content", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
        }
        domUtils.hide(this.pager);
        domUtils.hide(this.actionsPaneDiv);
        this.popup.clearFeatures();
      },
//And again in the clearResults function.‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎11-18-2019

Lefteris,

since I have set the map.infowindow , the ESRI popup would be displayed with info for that point

What do you mean by this? Are you setting the map.infowidow in code?

When using this widgets preview site you can see that clicking on points work normally (i.e. one click).

RobertScheitlin__GISP · ‎11-18-2019

Hélène,

Sorry i have not done any testing with the around me widget.

LefterisKoumis · ‎11-18-2019

There are actually two workflows.

One is to click on the map and the popup widget appear with the info of the clicked point.

The second workflow is to perform a query which results plotting a point on the map. Then another click on the drawn point to view the popup widget.

I am trying to avoid the second click on the second workflow. After the query is completed to draw the point and display the popup at the same time.

I tried the panel manager to open the widget but it was blank.

RobertScheitlin__GISP · ‎11-18-2019

OK so the question really has nothing to do with the widget then. What you need to do is programatically force a click event on the feature.

this.map.emit('click', {mapPoint: yourFeaturesGeometry});‍

LefterisKoumis · ‎11-18-2019

Thank you Robert. I already tried it. Yes, you are correct, it doesn't relate to the widget.

RobertScheitlin__GISP · ‎11-18-2019

If that is not working then maybe the timing is off. use a setTimeout and delay 500 milliseconds

LefterisKoumis · ‎12-02-2019

Hi Robert. Is there way to know which action initiated the popup widget? How do we know how the popup widget was called, by a click on a feature on the map, or by a choosing a selection on the search widget?

 this.own(on(this.popup, "selection-change", lang.hitch(this, function (evt) {
          this.selectedFeature = evt.target.getSelectedFeature();‍‍

Thank you.

RobertScheitlin__GISP · ‎12-02-2019

Lefteris,

Just by listening to that event there is no way to know. I am not sure how to determine if it was a map click or a widget or action.

BillSchlatter · ‎12-02-2019

Thank you! The code snippets you provided didn't quite work for my case, but it got me to the right places in the code to implement my own solution. It works quite well as an About Pane/Popup Pane hybrid, though as a first time widget developer, my code probably violates any number of the principles of the framework. If I have the time and drive, I might try to implement something nicer later.

If you're interested, I'll post a link to the finished map once it's public.

RobertScheitlin__GISP · ‎12-02-2019

Bill,

Glad that got you going at least.

LefterisKoumis · ‎12-02-2019

ok. It seems that one way is to create a global (window) variable when the search is clicked.

Brian_Wilson · ‎12-19-2019

Do you have this under version control someplace so we can clone or fork it? Thanks--Brian

JoanneStarr · ‎12-20-2019

Hi Robert,

Is there anyway that this widget can work with table relates? I have it installed and the relate function works in the Esri Pop-up, but nor yours. Thanks!

RobertScheitlin__GISP · ‎12-23-2019

No relates are not supported in this widget.

NataliyaLys · ‎02-04-2020

Robert Scheitlin, GISP‌, how difficult would it be to modify a popup widget so that on mobile devices a pop-up would open in the bottom half of the screen. Just like a legend in the image below? Or is it even possible? Thank you!

RobertScheitlin__GISP · ‎02-04-2020

Sorry that is not something I have looked into. I steer away from messing with mobile layout as it open to a lot of trouble.

NataliyaLys · ‎02-04-2020

No problem. I appreciate the feedback.

RezaTehranifar2 · ‎02-26-2020

Hi Robert

Great tool! One question:
Is there a way that I can have this widget open when the page load and doesn't have to be activated to work?
As is now, the user has the open the widget for the popup to work. If they don't, the normal built-in popup shows. I am using the tab theme if that helps

Apologies if this has been asked, but I did a quick through the comments. Did not see it. Feel free to refer me to the right comment.

Thanks

Reza

RobertScheitlin__GISP · ‎02-26-2020

Reza,

Sure you just have to toggle the "Open this widget automatically when the app starts" option for the popup panel widget in your widget configuration panel.

RezaTehranifar2 · ‎02-27-2020

Thanks Robert.

After years of using AGO, I never knew that button existed.

CameronBlandy · ‎03-23-2020

HI Robert,

I was planning on using the embed web map side_panel parameter and came across your similiar functionality for WAB. We are using Enterprise 10.6.1 and I registered the PopupPanel. When I create a new WAB using the tab theme I can see the PopupPanal under the custom widgets (it is stored on our application server). When I click OK to add it to my WAB it throws a CORS error and fails to add it. I probably should put the widget somewhere on our portal machine but I am not sure where. We use the Web Adaptor on Portal. Any thoughts where I should put this on Portal.

Thanks,

Cameron

RobertScheitlin__GISP · ‎03-24-2020

Cameron,

I am not a Portal user but I believe that you can put it anywhere on the server then create a virtual directory to it in IIS.

Add custom widgets—Portal for ArcGIS | Documentation for ArcGIS Enterprise

CameronBlandy · ‎03-24-2020

Hi Robert,

Solved it. Thanks for the link. Needed to add a web.config to the widget folder to allow cross origin.

One question. If I add the popup panel and legend widgets to the tab theme side panel when I click on a feature should the app switch to popup panel. Currently it stays on the Legend widget. I have to click on the popup panel widget to the see the popup.

Awesome work as always, Robert.

Cameron

CAMERON BLANDY | GIS ANALYST

CITY OF SURREY

Engineering Department, GIS Section

13450 104th Ave, Surrey, BC, Canada V3T 1V8

T 604.591.4699 | F 604.598.5781 www.surrey.ca<http://www.surrey.ca/>

<http://www.surrey.ca/12392.aspx> <http://www.surrey.ca/city-government/13146.aspx> <https://twitter.com/cityofsurrey> <https://www.facebook.com/TheCityofSurrey> <http://www.youtube.com/TheCityofSurrey> <http://www.linkedin.com/company/city-of-surrey>

Connect, Share and Engage with your City

LefterisKoumis · ‎06-02-2020

Robert, is there location that you keep the previous versions of your widgets?

I am looking for the Popup widget for WAB v.2.11

THanks.

RobertScheitlin__GISP · ‎06-02-2020

Older version links added to the main thread now.

LefterisKoumis · ‎06-02-2020

Thank you.

BrianDevine · ‎06-07-2020

Hi, Robert. I like your widget. I'm just having a minor preloading issue with it right now. I get the standard popup behavior until the widget is manually clicked.

For what it's worth, I'm using the foldable theme, and get the same behavior whether I place the widget inside or outside the controller.

EDIT: I figured it out, based on your answer to a prior comment and a lot of searching. That "Open this widget automatically" option isn't the easiest thing to find.

LefterisKoumis · ‎06-10-2020

(view in My Videos)

Hello Robert.

I installed the widget on a new app. When I open the AT, the bottom part of the of the popup interferes with the Attribute Table. However if I manually open and close the popup then the issue is resolved. Iam using WAB 2.16 and Jewelry theme.

RobertScheitlin__GISP · ‎06-11-2020

Lefteris,

In the popup panel widget.js file update this function:

      closeWidget: function() {
        if(this.inPanel){
          //console.info(this.inPanel);
          if(this.appConfig.theme.name === 'JewelryBoxTheme'){
            PanelManager.getInstance().minimizePanel(this.inPanel);
            html.addClass(this.map.container.parentNode, 'sideBarHidden');
          }else if(this.appConfig.theme.name === 'TabTheme') {
            var sbc = WidgetManager.getInstance().getWidgetsByName("SidebarController")[0];
            sbc._doResize();
          }else{
            PanelManager.getInstance().closePanel(this.inPanel);
          }
        }else{
          WidgetManager.getInstance().closeWidget(this);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

LefterisKoumis · ‎06-11-2020

Thank you. So the config setting

"closeAtStart": true,‍

in 2.16 jewelry theme doesn't work and we need to "force" closing it by:

html.addClass(this.map.container.parentNode, 'sideBarHidden');

JeremeChandler1 · ‎06-24-2020

Robert,

Your Popup Panel widget is excellent and we are using it in many of our apps. However, I'm looking into modifying the code to add a few tabs (TabContainer), each showing different data from the same record/feature selection. Have you or anyone accomplished this already? Thanks!

RobertScheitlin__GISP · ‎06-24-2020

Jereme,

Sorry I have not.

LefterisKoumis · ‎06-24-2020

Hello Jereme. I was able to do a bit of customized work on the popup.

There are two choices (they could be more).

First is to append to the content of the popup with your content with just adding an additional div like the 'demo ' below.

<div data-dojo-attach-point="divBottom"></div>
  <div id="demo"></div>‍‍

Then use the

document.getElementById("demo").innerHTML‍

to create you tabs by inline html and place it inside the displayPopupContent(feature) function.

Second choice is override the content

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

under the displayPopupContent(feature) function with your content (inline html for tabs).

Either method, you will have access to the feature clicked (selected) and customize your tabs.

JeremeChandler1 · ‎06-24-2020

Perfect, I appreciate the insight and direction Lefteris!

CrystalCowardin · ‎06-25-2020

Hi. I'm starting from the beginning..I created an app in webapp builder but when I go to choose my widgets, I don't see the popup widget there. I do have the zip folder downloaded. Sorry for the basic question!

RobertScheitlin__GISP · ‎06-25-2020

Crystal,

You extract the zipped files to your [install dir]/stemapp/widgets folder.

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

JeremeChandler1 · ‎06-25-2020

Hi Lefteris,

Do you happen to have an example of the syntax to append to the content of the popup div? I'm struggling with where to place the inline html in the displayPopupContent: function (feature). In my case I need to add three tabs, each showing different fields from the same selected feature record. Any help is appreciated.

LefterisKoumis · ‎06-25-2020

I created tabs for another widget. Below is an example to append to the current popup content (option1 on my previous reply)

displayPopupContent: function (feature) {
    document.getElementById("demo").innerHTML = "";

    if (feature.attributes) {
        Object.keys(feature.attributes).forEach(function (key) {
                //   console.log(key, feature.attributes[key]);
                if (key === "xxxx") {
                    newcontent += "YYY" + key
                }
                //----- code
                else if (key === "XXY") {
                    newcontent += "zzz" + key
                }
                //more js code
                // -------
                // -------
                //------  
        }        
    }
    document.getElementById("demo").innerHTML = newcontent;
    var content = feature.getContent();
    if (this.popupContent) {
        this.popupContent.set("content", content);
        //----

    }

}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and place the demo div at the end of widget.html

-----
-----
</div>
  <div data-dojo-attach-point="divBottom"></div>
  <div id="demo"></div>
</div>‍‍‍‍‍‍

AmyRoust · ‎08-31-2020

I just downloaded this widget this morning, and it appears that the widget version that I downloaded (2.13) has the bug described as "issue where the tab theme in WAB 2.13 would not open the popup panel" when implemented in WAB Dev version 2.16. That, or I downloaded the wrong version of the widget. I downloaded the one here:

Help?

RobertScheitlin__GISP · ‎08-31-2020

Amy,

So you are say that you are using the popup panel widget in the tab theme in 2.16 and are having an issue with it not opening the widget?

AmyRoust · ‎08-31-2020

I caused my own problem by not reading your instructions all the way through. I was using the Foldable theme, so the behavior I wanted wasn't going to work. I switched to Jewelry Box.

I have a different question for you, though. I have the widget set up with "Close this widget on widget startup" checked. That keeps the side panel closed until someone clicks on an item in the map with a pop-up. However, the Attribute Table still slides to the right to leave space for the side panel. Is that how it is designed to work? Here's the test site that I'm working on, so you can see what I mean: ArcGIS Web Application

RobertScheitlin__GISP · ‎08-31-2020

Amy,

I have seen this before and it is a side affect of having the AT Widget configured to be open at startup and having the popup panel widget close on startup in jewlerybox theme. I don't have a solution for this right now.

AmyRoust · ‎08-31-2020

I'm not wedded to using Jewelry Box. Is there a template that works better with the option to hide the pop-up on startup?

RobertScheitlin__GISP · ‎08-31-2020

Do you have to have the AT widget open by default?

AmyRoust · ‎08-31-2020

Unfortunately, yes. Client specs.

RobertScheitlin__GISP · ‎08-31-2020

OK. Here is the fix for the AT Widget sizing issue then. I forgot someone else had this exact issue a while back and I already found the fix.

https://community.esri.com/docs/DOC-7355-popup-panel-widget-version-213-102519?messageTarget=all&sta...

Popup Panel Widget Version 2.17 - 9/1/2020

Popup Panel Widget Version 2.17 - 9/1/2020

Widget Downloads