Arcgis builder custom widget to get specific field and value from user to filter the data

Question

I have working on custom widget for "Experince Builder Developer" this should be like "Query" widget but with more customization. My target is build widget that allow user select specific field from layer fields, and then select specific value from list of this field values "unique value"

I have get all fields and view them on dropdown list without problem. my problem is coming next, if user select the field, how can i display all unique values? I have search on documents and API, JS API and nothing clear for that!!

import DatasourceList from 'dist/widgets/common/search/src/setting/component/dataSetting

/datasource-list'
import FeatureLayer from 'esri/layers/FeatureLayer'
import { React, AllWidgetProps, jsx, SqlQueryParams, DataSourceManager, QueriableDataSource, FeatureLayerDataSource, DataSource, FeatureDataRecord, DataSourceComponent } from 'jimu-core'
import { Dropdown, DropdownButton, DropdownItem, DropdownMenu, EsriSimpleLineSymbolStyle, Select } from 'jimu-ui'
import { FieldSelector } from 'jimu-ui/advanced/lib/data-source-selector/styles'
import { forEach } from 'lodash-es'

export default class Widget extends React.PureComponent<AllWidgetProps<any>, any> {
  fieldSelected: string
  valueSelected: string
  listOfFields: __esri.Field[]    //-- fields in the layer

  dataSourceId
  dataSource
  dataLayer: FeatureLayerDataSource
  layer: FeatureLayer
  constructor(props) {
    super(props);
    this.InitilizeFields()
  }

  //-- load list of fields from layer
  InitilizeFields = () =>{
    //data source id from props that add from setting
    this.dataSourceId = this.props.useDataSources?.[0]?.dataSourceId
    //-- create data source
    this.dataSource = this.dataSourceId && DataSourceManager.getInstance().getDataSource(this.dataSourceId) as QueriableDataSource
    //-- create data layer
    this.dataLayer = this.dataSourceId && DataSourceManager.getInstance().getDataSource(this.dataSourceId) as FeatureLayerDataSource
    //-- create layer from js api
    this.layer = this.dataLayer.layer
    //-- set layer of fields
    if (this.dataLayer){
      //dataSource.updateQueryParams(this.fieldsQuery(), this.props.id)
      this.listOfFields = this.layer.fields
    }
  }

  //-- the query string to get fields only
  fieldsQuery = (): SqlQueryParams =>{
    console.log("Get Fields Query now")
    return {
      where: '(1=1)'
    }
  }

  getAllValueQuery = (field: string): SqlQueryParams =>{
    return{
      where: '1=1',
      orderByFields: [field]
    }
  }
  
  //-- on field selected from drop down list
  onFieldSelected = e =>{
    const fieldIndex = e.target.value
    const fieldSelected : __esri.Field = this.listOfFields[fieldIndex]
    this.dataLayer.updateQueryParams(this.getAllValueQuery(fieldSelected.alias), this.props.id)
  }

  onDataSourceCreated = ()=>{
    console.log("data source created")
  }
  render () {
    return (
      
      <div className="widget-demo jimu-widget bg-white">
      <DataSourceComponent
        useDataSource={this.props.useDataSources?.[0]}
        widgetId={this.props.id}
        onDataSourceCreated={this.onDataSourceCreated}
      />
        <Select
          onChange={this.onFieldSelected}
          placeholder="Select a Field..."
        >
          {this.listOfFields?.map((fieldItem, index) =>{
            return(
              <option value={index}>{fieldItem.alias}</option>
            )
          })}
        </Select>
      </div>
    )
  }
}

Answer 1

You just need in the query the parameter returnDistinctValues: true. With that you get all unique values for the field. You should also add returnGeometry: false in order to get only the field values, you do not need the geometries.

In the end should be something like this,

{
    outFields: [field],
    where: '1=1',
    returnGeometry: false,
    geometry: null,
    returnDistinctValues: true
}