nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Popup actions - Capture Close Event

AndrewMurdoch1

Hey

Is there anyway to capture the close event on the Popup? It's great I can easily launch the Popup, but I want to know when the user closes it. Specifically this close button:

Thanks

Vind meer berichten getagd met

Accepted answers

RobertScheitlin__GISP

Andrew,

In 3.x you look for the popups hide event

https://developers.arcgis.com/javascript/3/jsapi/popup-amd.html#event-hide

In 4.x

        watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenTrue</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">,</SPAN><SPAN class="string token">'visible'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenFalseOnce</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">,</SPAN><SPAN class="string token">'visible'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'popup has been closed'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

RobertScheitlin__GISP

Andrew,

In 3.x you look for the popups hide event

https://developers.arcgis.com/javascript/3/jsapi/popup-amd.html#event-hide

In 4.x

        watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenTrue</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">,</SPAN><SPAN class="string token">'visible'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenFalseOnce</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">,</SPAN><SPAN class="string token">'visible'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'popup has been closed'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

AndrewMurdoch1

Thanks! That's exactly what I was looking for

PasiSavolainen

In 4.25 I get this warning

[esri.core.watchUtils] 🛑 DEPRECATED - Module: esri/core/watchUtils
🛠️ Replacement: esri/core/reactiveUtils
:gear:Version: 4.24

I have tried to use reactiveUtils but without success, the watchUtils example works ok. Here is the example that works and the other that I'm not able to get to work.

//works!
watchUtils.whenTrue(view.popup,'visible', () => {
	watchUtils.whenFalseOnce(view.popup,'visible', () => {
	  console.info('popup has been closed');
	})
});
//doesn't work
reactiveUtils.whenOnce(() => view.popup.visible).then(() => {
	reactiveUtils.whenOnce(() => !view.popup.visible).then(() => {
	  console.info('how to get here?');
	})
});

Made a new question for this problem:

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/popup-capture-close-event-in-4-2x/m-p/1295262#M81291

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.