Select to view content in your preferred language

Experience Builder Dev Update Web Scene Layer Data With Button

57
0
Wednesday
ahuey
by
New Contributor

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>
  )

 

 

0 Kudos
0 Replies