Applying HTML Markup or CSS rule to arrayUtils Attributes in InfoTemplate

BruceGreen

Can you please let me know how I can apply Style or append HTML markup into infoTemplate like this

        var symbol = new PictureMarkerSymbol("img/direqyb6T.png", 32, 32);
        layer2 = new GraphicsLayer();
        var infoTemplate = new InfoTemplate("Project Details", "${*}");
        arrayUtils.forEach(points, function (project) {
            att = {
                    "Project Id": project.ProjectID,
                    "Longitude": project.Longitude,
                    "Latitude": project.Latitude
            };
            mp = new Point(project.Longitude, project.Latitude);
            var projGra = new Graphic(mp, symbol, att);
            layer2.add(projGra);
        });

        layer2.setInfoTemplate(infoTemplate);
        map.addLayer(layer2);

this code is generating a popup like below

but I need to show the information in a HTML table or apply some css rules?

Thanks

ChenLi2

Hi Behrouz,

I think you should be able to customize your infotemplate using html like this:

var content = "<b>Status</b>: ${STATUS}" +
  "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +
  "<br><b>Total Acres</b>: ${APPROXACRE}" +
  "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
var infoTemplate = new InfoTemplate("${FIELD_NAME}", content);

for more details, please check here:

Format info window content | Guide | ArcGIS API for JavaScript