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

Triggering data actions from a custom widget

MaxDiebold

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.

Vind meer berichten getagd met

Accepted answers

MaxDiebold

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.

All comments

TimWestern

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.)

JarrettGreen

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.

TimWestern

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)

      // <a href="https://community.esri.com/t5/user/viewprofilepage/user-id/69004">@ts</a>-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.

TimWestern

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?

LucasAmarante

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.

chapmunnhsc

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

JillianStanford

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!

chapmunnhsc

@JillianStanford did you ever figure this out?

JillianStanford

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

chapmunnhsc

@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?

JillianStanford

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!

chapmunnhsc

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

Might answer my own Q.

chapmunnhsc

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

MaxDiebold

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.

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.