Simple Batch Editor ExB

1006
0
04-24-2023 05:41 AM
GDipublisher
New Contributor II

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. 

0 Kudos
0 Replies