Is it possible to create a DataSource from a client-side feature layer with DataAction enabled?

[MohammedHilal_K]

Hi, 
@YueyangLi @QunSun @JeffreyThompson2 @Wei_Ying 

I'm preparing a client-side feature layer and I want to add it to the map. I also want to enable DataActions so I can perform actions like Add To Table, Set Filter, Pan To, Export, etc. I've tried several approaches, including the following samples:

const polygonGraphic = new Graphic({

            geometry: {

              type: 'polygon',

              rings: [

                [

                  [350000, 6250000],

                  [350500, 6250000],

                  [350500, 6250500],

                  [350000, 6250500],

                  [350000, 6250000]

                ]

              ],

              spatialReference: { wkid: 3308 }

            },

            attributes: {

              OBJECTID: 1,

              Name: 'DemoArea',

              Type: 'Test'

            }

          })

          const demoLayer = new FeatureLayer({

            source: [polygonGraphic],

            objectIdField: 'OBJECTID',

            geometryType: 'polygon',

            spatialReference: { wkid: 3308 },

            fields: [

              { name: 'OBJECTID', alias: 'OBJECTID', type: 'oid' },

              { name: 'Name', alias: 'Name', type: 'string' },

              { name: 'Type', alias: 'Type', type: 'string' }

            ],

            title: 'Demo_3308_Layer'

          })

const demoLayerLayerView = await jimuMapView.createJimuLayerView(demoLayer, `runtime_layer_${dsId}`, 0, null, true)

The layer view is created successfully, but when I try to create the DataSource using the layer view:

const ds = await demoLayerLayerView.createLayerDataSource()
…it returns null.

I also tried creating a dataSourceJson object manually:

const dataSourceJson: IMDataSourceJson = Immutable({

            id: demoLayer.id,

            label: demoLayer.title,

            sourceLabel: 'Client-Side Layer',

            type: 'FEATURE_LAYER',

            geometryType: demoLayer.geometryType,

            isDataInDataSourceInstance: true, // means data will live in memory

            isOutputFromWidget: true,

            isHidden: false,

            disableExport: false,

            schema: schema,

            data: [demoLayer.source.items[0].attributes], // optional initial empty dataset

            useFields: Object.keys(fieldsSchemaObj),

          });

const dsOptions: DataSourceConstructorOptions = {

            id: dsId,

            dataSourceJson: dataSourceJson

          }

const ds1: FeatureLayerDataSource = await DataSourceManager.getInstance().createDataSource(dsOptions)

const message = new DataSourcesChangeMessage(props.widgetId, DataSourcesChangeType.Create, [ds1])

MessageManager.getInstance().publishMessage(message)

This creates a DataSource, but DataActions are not enabled. Any help or guidance on enabling DataActions for a client-side feature layer would be appreciated.

[YueyangLi]

Hi @MohammedHilal_K, to create a client-side data source, add it to the map widget and enable data actions.

1. Create a data source

const options = {
  id: 'ds_id',
  dataSourceJson: {
    id: 'ds_id',
    type: DataSourceTypes.FeatureLayer,
    label: 'ds_label',
  },
  layer: featureLayer // your client-side feature layer created by Maps SDK for JavaScript
  // No need to set schema as the data source manager will generate one from the layer.
  // No need to set isDataInDataSourceInstance to true as this property indicates the data source uses the sourceRecords (not layer) as its source.
}
const ds = await DataSourceManager.getInstance().createDataSource(options)

2. Add it to the map widget

const layerView = await jimuMapView.addLayerToMap(dataSourceId, dataSourceId + '__layer')

3. Enable data actions

3.1 Declare your widget can consume data action in manifest.json

"properties": {
  "canConsumeDataAction": true
}

3.2 Use DataActionList component in your widget

{
  props.enableDataAction !== false &&
  <DataActionList
    widgetId={widgetId} dataSets={[{ dataSource: ds, records: [], name: ds.getDataSourceJson().label }]}
    listStyle={DataActionListStyle.Dropdown} buttonSize='sm' buttonType='tertiary' hideGroupTitle />
}

Please let me know if you have other questions.

[MohammedHilal_K]

Hi @YueyangLi 
I followed the suggested steps, but I’m getting the error “e.set is not a function” (please see the attached screenshot).

While experimenting with different properties in the dataSourceJson object, I noticed that the data source gets created when I include 'isOutputFromWidget: true'. So, I updated my data source options as follows:

const options = {
            id: 'ds_id',
            dataSourceJson: {
              id: 'ds_id',
              label: 'ds_label',
              type: DataSourceTypes.FeatureLayer,
              isOutputFromWidget: true,
            
            },
            layer: demoLayer // your client-side feature layer created by Maps SDK for JavaScript
          }
          const ds = await DataSourceManager.getInstance().createDataSource(options)
          const layerView = await jimuMapView.addLayerToMap(ds.id, ds.id + '__layer')

The data source was created and added to the map, but I received the following error message:
“Data source without origin data source must save the schema in app config.”

Additionally, when I check the available Data Actions, only “Set as Analysis Input” appears — while “Add to Table,” “Set Filter,” and other options are missing (please see the attached screenshot).

[YueyangLi · Accepted solution]

Hi @MohammedHilal_K ,

The “e.set is not a function”  error is caused by that the dataSourceJson is not immutable. Update code in the "1. Create a data source".

const options = {
  id: 'ds_id',
  dataSourceJson: Immutable({
    id: 'ds_id',
    type: DataSourceTypes.FeatureLayer,
    label: 'ds_label',
  }),
  layer: featureLayer // your client-side feature layer created by Maps SDK for JavaScript
}
const ds = await DataSourceManager.getInstance().createDataSource(options)

As for "isOutputFromWidget", it depends on when the data source is added—either when users configure the widget or when they run it. Examples of the former include output data sources from the Query, Chart, and Search widgets, where the data source JSON (especially the fields) is finalized in the builder. An example of the latter is the Add Data widget, where the data source JSON is determined at runtime when users select items or upload files.

I assume you intend to use the latter case, since it’s difficult to save all client-side layer data to the config. That’s why I left isOutputFromWidget undefined.

The DataActionList component should check and list the supported data actions. Did you add the Table and Filter widgets? Did the Export action appear in the dropdown?

[MohammedHilal_K]

Hi @YueyangLi 

That worked! I removed the isOutputFromWidget property and added Immutable to the dataSourceJson as you suggested. I’m also now able to see the Data Actions.

Thanks a lot for the quick resolution!

One final question — do I need to follow the same steps for a group layer as well?