Cannot make dynamic TabContainer in popupTemplate work API 4.19

ChristopheS — Thu, 15 Apr 2021 10:13:07 GMT

Hi all,

I cannot figure out how to make dynamic TabContainer in popupTemplate work API 4.19

Here is the simplified 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>Test Tabs in Popup JS API 4</title> <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" /> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script src="https://js.arcgis.com/4.19/"></script> <script> var map; require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/layers/TileLayer", "esri/geometry/Extent", "esri/geometry/Point", "esri/PopupTemplate", "esri/popup/content/CustomContent", "dojo/parser", "dojo/dom-construct", "dijit/registry", "dijit/layout/ContentPane", "dijit/layout/TabContainer" ], function(Map, MapView, FeatureLayer, TileLayer, Extent, Point, PopupTemplate, CustomContent, dojo_parser, dojo_dom_construct, dijit_registry, dijit_ContentPane, dijit_TabContainer) { var aLayerCapt = new FeatureLayer( "https://xxxCapt/FeatureServer/0" ); addPopupTemplateData( aLayerCapt, "Captag"); var aLayerCanal = new FeatureLayer( "https://xxxCanal/FeatureServer/0" ); addPopupTemplateData( aLayerCanal "Canalisation"); var aBasemapLayer = new TileLayer( "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" ); var bounds = new Extent({ "xmin":1.763102,"ymin":42.595217,"xmax":1.868647,"ymax":42.763970, spatialReference: { wkid: 4326 } }); const map = new Map( { }); const viewObject = new MapView( { container: "viewDiv", map: map, extent: bounds, }); map.addMany([aBasemapLayer, aLayerCap, aLayerCanal]); function addPopupTemplateData( aLayer, title ) { console.log("addPopupTemplateData = " + title); const contentWidget = new CustomContent( { outFields: ["*"], creator: getTextContent }); const template = new PopupTemplate(//Set containing of infoWindow { content: [contentWidget], title: title }); aLayer.popupTemplate = template; } function getTextContent ( graphic ) { var html = "This feature is : " + graphic.graphic.attributes["IDT"]; var tc = new dijit_TabContainer ( { id: 'id_dijit_TabContainer', style: "height: 100%; width: 100%;", containerNode : "viewDiv" }, dojo_dom_construct.create("div" ) ); var cp1 = new dijit_ContentPane({ title: 'Details 1', content: "Content pane 1" }); var cp2 = new dijit_ContentPane({ title: 'Details 2', content: "Content pane 2" }); tc.addChild(cp1); tc.addChild(cp2); //dojo_parser.parse(); tc.startup(); return tc.domNode; } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

The result of a click on a feature gives the two tabs contents being displayed in line one above the other, but with no tabs effects at all. If there are more than one feature, the subsequent features are empty.

This used to work fine in 3.x, and we are currently upgrading to API 4.x,

Regards

topic Cannot make dynamic TabContainer in popupTemplate work API 4.19 in ArcGIS JavaScript Maps SDK Questions

Cannot make dynamic TabContainer in popupTemplate work API 4.19