Widget Close Event

470
6
Jump to solution
03-24-2021 07:01 AM
RobertScheitlin__GISP
MVP Esteemed Contributor

How do you listen for and execute code in your widget on panel close?

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

@PhilLarkin1 

Sure this is what I got working for closing the widget (i.e. the widget closing itself from the code)

this.props.dispatch(appActions.closeWidget(this.props.id));

 and for messaging other widgets of some data:

this.props.dispatch(appActions.widgetStatePropChange(this.props.id, 'pSearchData', cTextElements));

View solution in original post

6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

OK, this is what I got working but I am not sure if this is the recommended workflow.

 

  componentDidUpdate() {
    const {view} = this.state.jimuMapView
    let widgetState: WidgetState = getAppStore().getState().widgetsRuntimeInfo[this.props.id].state;
    if(widgetState === WidgetState.Closed){
      view.map.remove(this.resultLayer);
      view.map.remove(this.bufferFeatureLayer);
      view.popup.close;
    }else if(widgetState === WidgetState.Opened){
      view.map.add(this.resultLayer);
      view.map.add(this.bufferFeatureLayer);
    }
  }

 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

@DavidMartinez Is there not a close or onClose function for widgets?

0 Kudos
DavidMartinez
Esri Regular Contributor

@RobertScheitlin__GISP  Since Experience Builder is based on React you would get a widget's state from 'this.props.state' to listen to the state change and check this property in componentDidUpdate method. To control opening and closing widgets inside a controller we have app actions. For example, 

/**
* Dispatch a action to open a widget
* @param widgetId The id of a exb widget
*/
export const dispatchOpenWidget = (widgetId: string) => {
const action = appActions.openWidget(widgetId);
getAppStore().dispatch(action);
}

 

PhilLarkin1
Occasional Contributor III

Thanks @DavidMartinez 

Will documentation for appActions and getAppStore be created on the Api Reference page?
https://developers.arcgis.com/experience-builder/api-reference/

I'm trying to troubleshoot a scenario where the Editor widget will be populated with data, but not open. I'm using the code you posted here. 

const action = appActions.openWidget(this.state.editorWidget.id);
console.log(action)

//{type: "OPEN_WIDGET", widgetId: "17919c5e87a-widget-1"}
//type: "OPEN_WIDGET"
//widgetId: "17919c5e87a-widget-1"
//__proto__: Object

getAppStore().dispatch(action); 


It appears the widget is getting the message to enter an edit workflow because the fields are correctly populated. This image shows the widget after I open it via click. 

PhilLarkin1_0-1619635827268.png

 

@RobertScheitlin__GISP Were you able to use appActions? 


 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

@PhilLarkin1 

Sure this is what I got working for closing the widget (i.e. the widget closing itself from the code)

this.props.dispatch(appActions.closeWidget(this.props.id));

 and for messaging other widgets of some data:

this.props.dispatch(appActions.widgetStatePropChange(this.props.id, 'pSearchData', cTextElements));

View solution in original post

PhilLarkin1
Occasional Contributor III

Thanks for your help. Using the id generated from props was the key. 

0 Kudos