Tabs in an infoWindow?

[JasonMiller1]

I have a map set up that shows a route, and when you click on certain spots on the route, an infoWindow will pop up.  The infoTemplate that the infoWindow is using is created when the map is routed, it's not getting the information dynamically via a feature layer.  It's currenlty working fine with the default setup, but I'd like to include more information using tabs. 

I tried following the example set in this example: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/widget_infowin...

That example doesn't work, but I'm thinking it might be something to do with the feature layer. Following this example, I'm getting an error saying:

Message: Object doesn't support this property or method
and it's pointing to the arcgis api rather than a line in my js. 

Here's a snapshot of what my infoWindow-related code looks like.  Any ideas on what's causing my problems?

function addStops() {

....   
    
    for ( var i = 0; i < g_routeStops.length; i++) {
        var feature = g_routeStops;
        var infoTemplate = new esri.InfoTemplate;
        infoTemplate.setTitle("Milepost Info");
        infoTemplate.setContent(createInfoWindowContent);
        
        symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(
          esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE).setSize(9).setColor(
                new dojo.Color( [ 255, 255, 255]));
        
        feature.setSymbol(symbol).setInfoTemplate(infoTemplate);
        map.graphics.add(feature);
.....
}


function createInfoWindowContent(graphic){
 var tc = new dijit.layout.tabContainer({
  style: "height: 100%; width: 100%"
 }, dojo.create("div"));
 var cp1 = new dijit.layout.ContentPane({
  title: "Info",
  content: "info tab"
 });
 tc.addChild(cp1);
 
 var cp2 = new dijit.layout.ContentPane({
  title: "Details",
  content: "details tab"
 });
 tc.addChild(cp2);
 
 return dc.domNode;
}

[KellyHutchins]

It looks like here your code should read tc.domNode instead of dc:

return dc.domNode;

I have a map set up that shows a route, and when you click on certain spots on the route, an infoWindow will pop up.  The infoTemplate that the infoWindow is using is created when the map is routed, it's not getting the information dynamically via a feature layer.  It's currenlty working fine with the default setup, but I'd like to include more information using tabs. 

I tried following the example set in this example: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/widget_infowin...

That example doesn't work, but I'm thinking it might be something to do with the feature layer. Following this example, I'm getting an error saying:

Message: Object doesn't support this property or method
and it's pointing to the arcgis api rather than a line in my js. 

Here's a snapshot of what my infoWindow-related code looks like.  Any ideas on what's causing my problems?

function addStops() {

....   
    
    for ( var i = 0; i < g_routeStops.length; i++) {
        var feature = g_routeStops;
        var infoTemplate = new esri.InfoTemplate;
        infoTemplate.setTitle("Milepost Info");
        infoTemplate.setContent(createInfoWindowContent);
        
        symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(
          esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE).setSize(9).setColor(
                new dojo.Color( [ 255, 255, 255]));
        
        feature.setSymbol(symbol).setInfoTemplate(infoTemplate);
        map.graphics.add(feature);
.....
}


function createInfoWindowContent(graphic){
 var tc = new dijit.layout.tabContainer({
  style: "height: 100%; width: 100%"
 }, dojo.create("div"));
 var cp1 = new dijit.layout.ContentPane({
  title: "Info",
  content: "info tab"
 });
 tc.addChild(cp1);
 
 var cp2 = new dijit.layout.ContentPane({
  title: "Details",
  content: "details tab"
 });
 tc.addChild(cp2);
 
 return dc.domNode;
}

[JasonMiller1]

I corrected that and it's still not working for some reason.  I changed the code a bit to try and simplify it.  Here's what I'm working with now:

var infoContent = "<div dojoType='dijit.layout.TabContainer' style='width: 100%; height: 100%;'>" +
     "<div dojoType='dijit.layout.ContentPane' title='My first tab' selected='true'> This is my first tab </div>" +
     "<div dojoType='dijit.layout.ContentPane' title='My second tab'> This is my second tab </div>" +
    "</div>";

var tc = new dijit.layout.TabContainer({
    style: "height: 100%; width: 100%;"
});
var cp1 = new dijit.layout.ContentPane({
    title: "My first tab",
    content: "This is my first tab"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
    title: "My second tab",
    content: "This is my second tab"
});
tc.addChild(cp2);
tc.startup();


var infoTemplate = new esri.InfoTemplate;
infoTemplate.setTitle("Info");
infoTemplate.setContent(tc.domNode);

I've tried setting the last line to

infoTemplate.setContent(infoContent);

as well, and it still doesn't work.  I have both ways set up because I tried doing the tabs programatically and also declaratively, neither way works.  Setting the content to tc.domNode gives me the same error as before, setting the content to infoContent spits out the contents of both tabs but not in a tabbed interface.  Also if you hover over them it gives you the titles of the tabs. I've ensured that I'm including the correct dojo.requires at the top, but can't see anything else I'm doing wrong. Any other ideas?

[KellyHutchins]

Here's a simplified version of the sample that displays tabbed content in an info window - it might help you troubleshoot your application.  In order for this code to work you'll need to be using the latest release of the ArcGIS API for JavaScript (Version 2.2).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7"/>
      <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Info Window with Chart</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{padding:0;}
    </style>

   
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
    <script type="text/javascript">

      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dojo.number");
      dojo.require("dijit.layout.TabContainer");



      var map;

      

      function init() {

        var initExtent = new esri.geometry.Extent({"xmin":-13625244,"ymin":4541980,"xmax":-13622494,"ymax":4543688,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:initExtent});

        //Add the world imagery to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(basemap);  

        var template = new esri.InfoTemplate();
       
        template.setTitle("Tabbed Info Window");
        template.setContent(getWindowContent);

       

        var featureLayer= new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/MapServer/0",{
          mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template,
          outFields:["*"]
        });

        map.addLayer(featureLayer);
        map.infoWindow.resize(225,225);


      }

      

      function getWindowContent(graphic) {
        //make a tab container 
        var tc = new dijit.layout.TabContainer({
          style: "height: 100%; width: 100%;"
        }, dojo.create("div"));

        //tab 1
        var cp1 = new dijit.layout.ContentPane({
          title: "Details",
          content: "Content for Tab 1"
        });
        tc.addChild(cp1);

       //tab 2
        var cp2 = new dijit.layout.ContentPane({
          title: "Details 2",
          content: "Content for Tab2"
        });

        tc.addChild(cp2);

        return tc.domNode;

      }

      dojo.addOnLoad(init);

    </script>

  </head>

  

  <body class="claro">

    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">

      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">

      </div>

    </div>

  </body>



</html>

[DanPajak]

Kelly, I was able to adapt your code and utilize it in my project. I'm merging several sample together to create an interactive Zoning Map. I use the Find in DataGrid to bring users to a particular address once there I'd like them to be able to click on adjoining properties. So, my question is how do I populate the InfoWindow with the data from the 2 layers to appear. What I'm trying to do is similar to the Identify sample, but when I used that the identify window was rendered immediately. So another poster mentioned that "You want to create the dijits that will display in your info window programmatically" and he gave me a link to the InfoWindow with Chart sample.

In your code I see "outFields:["*"]" but when I try to populate it with my fields it breaks. I've been able to utilize many samples on there own or merging 1 or 2, but combining 4 or 5 has been a bit of a chore.

[KellyHutchins]

Can you post your code that isn't working so we can take a look?

Kelly, I was able to adapt your code and utilize it in my project. I'm merging several sample together to create an interactive Zoning Map. I use the Find in DataGrid to bring users to a particular address once there I'd like them to be able to click on adjoining properties. So, my question is how do I populate the InfoWindow with the data from the 2 layers to appear. What I'm trying to do is similar to the Identify sample, but when I used that the identify window was rendered immediately. So another poster mentioned that "You want to create the dijits that will display in your info window programmatically" and he gave me a link to the InfoWindow with Chart sample.

In your code I see "outFields:["*"]" but when I try to populate it with my fields it breaks. I've been able to utilize many samples on there own or merging 1 or 2, but combining 4 or 5 has been a bit of a chore.