popupTemplate.title = "Marriage in NY, Zip Code: {ZIP}",

popupTemplate.content = "<p>As of 2015, <b>{MARRIEDRATE}%</b> of the" +
" population in this zip code is married.</p>" +
"<ul><li>{MARRIED_CY} people are married</li>" +
"<li>{NEVMARR_CY} have never married</li>" +
"<li>{DIVORCD_CY} are divorced</li><ul>";

Property Overview

Property Details

actionsCollection<(ActionButton|ActionToggle)>autocast

Autocasts from Object[]

A Collection of action or action toggle objects. Each object represents an action or function that may be executed by clicking the icon or image symbolizing them in the Popup. By default, every Popup has a zoom-to action styled with a magnifying glass icon . When this icon is clicked, the view zooms in four LODs and centers on the selected feature.

PopupTemplates do not have default actions. To override actions on the Popup using PopupTemplate see overwriteActions. Actions defined in a PopupTemplate will only appear in the Popup for features or layers that apply that particular PopupTemplate.

The order of each action in the popup is the same order in which they appear in the actions Collection.

The Popup event in Popup fires each time an action in the popup is clicked. This event should be used to execute custom code for each action clicked. For example, if you would like to add a zoom-out action to the PopupTemplate that zooms the view out several LODs, you would define the zoom-out code in a separate function. Then you would call the custom zoom-out function in the trigger-action event handler. See the sample code snippet below for more details on how this works.

Actions are defined with the properties listed in the ActionButton or ActionToggle class.

See also:

• Sample - Popup actions

• Sample - Custom popup actions per feature

Example:

// Defines an action to zoom out from the selected feature
var 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();
  }
});

contentContentElement|ContentElement[]|String|Function|Promiseautocast

The template for defining and formatting a popup's content. Content may be defined with one of four types of values.

• String - A popup's content can be a simple text or string value referencing field values or Arcade expressions. Expressions must be defined in the expressionInfos property.
• Popup elements - You can also display content as popup elements. These elements can be used individually or combined. The order in which they are set determines how they display within the popup. See the items below describing each element.
  • text - A TextContentElement that provides descriptive text as content.
  • media - A MediaContentElement that is used to display media such as charts and/or images.
  • fields - A FieldsContentElement. that contains the fields to display within the content. If this is not set directly within the content property, the popup will display whatever is set in the PopupTemplate.fieldInfos property.
  • attachments - A AttachmentsContentElement that contains attachments associated with the feature.
• promise - The PopupTemplate's content may also be defined with a promise that resolves to any of the above-mentioned elements. This is useful for cases when you run a task or execute a query and want to display the results in the popup. Simply pass the promise to the popupTemplate's content and ensure that it resolves to a string or other popup element.
• function - Content may be defined with a JavaScript function that returns any of the above-mentioned elements. This is handy when your popup requires additional processing or functionality than what is provided with the four content types listed above. For example, let’s assume that you would like to display charts using third-party JavaScript libraries or categorize information into separate tabs. In these cases, you can use a function that returns either a string, a reference to an HTML element, a popup element, or a promise. When the feature is clicked, the feature is passed as an argument to the function and provides access to the feature’s graphic and attributes. The function then executes and returns a value to display in the popup template. It is also possible to check a specific feature attribute and determine whether to apply a function based on its value. Out-of-the-box formatting functions can be used to format date, time, and number values. The syntax for using an out-of-the-box formatting function is: {field-name:format-function-name(option-a: value, option-b: value)}

The formatter functions are described below:

Type	Description
DateString	Formats the date into a human-readable format. Supports the following options: hideTime: false - When true shows time. Default value is false. local: false - Displays date and time in the local time zone. Default value is false. When false the date will display in UTC. systemLocale: false - Displays date and time in the system locale (local time zone). Default value is false.
DateFormat	Converts date fields into a human-readable format using dojo/date/locale.format method. Supports the same options as dojo/date/locale.format. The following snippets show some usage examples: {DATE_FIELD:DateFormat} produces 3/8/08 4:00 PM. {DATE_FIELD:DateFormat(selector: 'date', fullYear: true)} produces 4/8/2009.
NumberFormat	Formats numbers into various formats using the dojo/number.format method. Supports the same set of options as dojo/number.format. The following snippets show examples of usage pattern examples: {Magnitude:NumberFormat} produces 4.23456. {Magnitude:NumberFormat(places:2)} produces 4.23.

Out-of-the-box formatting functions and custom functions are supported as of version 4.1.

See also:

• Sample - Multiple popup elements

• Sample - PopupTemplate function

• Sample - PopupTemplate with promise

Examples:

// 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-asian}% of the people in this tract are Asian."
};

// 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: "Population in {NAME}",
  content: [{
    type: "fields",
    fieldInfos: [{
      fieldName: "POP_2015",
      label: "Total population (2015)",
      format: {
        digitSeparator: true
      }
    }, {
      fieldName: "expression/per-asian"
    }]
  }]
};

// 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
  fieldInfos: [{
    fieldName: "Point_Count",
    visible: false,
    label: "Count of Points",
    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"
  }]
}, {
  // Autocast
  type: "text",
  text: "There are {Point_Count} trees within census block {BLOCKCE10}"
}, {

  // Autocast
  type: "media",
  mediaInfos: [{
    title: "<b>Count by type</b>",
    type: "pie-chart",
    caption: "",
    value: {
      fields: [ "relationships/0/Point_Count_COMMON" ],
      normalizeField: null,
      tooltipField: "relationships/0/COMMON"
    }
  }, {
    title: "<b>Mexican Fan Palm</b>",
    type: "image",
    caption: "tree species",
    value: {
      sourceURL: "https://www.sunset.com/wp-content/uploads/96006df453533f4c982212b8cc7882f5-800x0-c-default.jpg"
    }
  }]
}, {
  // Autocast
  type: "attachments"
}];

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

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

// The following snippet shows how to use a function on an attribute.
// populationChange() function called on POP2013 attribute.
// The snippet also shows the use of NumberFormat out of the box
// formatter function on numeric field.
var popupTemplate = new PopupTemplate({
  title: "Population in {NAME}",
  content: "As of 2010, the population in this area was <b>{POP2010:NumberFormat}</b>." +
           "As of 2013, the population here was <b>{POP2013:NumberFormat}</b>." +
           "Percent change is {POP2013:populationChange}"
  });

populationChange = function (value, key, data) {
  // calculate the population percent change from 2010 to 2013.
  var diff = data.POP2013 - data.POP2010;
  var pctChange = (diff * 100) / data.POP2010;
  var result = diff > 0 ? "images/up.png" : "images/down.png";

  // add green arrow if the percent change is positive.
  // red arrow for negative percent change.
  return "<img src='" + result + "'/>" +
         "<span style='color: " +
          (pctChange < 0 ? "red" : "green") + ";'>" +
          number.format(pctChange, { places: 3 }) +
         "%</span>";
}

declaredClassStringreadonly inherited

Since: ArcGIS API for JavaScript 4.7

The name of the class. The declared class name is formatted as esri.folder.className.

expressionInfosExpressionInfo[]autocast

Since: ArcGIS API for JavaScript 4.4

An array of objects or ExpressionInfo[] that reference Arcade expressions.

Examples:

// Displays two values returned from Arcade expressions
// in a table within the popup when a feature is clicked
layer.popupTemplate = {
  content: [{
    type: "fields",
    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)"
  }]
};

fieldInfosFieldInfo[]autocast

An array of FieldInfo that defines how fields in the dataset or values from Arcade expressions participate in a popup. Each object FieldInfo contains properties for a single field or expression.

Example:

var popupTemplate = new PopupTemplate({
  content: [{
    type: 'fields',
    fieldInfos: [{
      fieldName: 'ELEV_ft',
      label: 'Elevation (feet)',
      format: {
        places: 0,
        digitSeparator: true
      }
    },{
       fieldName: 'PROMINENCE_ft',
       label: 'Prominence (feet)',
       format: {
         places: 0,
         digitSeparator: true
       }
    },{
       fieldName: 'Recorded',
       label: 'Recorded Date',
       format: {
         dateFormat: 'short-date'
       }
    },{
       fieldName: 'expression/density'
       // label is defined in the expressionInfos
    }]
  }]
});

lastEditInfoEnabledBoolean

Since: ArcGIS API for JavaScript 4.10

Indicates whether or not editor tracking should display.

Default Value:true

layerOptionsLayerOptionsautocast

Since: ArcGIS API for JavaScript 4.5

Additional options that can be defined for the popup layer.

outFieldsString[]

Since: ArcGIS API for JavaScript 4.9

An array of fields used in the PopupTemplate. Use this property to indicate what fields are required to fully render the PopupTemplate.

To fetch the values from all fields, use ["*"].

This will not fetch fields from related tables. If related features are needed, set this using FieldInfo.

Default Value:null

overwriteActionsBoolean

Indicates whether actions should replace existing popup actions.

Default Value:false

Example:

// 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;

relatedRecordsInfoRelatedRecordsInfoautocast

The RelatedRecordsInfo class provides additional sorting options when working with related records in a popup.

titleString|Function

The template for defining how to format the title used in a popup. You can format the title by specifying either a string value or a function that returns a simple string.

Example:

// Within the popup template, placeholders are denoted by `{}`.
// It specifies attributes to display.
// In a service where a field named COUNTY_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 {COUNTY_NAME} County";

Method Overview

Method Details

clone(){PopupTemplate}

Creates a deep clone of the PopupTemplate object.

Returns:

Type	Description
PopupTemplate	Returns a deep clone of the PopupTemplate.

fromJSON(json){*}static

Creates a new instance of this class and initializes it with values from a JSON object generated from a product in the ArcGIS platform. The object passed into the input json parameter often comes from a response to a query operation in the REST API or a toJSON() method from another ArcGIS product. See the Using fromJSON() topic in the Guide for details and examples of when and how to use this function.

Parameter:

json Object A JSON representation of the instance in the ArcGIS format. See the ArcGIS REST API documentation for examples of the structure of various input JSON objects.

Returns:

Type	Description
*	Returns a new instance of this class.

toJSON(){Object}

Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() topic in the Guide for more information.

Returns:

Type	Description
Object	The ArcGIS portal JSON representation of an instance of this class.