Hi All
I have several feature tables with related records that I would like to display but cannot seem to get my head around the structure. I am using this example as a starting point:
FeatureTable - related records | ArcGIS API for JavaScript 3.27
here is my code:
map.on("load", loadTableSites, loadTableSpecies);
function loadTableSites(){
var myFeatureLayer = new FeatureLayer("../MapServer/2",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true,
id: "fLayer"
});
// apply the selection symbol for the layer
var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.35]), 1),
new Color([255, 0, 0, 0.35]));
myFeatureLayer.setSelectionSymbol(selectionSymbol);
// listen to featurelayer click event to handle selection
// from layer to the table.
// when user clicks on a feature on the map, the corresponding
// record will be selected in the table.
myFeatureLayer.on("click", function(evt) {
var idProperty = myFeatureLayer.objectIdField;
var feature, featureId, query;
if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
feature = evt.graphic,
featureId = feature.attributes[idProperty];
query = new Query();
query.returnGeometry = false;
query.objectIds = [featureId];
query.where = "1=1";
myFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
}
});
map.addLayer(myFeatureLayer);
// create new FeatureTable and set its properties
var myFeatureTable = new FeatureTable({
featureLayer : myFeatureLayer,
map : map,
syncSelection: true,
showRelatedRecords: true,
showAttachments: true,
// outfields
outFields: ["SitRecID", "NatName"],
}, 'myTableNode');
myFeatureTable.startup();
}
/*
Another table
*/
function loadTableSpecies(){
var myFeatureLayerSpp = new FeatureLayer("../MapServer/6",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true,
id: "fLayer"
});
// apply the selection symbol for the layer
var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.35]), 1),
new Color([255, 0, 0, 0.35]));
myFeatureLayerSpp.setSelectionSymbol(selectionSymbol);
// listen to featurelayer click event to handle selection
// from layer to the table.
// when user clicks on a feature on the map, the corresponding
// record will be selected in the table.
myFeatureLayerSpp.on("click", function(evt) {
var idProperty = myFeatureLayer.objectIdField;
var feature, featureId, query;
if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
feature = evt.graphic,
featureId = feature.attributes[idProperty];
query = new Query();
query.returnGeometry = false;
query.objectIds = [featureId];
query.where = "1=1";
myFeatureLayerSpp.selectFeatures(query, FeatureLayer.SELECTION_NEW);
}
});
map.addLayer(myFeatureLayerSpp);
// create new FeatureTable and set its properties
var myFeatureTableSpp = new FeatureTable({
featureLayer : myFeatureLayerSpp,
map : map,
syncSelection: true,
showRelatedRecords: true,
showAttachments: true,
// outfields
outFields: ["Common_name"],
}, 'myTableNodeSpp');
myFeatureTableSpp.startup();
}
I can use one or the other features and the records display in the feature table but I cannot work out ow to display both tables below the map. Here is the html part:
<body class="claro esri">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:60%">
<div id="map"></div>
</div>
<div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:40%">
<div id="myTableNode"></div>
</div>
<div id="bot1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:40%">
<div id="myTableNodeSpp"></div>
</div>
</div
Ideally I want to display the tables in respective tabs, I gather this is possible but am stuck. Any pointers or suggestions would be welcome.
Many thanks,
