The PopupTemplate class is used to define and format the content and title of a Layer or Graphic's Popup. You can format the content of the popup's template using a string, popup elements, FieldInfoFormat properties, or a custom function.
This sample demonstrates how to format the content of a PopupTemplate with a custom function.
How it works
When the application starts, the layer's popup property is set as shown below. The popup template content references the custom function population, which is defined later in the code.
// Create a new popupTemplate for the layer and call the custom populationChange()
// function to calculate percent change for the county.
popupTemplate: {
// autocasts as new PopupTemplate()
title: "Population in {NAME} County",
outFields: ["*"],
content: populationChange,
},
The population percentage change is calculated and the content will display a red down arrow if the percent rate is negative and a green up arrow if the percent rate is positive. Percentage change formatting is done in the population function. When the feature is clicked, this function is called. The feature is passed into the function. For this example, the feature attribute field value is PO.
function populationChange(feature) {
const div = document.createElement("div");
const upArrow =
'<svg width="16" height="16" ><polygon points="14.14 7.07 7.07 0 0 7.07 4.07 7.07 4.07 16 10.07 16 10.07 7.07 14.14 7.07" style="fill:green"/></svg>';
const downArrow =
'<svg width="16" height="16"><polygon points="0 8.93 7.07 16 14.14 8.93 10.07 8.93 10.07 0 4.07 0 4.07 8.93 0 8.93" style="fill:red"/></svg>';
// Calculate the population percent change from 2010 to 2013.
const diff = feature.graphic.attributes.POP2013 - feature.graphic.attributes.POP2010;
const pctChange = (diff * 100) / feature.graphic.attributes.POP2010;
const arrow = diff > 0 ? upArrow : downArrow;
// Add green arrow if the percent change is positive and a red arrow for negative percent change.
div.innerHTML = `As of 2010, the total population in this area was <b>${feature.graphic.attributes.POP2010}</b> and the density was <b>${feature.graphic.attributes.POP10_SQMI}</b> sq mi. As of 2013, the total population was <b>${feature.graphic.attributes.POP2013}</b> and the density was <b>${feature.graphic.attributes.POP13_SQMI}</b> sq mi. <br/> <br/>
Percent change is ${arrow} <span style='color: ${pctChange < 0 ? "red" : "green"};'>${pctChange.toFixed(3)}%</span>`;
return div;
}