nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Widget Close Event

RobertScheitlin__GISP

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

Encuentra más publicaciones etiquetadas con

Accepted answers

RobertScheitlin__GISP

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

All comments

PhilLarkin1

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

RobertScheitlin__GISP

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

PhilLarkin1

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?

DavidMartinez

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

}

RobertScheitlin__GISP

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

RobertScheitlin__GISP

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.