Display several feature tables

MarkBalman — Mon, 04 Mar 2019 16:20:15 GMT

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"
});

// 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,

Re: Display several feature tables

MarkBalman — Mon, 04 Mar 2019 18:48:11 GMT

Hi all, I managed to solve it if any one else is stuck this is what I did - I just needed to add a tab container (after looking through the examples here specifically the nested layouts example:

dijit/layout/BorderContainer — The Dojo Toolkit - Reference Guide

SO I now have:

</div>

topic Display several feature tables in ArcGIS JavaScript Maps SDK Questions

Display several feature tables

Re: Display several feature tables