topic Placeholders in tabbed infoWindow in ArcGIS JavaScript Maps SDK Questions

Placeholders in tabbed infoWindow

JasonMiller1 — Fri, 15 Apr 2011 16:25:14 GMT

I've been working lately to get tabs working in my infoWindows. I have the tabs working, but now the placeholders that I'm putting in are no longer working. Before I started the tabs I had regular infoWindows and the same placeholders worked fine. Is there something to do with tabs that requires me to do this in a different way? Here's a snippet of my code that sets up the tabs.

function getInfoWindowContent() {

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

    // Create first tab
    var cp1 = new dijit.layout.ContentPane({
        title: "Details",
        content: "Name: ${NAME}"
    });
    
    tc.addChild(cp1); // Add tab to container

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

    tc.addChild(cp2); // Add tab to container

    return tc.domNode;
}

function addPoints() {
    ...
    var infoTemplate = new esri.InfoTemplate;
    infoTemplate.setTitle("City Information");
    infoTemplate.setContent(getInfoWindowContent);

    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);
    graphicsExtent.push(feature);
    ...
}

Re: Placeholders in tabbed infoWindow

KellyHutchins — Fri, 15 Apr 2011 18:39:54 GMT

When you specify a function to define the content for your info window, like you've done with getWindowContent, you do not have access to the placeholders. Instead you get the attributes from the graphic. In this snippet we define that the info window's content will be generated using a function named 'getWindowContent'.

template.setContent(getWindowContent);

Once you set this up, each time you click on a feature in the feature layer the getWindowContent function runs and provides you access to the clicked feature.

 function getWindowContent(graphic) {

Then in the code you can access the feature's attributes as follows:

graphic.attributes.NAME

So in your code you'll want to replace the placeholder {NAME} with graphic.attributes.NAME.

Re: Placeholders in tabbed infoWindow

JasonMiller1 — Fri, 15 Apr 2011 18:47:24 GMT

That works like a champ! Thanks for the help!