Select to view content in your preferred language

Custom Widget - Clearing query parameters from a datasource

231
5
Jump to solution
2 weeks ago
BrittaneyHarkness
New Contributor III

Hi, I am building a custom widget that replicates the main features in the zone lookup instant app with the additional capabilities of selecting target zones using multiple layers or locators to return features based on a spatial intersection, or layer sources to return features using attribute filter. 

The custom widget is triggered by actions from the Search, Map, and Table widgets based on record selection changes. Everything is updating properly in the Map widget but I am unable to get the query that is applied to the target zones from clearing to return all features in the table widget. I created this function to access the datasource being displayed in the Map and Table to update the query parameters to show all features, but the table widget data does on update.

 

I have tried the using the updateQueryParams() method for the data source and passing the sql query to return all features and passed it the widget id of the table and all other widgets that use the data source but for some reason the table will not refresh or update like the map. 

 

Are there some limitations with the updateQueryParams function that will not extend to the table widget?

Is there a way to force the table widget to refresh? 

 

const handleClearResults = async () => {
    console.log("handling clear results")
    let targetDsIds = props.config['zones']['target']
    const dsManager = DataSourceManager.getInstance();

    const appConfig = getAppStore().getState().appConfig
    const widgets = appConfig.widgets

    targetDsIds.map((targetId : string) => {
      console.log("Target ID: ", targetId)
      let targetDs: FeatureLayerDataSource = dsManager.getDataSource(targetId) as FeatureLayerDataSource;
      console.log("Target ds: ", targetDs)
      let schema = targetDs?.getSchema()
      let title = targetDs.getLabel()
      //console.log("schema", )

      setNumResults(0)
      setResults(prev => ({
        ...prev,
        [title]:  0
      }))

      if(schema){
        const queryParams: SqlQueryParams = {
          where: '1=1',
          //where: `${Object.keys(schema.fields)[0]} IS NOT NULL`
        }

        Object.entries(widgets).forEach(([widgetId, widgetConfig]) => {
          const widgetDataSources = widgetConfig.useDataSources || [];
          const hasDataSource = widgetDataSources.some((ds) => ds.dataSourceId === targetId);
 
          if (hasDataSource) {
            console.log("updating data source for: ", widgetConfig.label)
            targetDs.updateQueryParams(queryParams, widgetId);
          }

          // console.log("widgetConfig.manifest.name: ", widgetConfig.manifest.name)
          // if (widgetConfig.manifest.name === "table"){
          //   let tableId = widgetConfig.id
          //   getAppStore().dispatch({type:""})
          // }
        });
       
        //targetDs.updateQueryParams(queryParams, props.id)

        //targetDs.clearRecords()
        targetDs.layer.load().then(() =>{
          console.log("layer loaded")
        })
        console.log("updated datasource: ", targetDs)
        targetDs.clearSelection()

       

        console.log("target features cleared: ", targetDs.getSelectedRecords().length)
 
      }

      toggleMapLayers(undefined, true)

    })

  }
0 Kudos
1 Solution

Accepted Solutions
JeffreyThompson2
MVP Regular Contributor

I think the proper way to do this is to make your widget into a client side output and then set the datasource for your Table Widget to that output.

Here is the example widget for building a client side datasource.

https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/widgets/client-side-outp...

GIS Developer
City of Arlington, Texas

View solution in original post

0 Kudos
5 Replies
JeffreyThompson2
MVP Regular Contributor

I think the proper way to do this is to make your widget into a client side output and then set the datasource for your Table Widget to that output.

Here is the example widget for building a client side datasource.

https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/widgets/client-side-outp...

GIS Developer
City of Arlington, Texas
0 Kudos
BrittaneyHarkness
New Contributor III

Thanks for suggestion @JeffreyThompson2 ! I was able to create the client side output and access it as a datasource in my table widget using the documentation you provided. 

 

However I did get stuck. After accessing the widgets output as a datasource the table widget registers the datasource schema and fields, but the table is not populating the records. I'm running into an issue I've seen others discuss in this thread: https://community.esri.com/t5/arcgis-experience-builder-questions/set-up-a-widget-output-data-source...

This was from a year ago, but updating the records in the output datasource using the setRecords method doesn't seem to work, so I was going to explore the option of updating records using the updateSourceByFeatures() described in the thread. Have you had any of this issues? 

0 Kudos
BrittaneyHarkness
New Contributor III

Update, I was using the setRecords instead of setSourceRecords method. Problem solved. Thank you!

JeffreyThompson2
MVP Regular Contributor

Congratulations on getting it working. I'm sure it wasn't easy. If you feel comfortable, please consider sharing your widget in the custom widgets group. I'm sure many people would love to see it. 

GIS Developer
City of Arlington, Texas
0 Kudos
BrittaneyHarkness
New Contributor III

Hi Jeffrey,

 

Thanks again for your help and the sharing suggestion. I'll definitely share to the group once my team finishes up all the testing. 

 

best,

Britt

0 Kudos