AnsweredAssumed Answered

Display several feature tables

Question asked by Mark_S_B on Mar 4, 2019
Latest reply on Mar 4, 2019 by Mark_S_B

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,

Outcomes