topic Re: Clear Widget and Map on Close in ArcGIS Experience Builder Questions

Clear Widget and Map on Close

EMiller_2 — Thu, 07 Sep 2023 18:34:54 GMT

I have created a custom widget with input boxes which creates a graphic on a map. I have a "Trash Can" icon button on the widget which the user can hit to clear the map and all input info in the widget. This all works fine.

I would like to use the widget from the (out of the box) top widget ribbon, which allows for a nice icon button that opens and closes the widget. When the widget is open there is then also a "Close X" at the right top hand corner of the widget.

My problem is that if the user closes the widget using the "X" or the ribbon icon button, the widget dialog box will close but it won't clear and the map won't clear (if the user hasn't hit the "Trash Can" button first). I would like closing the widget to function just like hitting the "Trash Can" button, but I can't see how to capture the closing event.

I have tried using componentWillUnmount and componentDidUpdate but I have not been successful.

I have already seen this post on the widget close event but it is not helping me out -- maybe someone can clarify or elaborate?
https://community.esri.com/t5/arcgis-experience-builder-questions/widget-close-event/m-p/1040177/thread-id/1658

Thanks in advance!

Re: Clear Widget and Map on Close

JeffreyThompson2 — Thu, 07 Sep 2023 19:21:15 GMT

Are you using class based or function based React components? I assume that you are using class based as componentWillUnmount and componetDidUpdate have been replaced by useEffect in function based React. Regardless, I believe the reason these methods did not work for you is that in Experience Builder widgets never actually unmount. They just hide when they are dismissed. (I am not 100% sure that is factual.) I did something like this in a class based component to watch if it was closed in a widget controller.

componentDidUpdate (prevProps) { if (prevProps.state === 'CLOSED') { return this.functionToRestartYourWidget() } if (this.props.state === 'CLOSED') { this.fuctionToCloseYourWidget() } }

Re: Clear Widget and Map on Close

EMiller_2 — Fri, 08 Sep 2023 15:39:36 GMT

Thanks Jeffrey! You put me on the right track -- I can't believe how simple the solution was. (Yes, it is a class based widget). All I did was this and it is working perfectly now. Hopefully I'm not overlooking something but this did the trick:

componentDidUpdate () { if (this.props.state === 'CLOSED') { console.log("I'm closed!") this.myWidget.clear(); this.mydrawLayer.removeAll(); this.setState({ inputText: "", }); }

Re: Clear Widget and Map on Close

SupakornAngaumnuaysiri1 — Thu, 26 Oct 2023 03:27:21 GMT

@EMiller_2 Where does insert this code? File in Server or Client.

Re: Clear Widget and Map on Close

JeffreyThompson2 — Thu, 26 Oct 2023 12:30:30 GMT

This code would go within the widget.tsx of a class based widget.

Re: Clear Widget and Map on Close

SupakornAngaumnuaysiri1 — Fri, 27 Oct 2023 03:09:04 GMT

Thanks for your reply.

Re: Clear Widget and Map on Close

tzhaigeo — Sun, 18 Aug 2024 15:14:59 GMT

Re: Clear Widget and Map on Close

tzhaigeo — Sun, 18 Aug 2024 15:27:16 GMT

I believe custom widget is NOT unmounted when it is closed in Exb, just hidden, this is a problem in that the things you want to do in componentWillMount (e.g. read selected feature on a map when the widget is reopened) will not run because the widget is not unmounted after that very first time being loaded. Is there any way to force unmount a widget when its state becomes 'CLOSED' (i.e. this.props.state === 'CLOSED'), I mean there ought be ways to force remove widget from DOM, so the will mount hook can run after close. I tried a number of ways, a browser refresh seems to be only reliable way to reset the state fully. Full disclosure, I've tried the following ways:

ReactDOM.unmountComponentAtNode/componentDidUpdate

WidgetManager.destroyWidgetByUri

Appreciate any suggestion that can reliably unmount the widget when it is close.