Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Feature layer query multiple
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
This sample shows how to use a RelationshipQuery to query a service for related features then query another related table and display the attribute information. The sample displays a subset of oil fields and wells in Kansas.
Clicking on a field highlights the field then creates a RelationshipQuery that finds and selects the related well features. The following snippet defines the selection symbol for the FeatureLayer that displays the Kansas oil fields and defines the function that runs after a field is selected. Once the well fields are selected another RelationshipQuery is used to retrive information from the tops table and display the attributes in a DataGrid.
Note that the code requires a relationshipId. FeatureLayers can have more than one relationship and each relationship is identified by a unique identifier. You can use the Services Directory to find the relationship id.Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Query RelatedRecords Example</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dgrid/css/dgrid.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color:#777;
overflow:hidden;
font-family: "Trebuchet MS";
}
#header {
background-color:#444;
color:orange;
font-size:15pt;
text-align:center;
font-weight:bold;
}
#footer {
background-color:#444;
color:orange;
font-size:10pt;
text-align:center;
}
.tundra .dijitContentPane {
font-family: "Lucida Grande","Segoe UI","Arial",sans-serif;
font-weight: normal;
font-size: small;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/geometry/Extent",
"esri/tasks/query",
"esri/tasks/RelationshipQuery",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/layers/ImageParameters",
"esri/InfoTemplate",
"dgrid/Grid",
"dojo/parser",
"dojo/dom",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(Map, FeatureLayer, ArcGISDynamicMapServiceLayer, Extent, Query,
RelationshipQuery, Draw, SimpleMarkerSymbol, ImageParameters, InfoTemplate,
Grid, parser, dom){
parser.parse();
var map, wellFeatureLayer, toolbar, grid;
map = new Map("mapDiv", {
basemap: "satellite",
center: [-97.395, 37.537],
zoom: 11
});
var imageParams = new ImageParameters();
imageParams.layerIds = [0,1];
imageParams.layerOption = ImageParameters.LAYER_OPTION_SHOW;
var dynamicLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer", {imageParameters:imageParams});
map.addLayer(dynamicLayer);
var selectionSymbol = new SimpleMarkerSymbol().setColor("red");
wellFeatureLayer = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/0", {
mode: FeatureLayer.MODE_SELECTION,
infoTemplate: new InfoTemplate("Well: ${API_NUMBER}","${*}")
});
wellFeatureLayer.setSelectionSymbol(selectionSymbol);
wellFeatureLayer.on("selection-complete", findRelatedRecords);
map.addLayer(wellFeatureLayer);
map.on("click", findWells);
/*set up layout*/
var layout = [
{'name': 'ID', 'field': 'OBJECTID', 'width': 'auto'},
{'name': 'API Number', 'field': 'API_NUMBER', 'width': 'auto'},
{'name': 'Elevation', 'field': 'ELEVATION', 'width': 'auto'},
{'name': 'Formation', 'field': 'FORMATION', 'width': 'auto'},
];
/*create a new grid*/
grid = new Grid({
columns: layout
}, 'grid');
function findRelatedRecords(results) {
var features = results.features;
var relatedTopsQuery = new RelationshipQuery();
relatedTopsQuery.outFields = ["*"];
relatedTopsQuery.relationshipId = 3;
var attr = features[0].attributes.OBJECTID;
relatedTopsQuery.objectIds = [features[0].attributes.OBJECTID];
//Query the feature layer to find related records that meet the input query (relatedTopsQuery).
wellFeatureLayer.queryRelatedFeatures(relatedTopsQuery, function(relatedRecords) {
var fset = relatedRecords[features[0].attributes.OBJECTID];
if (fset != undefined){
//return an array of feature attributes to provide to the dojo data store.
var items = dojo.map(fset.features, function(feature) {
return feature.attributes;
});
grid.refresh();
grid.renderArray(items);
}
});
}
function findWells(evt) {
// grid.renderArray([]);
var selectionQuery = new Query();
var tol = map.extent.getWidth()/map.width * 5;
var x = evt.mapPoint.x;
var y = evt.mapPoint.y;
var queryExtent = new Extent(x-tol,y-tol,x+tol,y+tol,evt.mapPoint.spatialReference);
selectionQuery.geometry = queryExtent;
wellFeatureLayer.selectFeatures(selectionQuery, esri.layers.FeatureLayer.SELECTION_NEW);
}
});
</script>
</head>
<body class="tundra">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:75px;">
Click on a well to select the well and select the related well log information for that well.
</div>
<div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="margin:5px;">
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'"
style="width:500px;margin:5px;background-color:whitesmoke;">
<div id="grid" style="height:100%"></div>
</div>
</div>
</body>
</html>