topic Re: custom widget: recommended way to pass data from action to widget.tsx in ArcGIS Experience Builder Questions

custom widget: recommended way to pass data from action to widget.tsx

john_cartwright_noaa — Thu, 11 Nov 2021 01:01:55 GMT

Hello All,

I have a custom widget which is listening for a Message (e.g. DataSourceFilterChangeMessage). The logic for handling the message is in an implementation of AbstractMessageAction in the src/actions folder. What is the recommend way to pass data captured in theAbstractMessageAction#onExecute method out to the src/runtime/widget.tsx?

Thanks!

--john

Re: custom widget: recommended way to pass data from action to widget.tsx

john_cartwright_noaa — Thu, 11 Nov 2021 19:57:10 GMT

I've settled on an approach of publishing the value to the widget's store w/in the Action, e.g.

getAppStore().dispatch(appActions.widgetStatePropChange(this.widgetId, 'queryString', queryString));

and then retrieving it in the widget.tsx via the props.stateProps, e.g.

<h2>{props.stateProps.queryString}</h2>

If anyone has a better suggestion, I'd be glad to hear it.

--john

Re: custom widget: recommended way to pass data from action to widget.tsx

RobertScheitlin__GISP — Mon, 15 Nov 2021 14:08:05 GMT

@john_cartwright_noaa

I am not really sure how you are resolving "props.stateProps.queryString" in your widget. I don't see "stateProps" in the widgets props object.

This is how I am doing it (not saying that this is necessary better).

Sending Widget :

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

Receiving Widget:

interface ExtraProps{ pSearchData: any } .... export default class Widget extends React.PureComponent<AllWidgetProps<IMConfig> & ExtraProps, State>{ static mapExtraStateProps = (state: IMState, ownProps: AllWidgetProps<IMConfig>): ExtraProps => { let wId: string; for (const [key, value] of Object.entries(state.widgetsState)) { if(value.pSearchData){ wId = key; } } return { pSearchData: state.widgetsState[wId]?.pSearchData } } .... //Then else where in the widget code I use the extra prop this.props.pSearchData