custom widget watching DataSource queryParams

[john_cartwright_noaa]

Hello All,

I'm trying to create a custom widget which watches the configured DataSource for changes to the layer definition query (i.e. monitors when an attribute filter has been applied/removed). I've tried something like:

// called once when DataSourceComponent loads
function onDataSourceCreated (ds: DataSource) {
  // uses a user-defined type guard using type predicate
  const featureLayerDataSource = isFeatureLayerDataSourceType(ds) ? ds : undefined
  const queryParams = featureLayerDataSource.getCurrentQueryParams()
  // TODO why does watch never see changes to where property?
  reactiveUtils.watch(
    () => queryParams.where,
    str => { setQueryParams(str) }
    )
  }

I can make it work when using a DataSourceFilterChange action but can't understand why the same result cannot be obtained using the reactiveUtils and watching the DataSource directly

Thanks!

--john

[JeffreyThompson2]

I think the fundamental problem here is that an Experience Builder datasource and a Javascript API FeatureLayer are not actually the same thing. If you get the FeatureLayer using API methods, reactiveUtils should work.

[YueyangLi]

Hi @john_cartwright_noaa, the reactiveUtils is used to observe changes to the state of the JSAPI's properties. The feature layer data source is not the same as the JSAPI feature layer. To watch the query params changes, I suggest to use the onQueryRequired props of the DataSourceComponent.