Popup Panel Deactivation?

[JenaF]

Hey all (and hopefully @RobertScheitlin__GISP ) - 

I am working with modifying/creating custom widgets for my first time, so I'm a total newbie. JS is also new to me, so it's a learning curve for sure. Adding Robert's custom Popup Panel widget to our Enterprise/Portal available widgets was easy, but modifying it is where I'm getting stuck.

What I'd like is for the user to click the widget to turn on the popup panel (as is currently the action), then have the option to click the widget again to deactivate it and go back to the standard popups. The default behavior that I'm seeing is that there is no way to deactivate the widget once it's been clicked - even when the panel itself is not shown on the map, the widget is still active. This results in the next feature click reopening the custom widget panel instead of the default esri popup.

I've tried messing with the 'onDestroy' and 'closeWidget' functions, but to no avail. Any advice (in excruciating detail) on what code to add and where?

This is in Launchpad Theme (unchangeable as it is corporate policy), Enterprise 10.8.1 (also unchangeable), and WABDevEd 2.16 to match 10.8.1. I am using the Popup Panel v2.17 from 9/19/2020. This is in an application only intended for desktop use (i.e., not mobile). Any other info needed?

Thanks!

Jena

[RobertScheitlin__GISP]

Is the popup panel widget in the anchor bar controller or one of the onscreen widget placeholders?

[JenaF]

Anchor bar controller is my preferred location for it. 

[RobertScheitlin__GISP · Accepted solution]

@JenaF 

So here are the changes to be made to the widget.js file:

//Change the onOpen function to this.
      onOpen: function () {
        this.removeEvtHandlers();
        this.setEvtHandlers();
        if(this.popup.features.length > 1){
          domUtils.show(this.pager);
          domClass.add(this.previous, "hidden");
          domClass.remove(this.next, "hidden");
          domClass.remove(this.clearSel, "hidden");
        }else if (this.popup.features.length === 1){
          domUtils.show(this.pager);
          domClass.add(this.previous, "hidden");
          domClass.add(this.next, "hidden");
          domClass.add(this.clearSel, "hidden");
        }else{
          domUtils.hide(this.pager);
          domClass.add(this.clearSel, "hidden");
        }
        this.displayPopupContent(this.popup.getSelectedFeature());
        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');
      },

//Add this onClose function
      onClose: function () {
        this.removeEvtHandlers();
        var mapMan = MapManager.getInstance();
        mapMan.resetInfoWindow(false);
        if(!mapMan.isMobileInfoWindow){
          html.removeClass(query('.esriPopup')[0], 'myPopupHidden');
        }
        this.popup.reposition();
      },

In the css\style.css file comment out this css rule:

.esriPopup .actionsPane {
  background-color: inherit;
}

so that it looks like this:

/* .esriPopup .actionsPane {
  background-color: inherit;
} */

[JenaF]

Thanks for all the details! I'll give it a shot and let you know how it goes.

[JenaF]

@RobertScheitlin__GISP - thanks so much! It's working great, and I was able to change the panel dimensions from another one of your posts. As others have noted, your contributions are so very valuable.

-Jena