Format Info Window Content

[RichardMoussopo]

I am trying to format the info window template and it is not working. here is my code below:

Also, is it possible to change the background color of the info window header through css?

 var identify = new esri.tasks.IdentifyTask(".../MapServer");
        var identifyParams = new esri.tasks.IdentifyParameters();
        identifyParams.geometry = evt.mapPoint;
        identifyParams.mapExtent = map.extent;
        identifyParams.returnGeometry = true;
        identifyParams.tolerance = 3;


        map.infoWindow.clearFeatures();

        //Define a good infoTemplate
        var infoTemplateUtilities = new InfoTemplate();


        infoTemplateUtilities.setTitle("Facility: <b>${FACILITYID}</b>");
        infoTemplateUtilities.setContent("MAPREF NUMBER :  <b>${MAPREF}</b><br/>" +
                                  "<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" +
                                  "<b>2000: </b>${POP2000:NumberFormat}<br/>" +
                                  "<b>2000 density: </b>${POP00_SQMI:NumberFormat}");


        try {
            identify.execute(identifyParams, function (results) {


                map.infoWindow.setFeatures(dojo.map(results, function (result) {
                    var feature = result.feature;
                    feature.infoTemplate.setInfoTemplate(infoTemplateUtilities); //<======  This method here does not work at all...
                    //feature.setInfoTemplate(new esri.InfoTemplate());  //<======  This method here works fine...
                    return feature;
                }));
                map.infoWindow.show(evt.mapPoint);
            });


        }
        catch (ex) {
            alert(ex.toString());
        }

[RiyasDeen]

Hi Richard,

feature.setInfoTemplate(infoTemplateUtilities); should work.

for changing the backgrounf color use

.esriPopup .titlePane{

background-color: #ffffff

}

[RichardMoussopo]

Thank you Riyas, the css worked but the info template did not. I am not sure why the Info Window is not showing up when I use feature.setInfoTemplate(infoTemplateUtilities);

It does work when I use   feature.setInfoTemplate(new esri.InfoTemplate());

[RichardMoussopo]

I am also wondering if the number of fields to show could be the issue?

because when using the default method feature.setInfoTemplate(new esri.InfoTemplate());

it shows all the fields in the info window.

[RiyasDeen]

Hi Richard,

Have you got fields POP07_SQMI, POP2000, POP00_SQMI in your layer. can you post a screenshot of your infowindow output?

[RichardMoussopo]

here is the infoTemplate I want to use:

  //Define a good infoTemplate

        var infoTemplateUtilities = new InfoTemplate();

        infoTemplateUtilities.setTitle("Facility: <b>${FACILITYID}</b>");

        infoTemplateUtilities.setContent("MAPREF NUMBER :  <b>${MAPREF}</b><br/>" +

                                  "<b>Install Date: </b>${INSTALLDATE}<br/><br/>" +

                                  "<b>Material: </b>${MATERIAL}<br/>" +

                                  "<b>Diameter: </b>${DIAMETER}");

        try {

            identify.execute(identifyParams, function (results) {

                map.infoWindow.setFeatures(dojo.map(results, function (result) {

                    var feature = result.feature;

                    feature.setInfoTemplate(infoTemplateUtilities);

                    //feature.setInfoTemplate(new esri.InfoTemplate());

                    return feature;

                }));

                map.infoWindow.show(evt.mapPoint);

            });

        }

        catch (ex) {

            alert(ex.toString());

        }

and here is the Default info Template

[BenFousek]

The method set setInfoTemplate() belongs to the feature (graphic) not the feature's infoTemplate object.

feature.setInfoTemplate(infoTemplateUtilities)

The popup is fully customizable w/ css. Look it up with dev tools. It's a div in the map dom node w/ base class "esriPopup".

[RichardMoussopo]

Thank you Ben,

still did not work.

[ScottRutzmoser2 · Accepted solution]

Hi Richard,

Two things to check

1) do you require esri/InfoTemplate

2) on line 12 above         var infoTemplateUtilities = new InfoTemplate(); 
I think you should define it like         var infoTemplateUtilities = new esri.InfoTemplate(); 

[BenFousek]

Richard,

Scott's right. Looks like you're using legacy. Consider switching to AMD.