Community

Cannot make dynamic TabContainer in popupTemplate work API 4.19

351
0
04-15-2021 03:13 AM
ChristopheS
by
New Contributor II
‎04-15-2021 03:13 AM

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

0 Kudos
0 Replies