Ah, thanks for that clarification.
A while back, I wrote a script to return the related records for a feature using an older methodology. Maybe this will help
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>
Query Related Features | Sample | ArcGIS API for JavaScript 4.16
</title>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#gridDiv {
padding: 10px;
max-width: 500px;
}
#viewDiv {
height: 100%;
width: 100%;
}
#clearButton {
margin-top: 5px;
display: none;
}
.dgrid {
height: auto !important;
}
.dgrid .dgrid-scroller {
position: relative;
max-height: 200px;
overflow: auto;
}
.action {
color: blue;
cursor: pointer;
text-decoration: underline;
}
</style>
<link rel="stylesheet"
href="https://js.arcgis.com/4.16/dgrid/css/dgrid.css" />
<link rel="stylesheet"
href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/widgets/Expand",
"dgrid/Grid",
"dojo/dom-style",
"dojo/dom-attr",
"dojo/on",
"dojo/dom"
], function (Map, Basemap, MapView, FeatureLayer, Legend, Expand, Grid, Portal, OAuthInfo, identityManager, domStyle, domAttr, on, dom) {
// Create the layer
let map, view;
let highlight, grid, clearbutton;
let layer = new FeatureLayer({
portalItem: {
id: "8be2866c3b1441b6beb5d79650198b05"
},
outFields: ["*"]
});
map = new Map({
basemap: 'oceans',
layers: [layer]
});
view = new MapView({
container: "viewDiv",
map: map,
center: [-153, 63],
zoom: 4,
popup: {
autoOpenEnabled: false
}
});
const legend = new Legend({ view: view });
// Expand widget to expand and contract the legend widget
const legendExpand = new Expand({
expandTooltip: "Show Legend",
expanded: false,
view: view,
content: legend
});
// Add widgets to the view
view.ui.add(document.getElementById("gridDiv"), "bottom-left");
view.ui.add(legendExpand, "top-right");
// Initialize variables
// call clearMap method when clear is clicked
clearbutton = document.getElementById("clearButton");
clearbutton.addEventListener("click", clearMap);
layer.load().then(function () {
return (g = new Grid());
});
view.on("click", function (event) {
clearMap();
queryFeatures(event);
});
function queryFeatures(screenPoint) {
const point = view.toMap(screenPoint);
// Query the for the feature ids where the user clicked
layer
.queryObjectIds({
geometry: point,
spatialRelationship: "intersects",
returnGeometry: false,
outFields: ["*"]
})
.then(function (objectIds) {
if (!objectIds.length) {
return;
}
// Highlight the area returned from the first query
view.whenLayerView(layer).then(function (layerView) {
if (highlight) {
highlight.remove();
}
highlight = layerView.highlight(objectIds);
});
// Query the for the related features for the features ids found
return layer.queryRelatedFeatures({
outFields: ["Source"],
relationshipId: layer.relationships[0].id,
objectIds: objectIds
});
})
.then(function (relatedFeatureSetByObjectId) {
if (!relatedFeatureSetByObjectId) {
return;
}
// Create a grid with the data
Object.keys(relatedFeatureSetByObjectId).forEach(function (
objectId
) {
// get the attributes of the FeatureSet
const relatedFeatureSet = relatedFeatureSetByObjectId[objectId];
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 gridDiv
const gridDiv = document.createElement("div");
const results = document.getElementById("queryResults");
results.appendChild(gridDiv);
// destroy current grid if exists
if (grid) {
grid.destroy();
}
// create new 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);
});
clearbutton.style.display = "inline";
})
.catch(function (error) {
console.error(error);
});
}
function clearMap() {
if (highlight) {
highlight.remove();
}
if (grid) {
grid.destroy();
}
clearbutton.style.display = "none";
}
});</script>
</head>
<body>
<div id="gridDiv" class="esri-widget">
<h2>Alaska Spatial Bibliography</h2>
<p>
Click on a region in the map to view the documents found in that region.
</p>
<div id="queryResults"></div>
<button id="clearButton" class="esri-widget">Clear Query</button>
</div>
<div id="viewDiv"></div>
</body>
</html>
