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?

Vind meer berichten getagd met

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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