Popup actions

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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.

// Defines an action that zooms out from the selected feature
var zoomOutAction = {
  // This text is displayed as a tool tip
  title: "Zoom out",
  id: "zoom-out",
  // An icon font provided by the API
  className: "esri-icon-zoom-out-magnifying-glass"
};

// Adds the action to the view's default popup.
view.popup.actions.push(zoomOutAction);

// event handler that fires each time an action is clicked.
view.popup.on("trigger-action", function(event){
  // If the zoom-out action is clicked, the following code executes
  if(event.action.id === "zoom-out"){
    view.goTo({
      center: view.center,
      zoom: view.zoom - 2
    });
  }
});