The Popup widget may contain one or more actions, or buttons, that allow users to execute a function when clicked. The default popup on the view contains an "Zoom in" action that is symbolized by a magnifying glass icon
. When clicked, the view zooms in four LODs for points or to the extent of the feature for non-points, and centers on the selected feature.
This sample demonstrates how to add custom actions to a Popup and a PopupTemplate. Actions are added via the actions property on either Popup or PopupTemplate. Actions are added to the popup in the order they are added to the actions array.
Actions are styled by either using the class or image property. If using class, you must use an icon font. If using image, you must provide a valid URL to an image that will be used as a background-image for the action. Examples of both are used in this sample.
// Add this action to the popup so it is always available in this view
const measureThisAction = {
title: "Measure Length",
id: "measure-this",
image: "Measure_Distance16.png"
};
const template = {
// autocasts as new PopupTemplate()
title: "Trail run",
content: "{name}",
actions: [measureThisAction]
};
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
popupTemplate: template // Set the popupTemplate with the actions set above
});
map.add(featureLayer);
// Execute each time the "Measure Length" is clicked
function measureThis() {
const geom = view.popup.selectedFeature.geometry;
const initDistance = geometryEngine.geodesicLength(geom, "miles");
const distance = parseFloat(Math.round(initDistance * 100) / 100).toFixed(2);
view.popup.content =
view.popup.selectedFeature.attributes.name +
"<div style='background-color:DarkGray;color:white'>" +
distance +
" miles.</div>";
}
// Event handler that fires each time an action is clicked.
reactiveUtils.on(
() => view.popup,
"trigger-action",
(event) => { // Execute the measureThis() function if the measure-this action is clicked
if (event.action.id === "measure-this") {
measureThis();
}
});