ExpB Developer Sample Widget: filter-feature-layer issue

Question

Using Experience Builder 11.4

I am trying to get the filter-feature-layer (arcgis-experience-builder-sdk-resources-master) custom widget to run for me.

Below is the code (my only change is verifying (console.log) that I do have the datasource.

const textInputChangeHandler = (evt) => {
    if (props.useDataSources.length > 0) {
      // First get the DataSourceManager instance
      const dsManager = DataSourceManager.getInstance()

// Get the data source using useDataSource.dataSourceId
      const useDataSource = props.useDataSources[0]

console.log(useDataSource.dataSourceId)

const ds: FeatureLayerDataSource = dsManager.getDataSource(useDataSource.dataSourceId) as FeatureLayerDataSource

// Build the queryParams, with the configured filterField and the value
      // that has been typed into the TextInput by the user
      const queryParams: SqlQueryParams = {
        where: `${props.config.filterField} LIKE '%${evt.target.value}%'`
      }

// Filter the data source using updateQueryParams function.

ds.updateQueryParams(queryParams, props.id)
    }
  }

On line 21, when it is time to pass the Query to the Datasource.  The error is:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'updateQueryParams').

I have not been able to figure out how to capture the promise/result on this.

Any help would be appreciated.

BobinTN

brundageb · Answer

Thanks for the detailed explanation (sorry I need it broken down that much).

I will check it out in the browser debugger.

So, I guess this is where I need to use a Promise/call back of some kind?
That is what I am trying to figure out how to do, but am having trouble (at
least I think).

Thanks again, for helping.

Grant-S-Carroll · Answer

Hi,

The check you are doing is just pulling the datasource id, so just a string value, this is not the same as the actual data source itself. UseDatasources is essentially just a list of the datasources stored in the configuration. When you pass that id to the datasource manager, it tries to retrieve and construct an actual datasource object out of the application, be that from a web map or a feature layer that you have added through the settings.

What I have suggested is, and what I suspect your issue is, that after calling getDatasource from the datasource manager, this is not returning anything, hence when you try and call teh updateParams on the ds obejct, that object is null because datasource manager has not been able to return anything.

Have you tried placing a breakpoint at the point in the code where you assign the return from the call to getDatasource to validate that you are recieving a value back from this call?

brundageb · Answer

Hello and thanks for responding.

I am already doing a 'check' on the 'useDataSource.datasourceId' with the
console.log(useDataSource.dataSourceId) in the script