Listen to to records changes in FeatureLayerDatasource

[Zoggo]

I'm using ArcGIS Experience Builder 1.5. I'm developing a custom widget with a FeatureLayerDataSource. I can use the FeatureLayerDataSource selected Records. When I select some features in a the map widget this records change. But I don't understand how I can listen/connect to an event when the the selected records changes? This must be a very basic problem but don't have a clue it is supposed to work.

[YueyangLi]

You can use DataSourceComponent, it's to help create data source instance, load records and listen changes (selection change, filter change and so on.) of data source.

1. Use DataSourceComponent to create data source instance and load records.

<DataSourceComponent useDataSource={props.useDataSources[0]} query={{ where: '1=1' } as FeatureLayerQueryParams} widgetId={props.id}>
  {dataRender}
</DataSourceComponent>

2. Use render function (dataRender in above sample code) of DataSourceComponent, the render function will be called whenever the data source info change (e.g. selection change) or loaded records change (e.g. other widgets apply a filter to the data source).

const dataRender = (ds: DataSource, info: IMDataSourceInfo) => {
  return <div className='record-list'>
      {
        ds && ds.getStatus() === DataSourceStatus.Loaded
          ? ds.getRecords().map((r, i) => {
            // select a record on click and add blue border when a record is clicked (by any widgets)
            return <Button type='tertiary' key={i} onClick={() => ds.selectRecordById(r.getId())} className={classNames({ 'blue-border': ds.getSelectedRecordIds()?.includes(r.getId()) })}>
              {r.getId()}
            </Button>
          })
          : null
      }
    </div>
}