ExpB Developer Sample Widget: filter-feature-layer issue

[brundageb]

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

[Grant-S-Carroll]

Hi there, looking at the docs, that particular function doesn't return anything (updateQueryParams). But the error is telling you that ds is undefined. So for some reason, when the application goes to grab the datasource, it is not finding it, and therefore returning nothing for the datasource object.

I would check that the datasource id that you are passing is part of the map or the config of the application you are building. You should be able to find a datasources section in the config.json for the application under, server/public/apps/<appid>.

You can also do a null check prior to trying to access the ds object and wrapping the update in a try catch block., e.g.

if (ds === null)
{
      console.log(`ds was null, check the datasource id ${useDataSource.dataSourceId}`)
}
else{
   try{
         ds.updateQueryParams(queryParams, props.id);
         console.log('Query parameters updated successfully');
      } 
    catch (error) {
       console.error('An error occurred:', error.message);
    }
}

s 

[brundageb]

Hello and thanks for responding.

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

[Grant-S-Carroll]

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]

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.