topic Re: Triggering data actions from a custom widget in ArcGIS Experience Builder Questions

Triggering data actions from a custom widget

MaxDiebold — Fri, 23 Sep 2022 14:15:37 GMT

I want to enable a custom widget to consume the "View in Table" data action provided by the Table widget, but I don't want to use the DataActionDropDown component. How do I trigger the action programmatically? I don't see any methods to do so in the DataActionManager class.

Re: Triggering data actions from a custom widget

MaxDiebold — Fri, 23 Sep 2022 18:04:28 GMT

Never mind, figured it out. Once an action object is obtained from

DataActionManager.getInstance().getActions();

and the specific action is found, its `onExecute()` function can be called directly.

Re: Triggering data actions from a custom widget

chapmunnhsc — Tue, 21 Mar 2023 18:05:24 GMT

Max -

How did you import the DataActionManager? Where does it come from? There is like zero documentation on it. Also, did you figure out how to pass a Feature Layer to the Table action?

Thanks

Re: Triggering data actions from a custom widget

chapmunnhsc — Tue, 21 Mar 2023 18:08:05 GMT

import AppDataActionManager from './lib/app-data-action-manager';

Might answer my own Q.

Re: Triggering data actions from a custom widget

JillianStanford — Wed, 01 Nov 2023 15:26:01 GMT

Hello @chapmunnhsc !

This is a few months old but did you get this functionality working?

I managed to get the View in Table data action but I can't quite figure out how to pass in my feature layer.

Thank you!

Re: Triggering data actions from a custom widget

chapmunnhsc — Wed, 22 Nov 2023 15:32:26 GMT

@JillianStanford -

I didn't figure it out! I think I duct taped together a solution. However, I'm not at the point where I want to add a client side feature layer to the out of the box Table widget.

Any chance you know how to do that?

Re: Triggering data actions from a custom widget

JillianStanford — Mon, 27 Nov 2023 16:25:03 GMT

Hi @chapmunnhsc,

Thanks for the reply.

I'm in the same boat and cannot figure it out! I'm finding developing for this platform incredibly frustrating. If I could start over, I would not use it.

I think I need to create an output data source that can be consumed by other widgets but can't figure out how to get it wired up.

If I figure it out, I will post it here.

Thanks!

Jill

Re: Triggering data actions from a custom widget

chapmunnhsc — Thu, 07 Mar 2024 18:51:03 GMT

@JillianStanford did you ever figure this out?

Re: Triggering data actions from a custom widget

JillianStanford — Thu, 07 Mar 2024 19:25:16 GMT

Hi there @chapmunnhsc ,

I cobbled something together and posted it here - Custom Widget Output Datasource

Not sure if it's the most elegant solution but I'm relieved to have something working after months of frustration!

Re: Triggering data actions from a custom widget

chapmunnhsc — Thu, 07 Mar 2024 19:39:22 GMT

@JillianStanford way to keep at it and figure it out! I'm about to ping you with another question...

Re: Triggering data actions from a custom widget

LucasAmarante — Wed, 13 Mar 2024 14:44:35 GMT

Good morning dear,
How do I create a Data RecordSet (https://developers.arcgis.com/experience-builder/api-reference/jimu-core/DataRecordSet/) from a record that contains feature and dataSource to pass as a parameter to onExecute() ??

Can anybody help me? any example?

Thanks.

Re: Triggering data actions from a custom widget

TimWestern — Fri, 30 Aug 2024 13:30:03 GMT

I recently went through a similar issue, and realized that state and props, aren't always the same when the widgets load, this lead to me looking into the Redux part of the React implementation in Experience builder. Did you find you had to use a similar solution?

Re: Triggering data actions from a custom widget

TimWestern — Fri, 30 Aug 2024 13:49:55 GMT

I know you were asking about this in march, but here's how I approached it:

In the action.ts file for the action (note whatever I named the action I'd name it like name-for-action.ts
(where named-for is a kebab case version of the action name.)

Here is a genericized version of an example of onExecute in that class:

onExecute (message: Message, actionConfig?: any): boolean | Promise<boolean> { if (message.type === MessageType.DataRecordsSelectionChange) { const dataRecordSetChangeMessage = message as DataRecordSetChangeMessage const widgetId = dataRecordSetChangeMessage.widgetId console.log('Received data recordSetChangeMessage:', dataRecordSetChangeMessage) // @ts-expect-error const records = dataRecordSetChangeMessage.records || [] if (records.length > 0) { const selectedRecord = records[0] const selectedFeature = selectedRecord?.feature if (selectedFeature) { const selectedAttributes = { attributes: selectedFeature.attributes, // (Note attribute_value_of_note in the system I was using could be lowercase or all upper case depending on whether it is a hosted layer or not) It is a generic name and could be replaced with any field you'd find in the feature.attriubtes that are returned. attribute_value_of_note: selectedFeature.attributes.ATTRIBUTE_VALUE_OF_NOTE || selectedFeature.attributes.attribute_value_of_note, feature: selectedFeature, geometry: selectedFeature.geometry } console.log('Dispatching selected attribute_value_of_note attributes:', selectedAttributes) // Dispatch actions to the new Redux store extension getAppStore().dispatch(setSelectedAttributeOfValue(selectedAttributes.attribute_value_of_note)) getAppStore().dispatch(setSelectedAttributes(selectedAttributes.attributes)) // Convert geometry to JSON before dispatching getAppStore().dispatch(setSelectedGeometry(selectedFeature.geometry)) getAppStore().dispatch(setSelectedFeature(selectedFeature)) // If needed, you can still poll for state updates in the new store this.pollForSelectedAttributeOfValue(widgetId) .then(() => { console.log('selectedAttributeOfValue successfully stored in the Redux store.') }) .catch((error) => { console.error(error.message) }) } else { console.error('No feature found in the selected record.') return false } } else { console.error('No records found in the message.') return false } } else { console.error('Message type does not match.') return false } return true }

action-types.ts

// action-types.ts export enum YourActionKeys { SetSelectedAttributeOfNote = 'SET_SELECTED_ATTRIBUTE_OF_NOTE', SetSelectedAttributes = 'SET_SELECTED_ATTRIBUTES', SetSelectedGeometry = 'SET_SELECTED_GEOMETRY', SetSelectedFeature = 'SET_SELECTED_FEATURE' }

actions.ts

// actions.ts import { YourActionKeys } from './action-types' export const setSelectedAttributeOfNote = (attributeOfNote: string) => ({ type: YourActionKeys.SetSelectedAttributeOfNote, attributeOfNote }) export const setSelectedAttributes = (attributes: any) => ({ type: YourActionKeys.SetSelectedAttributes, attributes }) export const setSelectedGeometry = (geometry: __esri.Geometry) => { const geometryJSON = geometry.toJSON() // Convert to plain JSON object return { type: YourActionKeys.SetSelectedGeometry, geometry: geometryJSON } } export const setSelectedFeature = (feature: __esri.Geometry) => { return { // Note instead of setting up an Enum you could actually just have the string like this) type: 'SET_SELECTED_FEATURE', payload: feature } }

then in the store file for your widget. you need a getReducer method (but some of the interface and setup for the store can be defined here too:

// my-store.ts import { type extensionSpec, type ImmutableObject, type IMState } from 'jimu-core' import { YourActionKeys } from './action-types' // interface MyState { // selectedAttributeOfNote: string | null // selectedAttributes: any // } // Note I used any because its often quicker than trying to speck out the deeply nested structures that might be returned. If you want more type checking, definitely choose something other than any. export interface YourWidgetStoreState { selectedAttributeOfNote: string | null selectedAttributes: any selectedGeometry: __esri.Geometry | null selectedFeature: any } export interface StateForYourWidgetStore extends IMState { YourWidgetStoreState: ImmutableObject<YourWidgetStoreState> } type IMYourWidgetStoreState = ImmutableObject<YourWidgetStoreState> export default class YouWidgetStoreExtension implements extensionSpec.ReduxStoreExtension { id = 'your-results-store-extension' getActions () { return Object.keys(YourActionKeys).map(k => YourActionKeys[k]) } getInitLocalState () { return { selectedAttributeOfNote: null, selectedAttributes: null, selectedFeature: null, selectedGeometry: null } } getReducer () { return (localState: IMYourWidgetStoreState, action: any, appState: IMState): IMYourWidgetStoreState => { switch (action.type) { case YourActionKeys.SetSelectedAttributeOfNote: return localState.set('selectedAttributeOfNote', action.attribute_of_note) case YourActionKeys.SetSelectedAttributes: return localState.set('selectedAttributes', action.attributes) case YourActionKeys.SetSelectedGeometry: return localState.set('selectedGeometry', action.geometry) case YourActionKeys.SetSelectedFeature: return localState.set('selectedFeature', action.feature) default: return localState } } } getStoreKey () { return 'YourWidgetStoreState' } }

In theory you can generically then get access to what you stored when the action is triggered by just doing this:

const store = getAppStore() const storeState = store.getState() as StateForYourWidgetStore // Access yourWidgetStoreState directly from the store const yourWidgetStoreState = storeState.yourWidgetStoreState console.log('storeState.yourWidgetStoreState: ', yourWidgetStoreState) if (yourWidgetStoreState && yourWidgetStoreState.selectedAttributeOfNote) { console.log(`Detected existing yourWidgetStoreState with attribute of note: ${yourWidgetStoreState.selectedAttributeOfNote}`) } else { console.log('No existing yourWidgetStoreState or attribute of note found.') }

In this example I was able to check this when the widget opened at construction, but in theory you could do it in whatever function in your widget would receive that message call.

Re: Triggering data actions from a custom widget

JarrettGreen — Thu, 31 Oct 2024 16:16:48 GMT

Trying to wrap my head around Redux. In your scenario, what is the mechanism for calling onExecute? I would think there is some listener waiting to intercept a Message from the framework or another widget which then triggers the onExecute to handle it.

Re: Triggering data actions from a custom widget

TimWestern — Thu, 31 Oct 2024 17:47:56 GMT

That's the genius part about actions, once you have it published, when you go to the actions tab in the dashboard to configure the experience you can select the widget, and the action, and do additional configuration (if there are custom settings desired)

To preempt what might be your next question (how to register your action with the experience) here's one possibly way it could be done. Put this somewhere in componentDidMount and it will make sure the acftion is registered for the widget

const registerWithTimeout = new Promise((resolve, reject) => { const timeout = setTimeout(() => { reject(new Error('registerAction timed out')) }, 5000) // Adjust time as needed MessageManager.getInstance().registerAction(selectParcelAction) .then((actionResult) => { clearTimeout(timeout) resolve(actionResult) }) .catch((error) => { clearTimeout(timeout) reject(error) }) }) try { await registerWithTimeout console.log('componentDidMount: SelectParcelAction registered successfully.') } catch (error) { console.error('componentDidMount: Error or timeout during action registration:', error) }

Now I'll admit this is a bit more complex then what every action may need, I currently have my action wrapped in a timeout so that it doesn't keep registering while state updates are occurring. In theory you shouldn't need anything more than

MessageManager.getInstance().registerAction(selectParcelAction)

This enables you to configure in the experience with messages get notified when certain actions happen in another widget (and in my example I used the default search widget to use it to not only query and store some info in appStore, but to launch / open the widget too.)