Hello. I was tasked with developing a simpler "batch attribute editor" in Experience Builder, since it is not yet available publicly. Unlike the WAB batch editor, I do not need an editor as the project demands are to take the selected rows and run various CRUD queries.
So the best example I found, and modified it with other examples.
https://developers.arcgis.com/javascript/latest/sample-code/highlight-features-by-geometry/
I used esri-loader to dynamically load the JS API inside ExB and added most of the widget code from the example, but I need to select the feature table as the entire logic is based on the table selection event.
function selectFeatures(geometry) {
if (csvLayerView) {
// create a query and set its geometry parameter to the
// rectangle that was drawn on the view
const query = {
geometry: geometry,
outFields: ["*"]
};
// query graphics from the csv layer view. Geometry set for the query
// can be polygon for point features and only intersecting geometries are returned
csvLayer
.queryFeatures(query)
.then((results) => {
if (results.features.length === 0) {
clearSelection();
} else {
// pass in the query results to the table by calling its selectRows method.
// This will trigger FeatureTable's selection-change event
// where we will be setting the feature effect on the csv layer view
featureTable.filterGeometry = geometry;
featureTable.selectRows(results.features);
// counter_atts.innerHTML = results.features.length;
}
})
.catch(errorCallback);
}
}
Currently the script I'm using is still using Feature Table like in JS API, but I don't need to load the table dynamically, just use the one in the view.
// create a new instance of a FeatureTable
const featureTable = new this.FeatureTable({
view: this.state.jimuMapView.view,
layer: this.csvLayer,
highlightOnRowSelectEnabled: true,
container: document.getElementById("featureTable")
});
let features = [];
// Listen for the table's selection-change event
featureTable.on("selection-change", (changes) => {
// if the feature is unselected then remove the objectId
// of the removed feature from the features array
changes.removed.forEach((item) => {
const data = features.find((data) => {
return data === item.objectId;
});
if (data) {
features.splice(features.indexOf(data), 1);
// counter_atts.innerHTML = counter_atts_value-1;
}
});
// If the selection is added, push all added selections to array
changes.added.forEach((item) => {
features.push(item.objectId);
// counter_atts.innerHTML = counter_atts_value+1;
});
// set excluded effect on the features that are not selected in the table
csvLayerView.featureEffect = {
filter: {
objectIds: features
},
excludedEffect: "blur(5px) grayscale(90%) opacity(40%)"
};
});
Just need to select the rows in the table when the sketchviewmodel draws the rectangle and gets the features. Afterwards I can run CRUD operations with the selected features.
