topic Re: custom function on X button in ArcGIS JavaScript Maps SDK Questions

custom function on X button

SurajJha1 — Wed, 19 Jun 2019 15:24:04 GMT

Hi, I want to write my own function on click of cross (X) button of esri popup using ArcGIS API for javascrpt 4.x.

If you have ideas of sample about it, please share.

Thanks in advance

Re: custom function on X button

DavidWilson3 — Sat, 11 Dec 2021 23:51:56 GMT

Hi Suraj,

Here is something quick I wrote up that creates an action for the "X" Esri close icon and allows you to have a trigger function associated with it. I also recommend you to take a look at the documentation of the esri/widgets/popup class to help you further: Popup | ArcGIS API for JavaScript 4.11

// Defines an action
var exampleAction = {
 // This text is displayed as a tooltip
 title: "Example Action",
 // The ID used to reference this action in the event handler
 id: "example-action",
 // Sets the icon font used to style the action button
 className: "esri-popup__icon esri-icon-close"
};
// Adds the custom action to the popup
view.popup.actions.push(exampleAction);

// Fires each time an action is clicked
view.popup.on("trigger-action"), function(event){
 // If the example-action action is clicked, than execute the following code
 if(event.action.id === "example-action"){
 // Your custom code....
 }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: custom function on X button

SurajJha1 — Thu, 20 Jun 2019 15:35:02 GMT

Thanks David, It is really helpful. but my requirement is to change the behavior of default esri popup X button.

If you have any idea please share.

Re: custom function on X button

DavidWilson3 — Thu, 20 Jun 2019 16:47:08 GMT

Suraj,

I see, well keep in mind that the "default" esri popup x button is just a generic div button with a class of "esri-popup__button" and they just make the aria-label and title of it "Close". Perhaps try looking into assigning an id to it so you can do stuff to it in your script or try and use something like my example and replace the default with it.

Re: custom function on X button

rogenjh — Wed, 12 May 2021 18:06:10 GMT

This feels like a ridiculous solution and many of the people here are much smarter than me at this stuff - but I have a specific use case where I need to listen on the click of X vs the popup closing. Maybe some folks can iterate and make it better.

watchUtils.whenTrue(this.view.popup, 'visible', () => {

setTimeout(() => {

const closeBtn = query('.esri-popup__button');

if (closeBtn[0]) {

on(closeBtn[0], 'click', () => {

this.popupClosed();

});

}

}, 1000);

});