Data sources

Data source defines how your widget accesses data. All the data sources for a published experience are saved in the dataSources properties of the app config. The config.json is located in the server/src/public/apps/ folder. In the snippet below, this dataSources property has one data source of type WEB_MAP.

"dataSources": {
    "dataSource_1": {
      "type": "WEB_MAP",
      "itemId": "cb5329a59a354904a035de57f85112d3",
      "id": "dataSource_1",
      "label": "US Breweries",
      "portalUrl": ""

The use of a data source in a widget is declared in the app config with the property useDataSoures.

 "useDataSources": [
          "dataSourceId": "dataSource_1"

It is recommended your widget provides a setting UI that allows the selection of a data source in a widget. To accomplish this, you would use the DataSourceSelector component to select data sources in the setting UI. Please review the creating a setting UI for more details. At runtime, the DataSourceComponent is used to retrieve the data source object and data source info. The info includes the following:

  • status: whether the data is loading or loaded
  • saveStatus: whether the data is saving or saved
  • selectedIndexes: the selected data indexes
  • selectedIds: the selected data IDs
  • version: the version number is to manage the data change in the client side, so all the data source consumers can know when the data is changed.

The selected data source ids/indexes can be put in the URL as a query parameter using datasource.selectRecord or datasource.selectRecordById.


We have wrapped WebMap/WebScene as data sources in the jimu-arcgis package. To access a WebMap, use WebMapDataSource and WebSceneDataSource for a WebScene. Please review the MapView sample to learn how to use these data sources. In addition to the WebMap/WebScene object, all the layers in these objects are wrapped as data sources as well, which allows you to call getChildDataSources to get all the layer data sources. Please note: only feature layer is supported for now; other layers will not be created as data source.


In some workflows, you will be required to create a lightweight experience that works with feature layers directly. In this scenario, you will use the FeatureLayerDataSource classes. A widget using a standalone feature layer will get a FeatureLayerDataSource object without the layer property, however using a feature layer from a webmap or webscene will return a FeatureLayerDataSource object with the layer property. The Layer object is from the ArcGIS API for JavaScript.


 const getLayerObject = (ds: FeatureLayerDataSource) => {
    return ds.layer; // this can be null

Repeated data source

In addition to accessing a data source by the DataSourceComponent, a widget can also access a repeated data source by this.props.repeatedDataSource. In the repeated data source, you can get the data source's id, record, and recordIndex. Any widget can provide repeated data source by using RepeatedDataSourceProvider. The List widget is a good example that provides a repeated data source. To use a repeated data source, you need to add the supportRepeat property in your widget's manifest. All children widgets of the widget that provide a data source will receive the repeated data source. This is similar to React's Context.

      const contextDs = this.props.repeatedDataSource as RepeatedDataSource;

Sharing data between widgets

It is a common workflow that widgets will share the same data. A good illustration of this is using a Map and List widget in an experience. When a feature is selected in the List widget, the corresponding feature is selected on the map. The easiest way to accomplish this is to use the same data source for both widgets. For example, when an item is selected in the List widget, the widget will call datasource.selectRecord() to update the data source status in the app store. This allows the Map widget to render the current selected item accordingly. In addition, the current selected item will be placed in the URL, which enables you to share the current app state with others.

Widget generated data source

A widget can generate data sources, which can be used by other widgets. To implement this, you must declare the generated data sources in the app config using the outputDataSources property and set the data source schema in the dataSources property. Generally, this is done in the widget setting UI and at runtime to create data sources accordingly. Learn more in the feature layer widget sample.