I Have a experience builder app that has an add data widget a map and a custom widget. The custom widget needs a button on it that will update the attributes of graphics that are being loaded from an add data widget. The way i have it set up right now is with a JimuMapView. I extract all the features from the map and have a state the tracks which feature I Have selected. I then need to add a field to these features, for example isRemoved. I can't seem to figure out how to add this field and change it dynamically in the tsx for the widget.
const handleRemove = () => {
if (currentFeatureSelected && mapView) {
setRemovedFeatures([...removedFeatures, currentFeatureSelected])
const updatedDataPoints = allDataPoints.filter((_, index) => index !== currentIndex)
setAllDataPoints(updatedDataPoints)
setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : 0))
}
}
const handleLayerChange = async () => {
console.log('Handling layer change', mapView)
const allLayers = mapView.map.allLayers
const dpoints = []
const promises = allLayers.map((layer) => {
if (layer.type === 'scene') {
const sceneLayer = layer
return (sceneLayer as __esri.SceneLayer).queryFeatures().then((result) => {
console.log('Result', result)
dpoints.push(...result.features)
})
}
return Promise.resolve()
})
try {
await Promise.all(promises)
setAllDataPoints(dpoints)
setAllDataPointsLoaded(true)
setCurrentIndex(0)
// console.log('All queryFeatures promises have been fulfilled')
} catch (error) {
console.error('Error handling layer change:', error)
}
}
const handleActiveMapViewsChange = (jimuMapView) => {
if (jimuMapView) {
console.log('JimuMapView', jimuMapView.whenJimuLayerViewLoaded(() => {
console.log('LayerView loaded', jimuMapView.jimuLayerViews)
}))
setRealMapView(jimuMapView)
// setMapDatasourceId(jimuMapView.dataSourceId)
setMapView(jimuMapView.view)
}
}
return (
<div className="widget-starter jimu-widget">
<JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={handleActiveMapViewsChange} />
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', height: '100%', padding: '10px' }}>
<div style={{ flex: '1', width: '100%' }}>
<h4><b>Current Selected Feature</b> <br /> Class: {currentFeatureSelected && currentFeatureSelected.attributes.class}</h4>
</div>
<div style={{ display: 'flex', width: '100%', gap: '10px' }}>
<Button size='lg' style={{ borderRadius: '8px', flex: 1 }} type='danger' variant='contained' onClick={handleRemove}>
Remove
</Button>
<Button size='lg' style={{ borderRadius: '8px', flex: 1 }} type='primary' variant='contained' onClick={handleKeep}>
Keep
</Button>
</div>
</div>
</div>
)