Multiple Feature Tables for each Feature Layer in Map (JS 4.24)

moremeowbell — Mon, 28 Nov 2022 20:19:16 GMT

I am trying to add in multiple feature tables into my web application. I have seen the post below, but they were using JS 3.x and I am using 4.x.

https://community.esri.com/t5/arcgis-api-for-javascript-questions/display-several-feature-tables/td-p/351361

Basically, I am hoping that I can add a tab that allows users to select which feature table they want to view. Here is the code I have so far that works, but it only displays one table...

// Create the feature table const featureTable = new FeatureTable({ view: view, // Required for feature highlight to work layer: featureLayer, multiSortEnabled: true, visibleElements: { // Autocast to VisibleElements menuItems: { clearSelection: true, refreshData: true, toggleColumns: true, selectedRecordsShowAllToggle: true, selectedRecordsShowSelectedToggle: true, zoomToSelection: true } }, container: document.getElementById("tableDiv") }); // Listen for the view's click event and access the associated graphic. view.on("immediate-click", (event) => { view.hitTest(event).then((response) => { tableCandidate = response.results.find((result) => { return ( result.graphic && result.graphic.layer && result.graphic.layer === featureLayer ); }); // Add the graphic's ObjectId into the collection of highlightIds. // Check that the featureTable.highlightIds collection // does not include an already highlighted feature. if (tableCandidate) { const objectId = tableCandidate.graphic.getObjectId(); if (featureTable.highlightIds.includes(objectId)) { // Remove feature from current selection if feature // is already added to highlightIds collection featureTable.highlightIds.remove(objectId); } else { // Add this feature to the featureTable highlightIds collection featureTable.highlightIds.add(objectId); } } }); }); // Watch the featureTable's highlightIds.length property, // and get the count of highlighted features within // the table. featureTable.watch("highlightIds.length", (ids) => { highlightIdsCount = ids; // Iterate through the filters within the table. // If the active filter is "Show selection", // changes made to highlightIds (adding/removing) // are reflected. featureTable.viewModel.activeFilters.forEach((filter) => { if (filter.type === "selection") { selectionIdCount = filter.objectIds.length; // the filtered selection's id count // Check that the filter selection count is equal to the // highlightIds collection count. If not, update filter selection. if (selectionIdCount !== highlightIdsCount) { featureTable.filterBySelection(); } } }); }); });

HTML

Re: Multiple Feature Tables for each Feature Layer in Map (JS 4.24)

ReneRubalcava — Mon, 28 Nov 2022 21:04:27 GMT

Here is an example of using multiple FeatureTables for multiple layers.

https://codepen.io/odoe/pen/YzaLVgJ?editors=0010

view.when(() => { const layers = map.layers .filter((layer) => { return layer.type === "feature"; }) .toArray(); let count = 0; for (const layer of layers) { // nav const title = document.createElement("calcite-tab-title"); title.innerText = layer.title; if (count === 0) { title.active = true; count++; } tableNav.appendChild(title); // content const container = document.createElement("div"); container.classList.add("table"); const table = new FeatureTable({ view, layer, container }); const tab = document.createElement("calcite-tab"); tab.appendChild(container); tabDiv.appendChild(tab); } });

Re: Multiple Feature Tables for each Feature Layer in Map (JS 4.24)

Ranga_Tolapi — Tue, 06 Dec 2022 14:19:56 GMT

Hi @ReneRubalcava how to make that tab “closable”?

Re: Multiple Feature Tables for each Feature Layer in Map (JS 4.24)

ReneRubalcava — Tue, 06 Dec 2022 17:00:15 GMT

You would need some logic using use DOMElement remove

https://developer.mozilla.org/en-US/docs/Web/API/Element/remove

topic Multiple Feature Tables for each Feature Layer in Map (JS 4.24) in ArcGIS JavaScript Maps SDK Questions

Multiple Feature Tables for each Feature Layer in Map (JS 4.24)

Re: Multiple Feature Tables for each Feature Layer in Map (JS 4.24)

Re: Multiple Feature Tables for each Feature Layer in Map (JS 4.24)

Re: Multiple Feature Tables for each Feature Layer in Map (JS 4.24)