Selecting a new feature after it's been created

Question

I have a list of streetlight data which I know is incomplete. Therefore, when users want to report an issue with a streetlight I have to let them create a new streetlight if they click anywhere on the map that doesn't have an existing feature. This is working, mostly.

The main issue I have is that I need the new streetlight to be selected as soon as it's been created. I have tried adding it to the featureTable but nothing seems to happen, and I've tried to somehow programmatically "click" on the feature to trigger the selection but I keep getting errors.

A secondary issue: I click on an empty space before anything else then the "Missing Streetlight" popup displays OK. If I select an existing feature before clicking an empty space then the popup just displays briefly and then disappears. It must be to do with the way I am showing/disabling the popups depending on what is selected or deselected but I can't quite trace where I'm going wrong.

The codepen is Selecting a New Feature (codepen.io)

The new feature issue is at line 294 and the popup issue is at line 183.

Any help fixing either of these issues would be greatly appreciated.

UndralBatsukh · Accepted Answer

Hi there,

So once you create the new feature you need to query for that feature from the layer or the layer view  (after it finishes updating). I modified your app so that it queries the layer for the newly added feature and use this feature to highlight the row in the table. You cannot use the graphic you created to add as a feature. Instead of you have to use the feature that exists in the layer. Hope this makes sense.

The following is where the changes were made and here is a codepen: https://codepen.io/U_B_U/pen/abajbRz?editors=0010

streetlightsLayer.applyEdits({addFeatures: [graphic]})
  .then((results) => {
     console.log("feature added", results);

// How do I select this feature on the map and/or the featureTable

//featureTable.selectRows(graphic);             // nope!
     //view.highlight(results.addFeatureResults[0]); // nope!
     const where = `${streetlightsLayer.objectIdField} = ${results.addFeatureResults[0].objectId}`;
     let query = streetlightsLayer.createQuery();
     query.where = where;
     query.outFields = ["*"];
     streetlightsLayer.queryFeatures(query).then((results) => {
        console.log("query results", results.features);
        featureTable.selectRows(results.features[0]);
     });

newStreetlights.push({
       objectId: results.addFeatureResults[0].objectId,
       feature: results.features[0]
     });

featureTable.refresh(); // needed?
   })
   .catch((error) => {
      console.error(error);
   });