Select to view content in your preferred language

Clear Widget and Map on Close

1128
5
Jump to solution
09-07-2023 11:34 AM
EMiller_2
New Contributor III

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!

 

0 Kudos
1 Solution

Accepted Solutions
EMiller_2
New Contributor III

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

 

 

View solution in original post

5 Replies
JeffreyThompson2
MVP Regular Contributor

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

 

GIS Developer
City of Arlington, Texas
EMiller_2
New Contributor III

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
New Contributor II

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

0 Kudos
JeffreyThompson2
MVP Regular Contributor

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

GIS Developer
City of Arlington, Texas
SupakornAngaumnuaysiri1
New Contributor II

Thanks for your reply. 

0 Kudos