topic Re: Format Info Window Content in ArcGIS JavaScript Maps SDK Questions

Format Info Window Content

RichardMoussopo — Wed, 24 Sep 2014 15:07:57 GMT

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());
        }

Re: Format Info Window Content

RiyasDeen — Wed, 24 Sep 2014 15:17:13 GMT

Hi Richard,

feature.setInfoTemplate(infoTemplateUtilities); should work.

for changing the backgrounf color use

.esriPopup .titlePane{

background-color: #ffffff

}

Re: Format Info Window Content

BenFousek — Wed, 24 Sep 2014 15:26:47 GMT

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".

Re: Format Info Window Content

RichardMoussopo — Wed, 24 Sep 2014 15:31:06 GMT

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());

Re: Format Info Window Content

RichardMoussopo — Wed, 24 Sep 2014 15:34:04 GMT

Thank you Ben,

still did not work.

Re: Format Info Window Content

RichardMoussopo — Wed, 24 Sep 2014 15:42:19 GMT

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.

Re: Format Info Window Content

RiyasDeen — Wed, 24 Sep 2014 15:56:44 GMT

Hi Richard,

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

Re: Format Info Window Content

ScottRutzmoser2 — Wed, 24 Sep 2014 16:08:47 GMT

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();

Re: Format Info Window Content

RichardMoussopo — Wed, 24 Sep 2014 16:10:27 GMT

here is the infoTemplate I want to use:

//Define a good infoTemplate

var infoTemplateUtilities = new InfoTemplate();

infoTemplateUtilities.setTitle("Facility: ${FACILITYID}");

infoTemplateUtilities.setContent("MAPREF NUMBER : ${MAPREF} " +

"Install Date: ${INSTALLDATE} " +

"Material: ${MATERIAL} " +

"Diameter: ${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

Re: Format Info Window Content

BenFousek — Wed, 24 Sep 2014 16:13:11 GMT

Richard,

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

Re: Format Info Window Content

RichardMoussopo — Wed, 24 Sep 2014 16:44:01 GMT

Thank you all,

the problem was the legacy.

changed to var infoTemplateUtilities = new esri.InfoTemplate(); and it worked.