Clear Widget and Map on Close

[EMiller_2]

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/thr...

Thanks in advance!

[JeffreyThompson2]

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()
  }
}

[tzhaigeo]

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 it is state is 'CLOSED', please advise.

[EMiller_2 · Accepted solution]

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: "",    
      });
    }

[SupakornAngaumnuaysiri1]

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

[JeffreyThompson2]

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

[SupakornAngaumnuaysiri1]

Thanks for your reply. 

[tzhaigeo]

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.