editor widget: how to listen to "delete" event

RiccardoKlinger · ‎09-14-2022

I am using the editor widget and would like to call some validation process before I apply my edits. this works fine, listening to the submit event.

But this "submit" event is not called when I press the delete button. How can I call a validation in case of a delete statement? here is a sample code:

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Edit features with the Editor widget | Sample | ArcGIS API for JavaScript 4.24</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.24/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .esri-editor .esri-item-list__scroller {
      max-height: 350px;
    }
  </style>

  <script>
    require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Editor"
      ], (
        WebMap, MapView,
        Editor
      ) => {

        let pointLayer, lineLayer, polygonLayer;

        // Create a map from the referenced webmap item id
        const webmap = new WebMap({
          portalItem: {
            id: "459a495fc16d4d4caa35e92e895694c8"
          }
        });

        const view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(() => {
          view.map.loadAll().then(() => {
            view.map.allLayers.forEach((layer) => {
              if (layer.type === 'feature') {
                switch (layer.geometryType) {
                  case "polygon":
                    polygonLayer = layer;
                    break;
                }
              }
            });
            const polyInfos = {
              layer: polygonLayer,
              formTemplate: { // autocasts to FormTemplate
                elements: [{ // autocasts to FieldElement
                  type: "field",
                  fieldName: "incidenttype",
                  label: "Incident Type"
                }, {
                  type: "field",
                  fieldName: "activeincid",
                  label: "Active"
                }, {
                  type: "field",
                  fieldName: "descrip",
                  label: "Description"
                }]
              }
          };

            const editor = new Editor({
              view: view,
              layerInfos: [polyInfos]
          });

          editor.viewModel.featureFormViewModel.on("submit", function(){


    const updated = editor.viewModel.featureFormViewModel.getValues();
    console.log(updated)
    const edits = {
      updateFeatures: [editFeature]
    };
    //applyEdits(edits);
});
          editor.viewModel.watch("state", function(
            newValue,
            oldValue,
            propertyName,
            target
            ) {
            console.log(target,  propertyName + " changed from " + oldValue + " to " + newValue, editor.viewModel)
            });
          // Add the widget to the view
          view.ui.add(editor, "top-right");
          });
        });
      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

MatthiasKl · ‎09-19-2022

I'm really not an expert (just started learning about the api myself), but I guess you could use the "edits"-event of the feature layer:

polygonLayer.on("edits", function (event) {
  if (event.deletedFeatures.length > 0) {
    console.log("Do stuff");
  }
});

RiccardoKlinger · ‎09-27-2022

thanks for the response. But the documentation clearly states:

"Fires after applyEdits() is completed successfully."

I don't want to "applyEdits" first, which writes something into my service and then remove it again as it might not be validated successfully.