topic Tabbed pop-up window? in ArcGIS API for Flex Questions

Tabbed pop-up window?

JosephGrubbs — Sat, 18 Feb 2012 13:41:03 GMT

Does the ArcGIS API for Flex support tabbed pop-up windows? The ArcGIS Resource Center (ArcGIS API for Flex 2.5) states: "If more than one feature with pop-up information is located at the clicked point, you can view the pop-up content for each feature in turn in the same pop-up window." However, it doesn't state how this is accomplished. The tab function is supported in ArcGIS Explorer, but I'm not seeing it in the API or Flex Viewer.

I'd like to configure my pop-ups for a point feature class (dynamic) to have tabs for two sets of attributes (two facilities on the same structure) at the same point location. Has anyone developed with this type of tabbed pop-up configuration? Any ideas?

Re: Tabbed pop-up window?

BjornSvensson — Sun, 19 Feb 2012 19:19:04 GMT

Does the ArcGIS API for Flex support tabbed pop-up windows?

Not yet, but it is something that we are working on for version 3.0 beta 2 (planned for late March).

Re: Tabbed pop-up window?

JosephGrubbs — Mon, 20 Feb 2012 12:48:39 GMT

Thank you, Bjorn. Great work by the ESRI team on the API for Flex. I look forward to the v. 3 release!

Re: Tabbed pop-up window?

LuisMartinez3 — Thu, 14 Nov 2013 01:27:13 GMT

Im using the 3.5 Flex Viewer and was wondering if the multiple tabs for pop ups was ever looked further in to...I am also trying to add content in each pop up in the form of a paragraph and havent found a way to simply do this being that each point in the feature class has different text and content... for example, sorta like the infowindow in the google maps api where you can add tabs with various types of content in each tab.
Thanks, LM

Re: Tabbed pop-up window?

KenBuja — Sat, 11 Dec 2021 09:21:54 GMT

In one of my projects, I run an IdentifyTask on the visible layers in a map service. The results from each layer are put into a grid on a separate tab. This is built on the fly, since the user has the ability to turn on different layers and since each layer has different attributes. Each grid has the event handlers added to them so that rolling over or clicking a cell will highlight the feature on the map.

This is the code I use to build the tabs and insert them into the infoWindow.

            protected function MainMap_mapClickHandler(event:MapMouseEvent):void
            {
                var identifyParams:IdentifyParameters = new IdentifyParameters();
                var clickGraphic:Graphic = new Graphic(event.mapPoint, clickPointSymbol);
                
                identifyParams.returnGeometry = true;
                identifyParams.tolerance = 5;
                identifyParams.width = MainMap.width;
                identifyParams.height = MainMap.height;
                identifyParams.geometry = event.mapPoint;
                identifyParams.mapExtent = MainMap.extent;
                identifyParams.spatialReference = MainMap.spatialReference;
                identifyParams.layerIds = layerLIS.visibleLayers.source;
                identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
                clickGraphicsLayer.clear();
                MainMap.infoWindow.hide();
                
                graphicsLayer.clear();
                cursorManager.setBusyCursor();
                
                identifyTask.url = layerLIS.url;
                identifyTask.execute(identifyParams, new AsyncResponder(resultFunction, faultFunction, clickGraphic));
                
                function resultFunction(results:Array, clickGraphic:Graphic):void
                {
                    var myInfoRenderer:InfoRenderer = new InfoRenderer;
                    var mapPoint:MapPoint = MapPoint(clickGraphic.geometry);
                    var point:Point = MainMap.toScreen(mapPoint);
                    
                    if (results && results.length > 0)
                    {
                        var oldLayer:Number = -1;
                        var resultsArray:Array = [];
                        var result:IdentifyResult;
                        var resultGraphic:Graphic;
                        var tab:TabNavigator = new TabNavigator();
                        var newVBox:VBox = new VBox;
                        var newVBoxDG:VBox = new VBox;
                        var newText:Text = new Text;
                        var newDG:DataGrid = new DataGrid;
                        var graphic:Graphic;
                        
                        clickGraphicsLayer.add(clickGraphic);
                        
                        result = results[0];
                        oldLayer = result.layerId;
                        resultsArray.push(result.feature.attributes);
                        newText = new Text;
                        newText.text = result.layerName;
                        graphic = result.feature;
                        graphic.alpha = 0.3;
                        graphicsLayer.add(graphic);
                        tab.width = 400;
                        tab.height = 230;
                        
                        for (var i:int = 1; i < results.length; i++)
                        {
                            result = results;
                            graphic = new Graphic;
                            graphic = result.feature;
                            graphic.alpha = 0.3;
                            graphicsLayer.add(graphic);
                            if (result.layerId == oldLayer)
                            {
                                resultsArray.push(result.feature.attributes);
                            }
                            else
                            {
                                newDG = new DataGrid;
                                newVBox = new VBox;
                                newDG.dataProvider = resultsArray;
                                if (!(result.feature.attributes.source == undefined))
                                {
                                    for each (var dgCol:DataGridColumn in newDG.columns)
                                    {
                                        if (dgCol.dataField == "Source")
                                        {
                                            dgCol.itemRenderer = new ClassFactory(HyperLinkField);
                                        }
                                    }
                                }
                                
                                newDG.addEventListener(ListEvent.ITEM_CLICK, newDG_ItemRollOver, false, 0, true);
                                newDG.addEventListener(ListEvent.ITEM_ROLL_OUT, newDG_ItemRollOut, false, 0 ,true);
                                newDG.addEventListener(ListEvent.ITEM_ROLL_OVER, newDG_ItemRollOver, false, 0, true);
                                
                                newVBox.addElement(newText);
                                newVBox.addElement(newDG);
                                //                                newVBox.addElement(newVBoxDG);
                                newVBox.label = oldLayer.toString();
                                newVBox.label = oldLayer.toString();
                                tab.addElement(newVBox);
                                myInfoRenderer.addElement(tab);
                                
                                newText = new Text;
                                newText.text = result.layerName;
                                resultsArray = [];
                                resultsArray.push(result.feature.attributes);
                            }
                            oldLayer = result.layerId;
                        }
                        
                        newVBox = new VBox;
                        newVBoxDG = new VBox;
                        newDG = new DataGrid;
                        newDG.addEventListener(ListEvent.ITEM_CLICK, newDG_ItemRollOver, false, 0, true);
                        newDG.addEventListener(ListEvent.ITEM_ROLL_OUT, newDG_ItemRollOut, false, 0, true);
                        newDG.addEventListener(ListEvent.ITEM_ROLL_OVER, newDG_ItemRollOver, false, 0, true);
                        newVBox.addElement(newText);
                        newDG.dataProvider = resultsArray;
                        
                        if (!(results[0].feature.attributes.Source == undefined))
                        {
                            for each (var dgCol:DataGridColumn in newDG.columns)
                            {
                                if (dgCol.dataField == "Source")
                                {
                                    dgCol.itemRenderer = new ClassFactory(HyperLinkField);
                                }
                            }
                        }
                        newVBox.addElement(newDG);
                        //                        newVBoxDG.addElement(newDG);
                        //                        newVBox.addElement(newVBoxDG);
                        newVBox.label = oldLayer.toString();
                        tab.addElement(newVBox);
                        myInfoRenderer.addElement(tab);
                        
                        cursorManager.removeBusyCursor();
                        
                        MainMap.infoWindow.content = myInfoRenderer;
                        MainMap.infoWindow.label = "Results";
                        MainMap.infoWindow.show(MainMap.toMap(point));
                        MainMap.infoWindow.addEventListener(Event.CLOSE, infoWindow_Close, false, 0, true);
                    }
                }
            }

Re: Tabbed pop-up window?

LuisMartinez3 — Thu, 14 Nov 2013 13:24:50 GMT

Ken, thanks for the quick response, thats what I was looking for...I truly appreciate it. As a matter of fact, the entire layout of your app is what i am trying to do. Something simple and lite thats extremely user friendly. I am using the sample Dynamic Map Layers On/Off and keep getting a "Could not resolve <samples:MainTOC> to a component implementation." error. I created a Samples folder in my project and created two new components then copied pasted the code directly into them..dont have a clue why this wont work. I know this isnt the proper forum for this but was wondering if you based your application of that same sample code. Thanks, again.
Luis

Re: Tabbed pop-up window?

KenBuja — Thu, 14 Nov 2013 13:59:25 GMT

No, this was built pretty much from scratch a few years back that incorporates the TOC control developed by Tom Hill.

And don't forget to mark the posts that helpful by clicking on the up arrow!