Filter hard coded feature layer in React

[MK13]

I am new to custom widget development for experience builder and Javascript. I would like to filter a hard coded feature layer based on a field. I have studied the code at https://developers.arcgis.com/experience-builder/sample-code/widgets/filter-feature-layer/ but it's relying on a feature layer set by the user. In my case, I am not getting any input from the user. I would like to filter the feature layer after it's added to the map on the click of a button. 

@JoelBennett @UndralBatsukh @ReneRubalcava @SageWall @LaurenBoyd @JeffreyThompson2 @AndyGup 

@AnneFitz @Noah-Sager @MatthewDriscoll 

[UndralBatsukh]

This sample shows what you want to do: https://developers.arcgis.com/javascript/latest/sample-code/featurefilter-attributes/  Please look through our samples. 

Here is a sample codepen showing how to filter features based on attributes values from a button click: https://codepen.io/U_B_U/pen/RwzgMBG?editors=100

[MK13]

@UndralBatsukh please see my code below. I am unsure of how to create a view from the feature layer in experience builder/React. The filter method does not exist on the feature layer so the code below wouldn't work.

import { React, type SqlQueryParams, type AllWidgetProps, DataSourceManager, type FeatureLayerDataSource } from 'jimu-core'
import { JimuMapViewComponent, type JimuMapView } from 'jimu-arcgis'
import FeatureLayer from 'esri/layers/FeatureLayer'

const { useState } = React //{} allow destructuring of this constant

const Widget = (props: AllWidgetProps<any>) => {
  const omLyr = new FeatureLayer({
    url: 'https://services5.arcgis.com/M4Fx5dTKFkYlecLTsdsdsd/arcgis/rest/services/OpenMarketSm/FeatureServer'
  })
  const [jmv, setJmv] = useState<JimuMapView>()
  const activeViewChangeHandler = (jimumapview: JimuMapView) => {
    if (jimumapview) {
      setJmv(jimumapview)
    }
  }
  const addLayerHandler = (evt) => {
    evt.preventDefault()
    jmv.view.map.add(omLyr)
  }

  const filterLayerHandler = (evt) => {
    evt.preventDefault()
    omLyr.filter = {
      where: "ServiceAreaType ='Comm. Recycling'"
    }
  }
  return (
      <div>
      <div>
  {props.useMapWidgetIds && props.useMapWidgetIds.length === 1 &&
        (<JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={activeViewChangeHandler}/>)}
      </div>
      <form onSubmit={addLayerHandler}>
        <button className='btn btn-primary'>
          Add Layer
        </button>
      </form>
      <form onSubmit={filterLayerHandler}>
        <button className='btn btn-primary'>
          Filter Layer
        </button>
      </form>
      </div>
  )
}

export default Widget
//activeViewChangeHandler is called once when the map is ready
// {/* ?. checks if object is null  */}

[UndralBatsukh · Accepted solution]

It is already in the sample. You have to wait for MapView.whenLayerView to resolve after you add the layer in your addLayerHandler function.

[MK13]

That worked. Thanks. I had to retrieve the view from the jimumapview and then set the whenLayerView.