Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to query related features from a FeatureLayer by using the queryRelatedFeatures() method. Each hexagon on the map represents one or more major cities in the U.S. Clicking on a hexagon will trigger a query for its related features, which will be displayed in a table added to the view's UI.

How it works

A function calls queryObjectIds() whenever the user clicks on the map, which returns the objectId of the corresponding hexagon in the layer.

layer.queryObjectIds({
  geometry: point,
  spatialRelationship: "intersects",
  returnGeometry: false,
  outFields: ["*"]
})

We highlight the hexagon, then use the queryRelatedFeatures() method to query for the related features attached to this object id.

return layer.queryRelatedFeatures({
  outFields: ["NAME", "SUM_POPULATION"],
  relationshipId: layer.relationships[0].id,
  objectIds: objectIds
});

We get the attributes from the resulting FeatureSet and create a dgrid component that can hold the resulting data.

  // get the attributes of the FeatureSet
  const rows = relatedFeatureSet.features.map(function(feature) {
    return feature.attributes;
  });
  if (!rows.length) { return; }

  // create a new div for the grid of related features
  // append to queryResults div inside of the Feature widget
  const gridDiv = document.createElement("div")
  const results = document.getElementById("queryResults");
  results.appendChild(gridDiv);

  // destroy current grid if exists
  if (grid) {
    grid.destroy();
  }
  // create the grid to hold the results of the query
  grid = new Grid({
    columns: Object.keys(rows[0]).map(function(fieldName) {
      return {
        label: fieldName,
        field: fieldName,
        sortable: true
      };
    })
  }, gridDiv);
  // add the data to the grid
  grid.renderArray(rows);