PopupTemplate

// Defines an action to zoom out from the selected feature
let zoomOutAction = {
  // This text is displayed as a tooltip
  title: "Zoom out",
  // The ID by which to reference the action in the event handler
  id: "zoom-out",
  // Sets the icon font used to style the action button
  className: "esri-icon-zoom-out-magnifying-glass"
};
// Adds the custom action to the PopupTemplate.
popupTemplate.actions.push(zoomOutAction);
// Apply this PopupTemplate to a layer (or graphic)
layer.popupTemplate = popupTemplate;
// This action will only appear in the popup for features in that layer

// The function to execute when the zoom-out action is clicked
function zoomOut() {
  // In this case the view zooms out two LODs on each click
  view.goTo({
    center: view.center,
    zoom: view.zoom - 2
  });
}

// This event fires for each click on any action
// Notice this event is handled on the default popup of the View
// NOT on an instance of PopupTemplate
view.popup.on("trigger-action", function(event){
  // If the zoom-out action is clicked, fire the zoomOut() function
  if(event.action.id === "zoom-out"){
    zoomOut();
  }
});

// Set a simple string to a popupTemplate's content
// The string references a value from the POP_2015 attribute field
layer.popupTemplate = {
  content: "{POP_2015} people live in this census tract"
};

// Set a simple string to a popupTemplate's content
// referencing the value returned from an Arcade expression
layer.popupTemplate = {
  content: "{expression/per-total}% of people in this boundary have a college education.",
  expressionInfos: [{
    name: "per-total",
    expression: "Round((($feature.bachelor + $feature.master + $feature.doctorate) / $feature.TOT_POP) * 100, 2)"
  }]
};

// Display a table in the popup's content referencing two values
// one from a field, and another returned from an Arcade expression
layer.popupTemplate = {
  title: "College Education in {NAME}",
  content: [
  {
    type: "fields", // Autocasts as new FieldsContent()
    // Autocasts as new FieldInfo[]
    fieldInfos: [
    {
      fieldName: "TOT_POP",
      label: "Total population (2023)",
      format: {
        digitSeparator: true
      }
    },
    {
      fieldName: "expression/college"
    }]
  }],
  // autocasts to ExpressionInfo class
  expressionInfos: [{
    name: "college",
    title: "Completed a college degree",
    expression: "$feature.bachelor + $feature.master + $feature.doctorate"
  }]
};

// The following snippet shows how to set various popup element types within the template's
// content. This snippet also works with related tables.
layer.popupTemplate.content = [{
  type: "fields", // Autocast as new FieldsContent()
  // Autocast as new FieldInfo[]
  fieldInfos: [{
    fieldName: "Point_Count",
    visible: false,
    label: "Count of Points",
    // Autocast as new FieldInfoFormat()
    format: {
      places: 0,
      digitSeparator: true
    }
  }, {
   fieldName: "relationships/0/Point_Count_COMMON",
   visible: true,
   label: "Sum of species tree count",
   format: {
     places: 0,
     digitSeparator: true
   },
   statisticType: "sum"
  }]
}, {
  // Autocasts as new TextContent()
  type: "text",
  text: "There are {Point_Count} trees within census block {BLOCKCE10}"
}, {

  // Autocasts as new MediaContent()
  type: "media",
  mediaInfos: [{
    title: "<b>Count by type</b>",
    type: "pie-chart", // Autocasts as new PieChartMediaInfo()
    caption: "",
    // Autocasts as new ChartMediaInfoValue()
    value: {
      fields: [ "relationships/0/Point_Count_COMMON" ],
      normalizeField: null,
      tooltipField: "relationships/0/COMMON"
    }
  }, {
    title: "<b>Mexican Fan Palm</b>",
    type: "image", // Autocasts as new ImageMediaInfo()
    caption: "tree species",
    // Autocasts as new ImageMediaInfoValue()
    value: {
      sourceURL: "https://www.sunset.com/wp-content/uploads/96006df453533f4c982212b8cc7882f5-800x0-c-default.jpg"
    }
  }]
}, {
  // if attachments are associated with feature, display it.
  // Autocasts as new AttachmentsContent()
  type: "attachments"
}];

// The following snippet shows how to use a function
// to create a simple node and display it in the popup template content
let template = new PopupTemplate({
  title: "Population by Gender",
  content: setContentInfo
});

function setContentInfo(feature){
  // create a chart for example
  let node = domConstruct.create("div", { innerHTML: "Text Element inside an HTML div element." });
  return node;
}

// The following snippet shows how to set a popupTemplate
// on the returned results (features) from identify

 idResult.feature.popupTemplate = {
   title: "{NAME}",
   content: [{
     // Pass in the fields to display
     type: "fields",
     fieldInfos: [{
       fieldName: "NAME",
       label: "Name"
     }, {
       fieldName: "REGION",
       label: "Region"
    }]
   }]
};

// Displays two values returned from Arcade expressions
// in a table within the popup when a feature is clicked
layer.popupTemplate = {
  content: [{
    type: "fields", // Autocasts as new FieldsContent()
    // Autocasts as new FieldInfo[]
    fieldInfos: [{
      fieldName: "expression/college"
    }, {
      fieldName: "expression/nocollege"
    }]
  }],
  // autocasts to ExpressionInfo class
  expressionInfos: [{
    name: "college",
    title: "Completed a college degree",
    expression: "$feature.bachelor + $feature.master + $feature.doctorate"
  }, {
    name: "nocollege",
    title: "Did not complete a college degree",
    expression: "$feature.elementary + $feature.middle + $feature.highschool + $feature.somecollege"
  }]
};

// Displays a value returned from an Arcade expression within
// a simple string defined in the popupTemplate's content
layer.popupTemplate = {
  content: "{expression/per-total}% of people in this boundary have a college education.",
  expressionInfos: [{
    name: "per-total",
    expression: "Round((($feature.bachelor + $feature.master + $feature.doctorate) / $feature.TOT_POP) * 100, 2)"
  }]
};

// This snippet demonstrates how to show only a subset of fields.
// By setting the 'type: "fields"', and providing the fieldInfos,
// only field data will display within this feature layer's popuptemplate.
// If no fieldInfos is specified directly in the content, the popup defaults
// to whatever is set in the popupTemplate.fieldInfos.
let popupTemplate = new PopupTemplate({
  // autocasts as new PopupTemplate()
  title: "{NAME} in {COUNTY}",
  outFields: ["*"],
  content: [{
    // It is also possible to set the fieldInfos outside of the content
    // directly in the popupTemplate. If no fieldInfos is specifically set
    // in the content, it defaults to whatever may be set within the popupTemplate.
    type: "fields",
    fieldInfos: [{
      fieldName: "B12001_calc_pctMarriedE",
      label: "Married %"
    },{
      fieldName: "B12001_calc_numMarriedE",
      label: "People Married",
      format: {
        digitSeparator: true,
        places: 0
      }
    }]
  }]
});

// This snippet demonstrates setting the popup's content by referencing
// specific fields defined within the popupTemplate's fieldInfos.
let popupTemplate = new PopupTemplate({
  title: "{NAME} in {COUNTY}",
  outFields: ["*"],
  content: "Census data indicates that {B12001_calc_numMarriedE} people were married in {NAME}, {COUNTY}. The overall percentage of married people is {B12001_calc_pctMarriedE}%.",
  fieldInfos: [{
    fieldName: "B12001_calc_pctMarriedE",
    },{
    fieldName: 'B12001_calc_numMarriedE',
    format: {
      places: 0,
      digitSeparator: true
      }
  }]
});

// Set the MapImageLayer with specified popupTemplate
 USALayer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  id: "USA",
  sublayers: [{
    id: 2,
    visible: true,
    popupTemplate: {
      title: "{state_name} Population",
      content: getInfo,
      outFields: ["*"]
    }
  }]
})

// The function used for the PopupTemplate
function getInfo(feature) {
  let graphic, attributes, content;
  graphic = feature.graphic;
  attributes = graphic.attributes;
  content =  "In year 2000:- " + attributes.pop2000 ;
  return content;
}

// The actions defined in the Popup will not display when the
// PopupTemplate is used. The actions defined in the PopupTemplate will be used instead.
popupTemplate.overwriteActions = true;

// Grab the layer and check if 'returnGeometry' is false,
// if so, set to 'true' to access selected feature's geometry

view.when(function() {
  webmap.when(function(response) {
    returnedLayer = response.layers.find(function(layer) {
      return layer.id === "<layer id>";
    });

    if (returnedLayer.popupTemplate.returnGeometry === false) {
      returnedLayer.popupTemplate.returnGeometry = true;
      reactiveUtils.watch(() => popup?.viewModel?.active, function() {
        console.log(view.popup.selectedFeatureWidget.graphic);
      });
    }
  });
});

// Within the popup template, placeholders are denoted by `{}`.
// It specifies attributes to display.
// In a service where a field named NAME contains the name of a county, the title
// of the popup when the user clicks a feature representing Los Angeles County will say:
// "Population in Los Angeles County"
popupTemplate.title = "Population in {NAME} County";

// In this example, the popup template's title is set via a function. The function name is
// passed in for its property. Notice that the clicked feature is then passed in to the function.

let popupTemplate = {
  // autocasts as new PopupTemplate()
  title: countyName,
  outFields: ["*"] // Make sure to specify the outFields so that these are available in the function
};

function countyName(feature) {
  // Return the layer title and individual county name
  return feature.graphic.layer.title + " : {NAME}";
}

// Executes a reverse geocode in the popupTemplate title
// and returns the result as a promise. This will display the
// address for the location of the point in the title

const locatorUrl = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer";

const params = {location: event.mapPoint};

layer.popupTemplate = {
  outFields: ["*"],
  title: function(event) {
    return locator
      .locationToAddress(locatorUrl, params)
      .then(function(response) {
        // This value must be a string
        return response.address;
      });
  }
};