Get the ID of a new Feature after adding to MapView via Editor Widget

I'm pretty new to ArcGIS so pardon my ignorance: how can I get the ID of a newly added Feature of a MapView?

Using the ArcGIS JavaScript SDK, I have a MapView defined as follows:

var portalItem = new PortalItem({
    id: appId
})

map = new WebMap({
    portalItem: portalItem
})
mapView = new MapView({
    container: 'composableEsriMap',
    map,
    ui: {
        components: []
    }
})

Within this MapView I want users to be able to add a new Feature, so I use the Editor Widget which I define as follows:

const addEditor = () => {

    const featureLayer = map.layers.find(layer => layer.type === 'feature')

    const editor = new Editor({

        view: mapView,

        allowedWorkflows: 'create',

        layerInfos: [

            {

                layer: new FeatureLayer({

                    url: --URL REDACTED--

                })

            }

        ]

    })

    editor.on('create', (e: any) => {

        console.log('FEATURE ADDED: ', e.features[0])

    })

    mapView.ui.add(editor, 'top-right')
}

This adds the feature just fine, but I need to store the ID of the new feature in my database, so how can I get the ID of the new feature programmatically? I have tried a few different things, but the approach I have above creates an event handler for the "create" method of the Editor. The issue is that handler is never triggered--probably because the Editor doesn't even have such an event. How should I be going about this?

Solution

One way of achieving that is to listen for FeatureLayer applyEdits method (ArcGIS API - FeatureLayer applyEdits), witch is the method used by the widget in order to make the edits. Here is simple sample I put for you,

<html lang="en">

<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 Maps SDK for JavaScript 4.27</title>

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

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

  </style>

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

        const featureLayer = new FeatureLayer({
            url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/El_Paso_Recreation_AttributeEditsOnly/FeatureServer/1"
        });

        // Create a map from the referenced webmap item id
        const map = new Map({
            basemap: "topo-vector"
        });

        map.add(featureLayer);

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

        view.when(() => {
          const editor = new Editor({
            view: view
          });
          view.ui.add(editor, "top-right");
        });

        featureLayer.on("apply-edits", f => {
            f.result.then(edits => console.log(edits));
        });
      });
  </script>
</head>

You will notice that the example is printing in console the inputs and outputs on the call to the function. In your case you will have to check the property addFeatureResults.