Data action

What is a data action

A data action processes a collection of data records in an extensible way. Data actions can be provided by the framework or by widgets. They can be consumed by widgets to perform operations on data records, such as exporting data or zooming to features on a map.

Interface and lifecycle

The data action is defined by the DataAction interface, which has two important methods:

• isSupported is invoked to check whether the action can process the data. Unsupported data actions are hidden at runtime.
• onExecute will be invoked when a user clicks the data action.

Both methods receive an array of DataRecordSet instances, which include the data source, an optional record array, and fields. Both methods also receive the DataLevel and widgetId parameters. DataLevel indicates whether the DataRecordSet contains all records or a subset of the records.

Declaration of data actions

The framework provides data actions, such as export to CSV and export to JSON. Widgets can provide data actions as well. For instance, the Map widget provides the "pan to" and "zoom to" data actions.

Data actions can be implemented in a widget by declaring the actions in the manifest.json and creating a class that extends AbstractDataAction.

Add settings UI

Some data actions may include a settings UI to configure the action's behavior. To achieve this, declare the settingUri in manifest.json.

A settings UI component is a React component with injected props. When the user changes the config, call this.props.onSettingChange to save the config, which will be available in the onExecute method.

Below is a snippet that shows how a data action is declared in the manifest.json

1
2
3
4
5
6
7
8
9
"dataActions": [
    {
      "name": "showOnMap",
      "label": "Show on map",
      "uri": "data-actions/show-on-map",
      "settingUri": "data-actions/show-on-map-setting",
      "icon": "runtime/assets/icons/ds-map-view.svg"
    }
]

Consume actions in widgets

In addition to providing actions, a widget can consume data actions. To use data actions in a widget, declare canConsumeDataAction: true in the widget manifest.json, then import DataActionList from jimu-ui and render it in the widget UI.

1
2
3
4
import { DataActionList } from 'jimu-ui'

// Inside your widget component render
<DataActionList widgetId={props.id} dataSets={dataRecordSets} />

Code examples

1
2
3
4
5
6
7
8
9
10
11
12
13
import { AbstractDataAction, DataRecordSet, DataLevel } from 'jimu-core'

export default class ShowOnMapAction extends AbstractDataAction {
  isSupported(dataSets: DataRecordSet[], dataLevel: DataLevel, widgetId?: string): boolean {
    // Return whether the datasets meet your criteria
    return true
  }

  async onExecute(dataSets: DataRecordSet[], dataLevel: DataLevel, widgetId?: string): Promise<boolean> {
    // Implement action behavior
    return true
  }
}