topic Re: Widget Close Event in ArcGIS Experience Builder Questions

Widget Close Event

RobertScheitlin__GISP — Wed, 24 Mar 2021 14:01:18 GMT

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

Re: Widget Close Event

RobertScheitlin__GISP — Wed, 24 Mar 2021 14:50:14 GMT

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

Re: Widget Close Event

RobertScheitlin__GISP — Fri, 26 Mar 2021 15:19:01 GMT

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

Re: Widget Close Event

DavidMartinez — Fri, 26 Mar 2021 16:44:43 GMT

@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);

}

Re: Widget Close Event

PhilLarkin1 — Wed, 28 Apr 2021 18:53:40 GMT

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.

@RobertScheitlin__GISP Were you able to use appActions?

Re: Widget Close Event

RobertScheitlin__GISP — Wed, 28 Apr 2021 19:33:33 GMT

@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));

Re: Widget Close Event

PhilLarkin1 — Wed, 28 Apr 2021 23:32:48 GMT

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