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.
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()
//filter layer. Property 'filter' does not exist on type 'FeatureLayer'
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 */}