Getting popuptemplate from feature layer to pop up when selecting row from table using ArcGIS API for JavaScript?

Question

Using esri javascript api 4.3 in an Angular 2 application.

I initially generate the map using this code:

OnInit() {
  this.map = new Map({
    basemap: 'streets'
  });

  this.map.layers.add(new FeatureLayer({
    url: 'http://test/rest/services/Project_map/MapServer/0', 
    id: '0',
    visible: true,
    outFields: ["*"],
    popupTemplate: this.jobsTemplate
  }));

  this.view = new MapView({
    container: "viewDiv",
    map: this.map,
    center: new Point({
      x: -111.876,
      y: 40.758,
    }),
    zoom: 12,
    rotation: 0
  });
}

When a feature on the map is clicked I get a popup containing the values for that feature. That works fine.

There is also a table that has a row for each feature on the map.

When a table row is clicked, I execute the following code, passing into it the lat and long for that feature:

zoomToPoint(zoomLong: number, zoomLat: number) {
  this.view.center = new Point({x: zoomLong, y: zoomLat});
  this.view.zoom = 15;
  this.view.popup.open({location: this.view.center});
}

I get a popup at the correct location. But, the popup is empty.

I want it to use the popupTemplate assigned to the feature layer and containing the values for the feature at that location.

Just like what happens if I click on the feature.

Answer 1

According to the doc https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#open you have to either specify -along with the location- the title and content to the popup, or the features of the selected point.

this.view.popup.open({ location: this.view.center, title: 'foo', content: 'bar' });

or

this.view.popup.open({ location: this.view.center, features: [selectedGraphic]});

Edit: here is another shot, with a query to your feature layer, to select the features placed at the coordinates from your table

function qLayer(pt) {
  var query = layer.createQuery();
  query.geometry = pt;
  query.spatialRelationship = "intersects";
  return layer.queryFeatures(query);
}
function showPopup(res) {
  view.popup.open({
    features: res.features,
    updateLocationEnabled: true,
  });
}

zoomToPoint(zoomLong: number, zoomLat: number) {
  var point = new Point([zoomLong, zoomLat]);
  qLayer(point).then(showPopup);
  view.goTo({
    target: point,
    zoom: 15,
  });
}

here is a fiddle to play with: https://jsfiddle.net/0tkx4091/17/ click on the filename, above the map