Format Popup Content | Guide | ArcGIS API for JavaScript 3.26

Developers can define the popup content using the setContent and setTitle methods. The content can be either a string or function. View the Format Info Window Content help topic for more details. You can also define the content by specifying a template and associating it with the layer or graphic, see the PopupTemplate section below for more information.

Additional information can be added to the popup's action list section. For example, you could add a link that provides additional information about the selected feature or a link that when clicked executes a geoprocessing tool. View the Popup with Geoprocessing Tool sample for details.

PopupTemplate

The PopupTemplate class extends esri/InfoTemplate and allows developers to define templates that include title, description, attachments, images and charts. These components are then organized in a layout that is identical to the popup experience in ArcGIS.com.

The PopupTemplate class extends esri/InfoTemplate and provides support for defining a layout that can contain the following components:

Title - Define the title for the popup using the title property.
Description - Custom content, content from one field, name/value content from all fields. The description content can be defined using the description or fieldInfos[] properties.
Media - Images, charts (pie, bar, line). Define media content using the mediaInfos[] property
Display Attachments - If the content supports attachments, enable attachments using the showAttachments property.

Content from fields can be used in the popup by specifying the field name in curly brackets, for example: {field_name}. This syntax differs from the syntax used to define the info template.

To create a PopupTemplate, define the popup content by creating an object with the properties listed in the table below.

At version 3.10 and later, popup templates can include references to fields from tables or layers that participate in a relationship class. The syntax for using these fields is relationships/relationship_id/field_name. To use a field from a relationship, the field should be included in fieldInfos and in title, description or mediaInfos. An example of using this syntax is shown at the bottom of this page.

<String> title	Specify a string value or attribute field for the popup title.
<String> description	Define the popup content by specifying a string or markup that can include field names. When null, the description will be constructed using name/value pairs defined in fieldInfos. var template = new PopupTemplate({ title: "{title}", description: "Flickr caption: {description}" });
<Object[]> fieldInfos	An array of objects representing field information. The order of the fields in the array defines how the fields will display in the popup. See the `fieldInfos` table below for property names, types and examples.
<Boolean> showAttachments	When true, display attachments for feature layers that have attachments enabled.
<Object[]> mediaInfos	Define images, charts (pie, bar, line) to display in the popup. MediaInfos is an array of objects with the following options. See the `mediaInfos` table below for property names, types and examples.
<Object[]> expressionInfos	An array of objects that reference Arcade expressions. These expressions evaluate to either a number or a string value on a feature-by-feature basis at runtime. The values display within the map's popup as if they are field values. See the object specification table below for a description of the properties that may be set in each object. (Added at v3.21)

fieldInfo structure:

<String> fieldName:

The name of the field.

<String> label

The label to display, the default value is the field alias.

<Object> format

The date or number formatting object. Fields of type date and number can be formatted by specifying a formatting function. The format will apply anywhere the field is used in the popup (title, description, media, etc).

Numeric formatters are specified by supplying the number of places and optionally if the number should have a digit separator. The dijitSeparator will be a comma or decimal point depending on the locale.

format: { places: 0, digitSeparator: true }

Date fields are formatted by specifying a name from the table below. "LE" refers to little endian.

format: { dateFormat: 'shortDateShortTime' }

shortDate	12/21/1997
shortDateLE	21/12/1997
longMonthDayYear	December 21,1997
dayShortMonthYear	21 Dec 1997
longDate	Sunday, December 21, 1997
shortDateLongTime	12/21/1997 6:00:00 PM
shortDateLELongTime	21/12/1997 6:00:00 PM
shortDateShortTime	12/21/1997 6:00 PM
shortDateLEShortTime	21/12/1997 6:00 PM
shortDateShortTime24	12/21/1997 18:00
shortDateLEShortTime24	21/12/1997 18:00
shortDateShortTime24	12/21/1997 18:00
shortDateLEShortTime24	21/12/1997 18:00
longMonthYear	December 1997
shortMonthYear	Dec 1997
year	1997

<Boolean> visible

Define field visibility.

<String> tooltip

Define a tooltip for popup fields.

<String> stringFieldOption

Defines the text box format, valid values are: richtext, textarea and textbox.

mediaInfo structure:

title	Define the media title.
caption	Specify a caption for the media.
type	Specify the media type, valid values are image, piechart, barchart,columnchart,linechart
refreshInterval	Number indicating the refresh interval of the layer in minutes. Non-zero value indicates automatic layer refresh at the specified interval. Value of 0 indicates auto refresh is not enabled. If the property does not exist, it's equivalent to having a value of 0. Only applicable when `type` is set to `image`.
value	The value format depends on the media type. The snippet below defines an image value: { "sourceUrl": <string>, "linkUrl": <string> } This snippet shows a chart value: { "fields": ["field1","field2","field3"], "normalizeField": "field4" }
theme	Define a new dojo theme, only valid for chart types. View the Dojox Charting Theme Preview to see some of the theme options.

expressionInfo structure:

<String> expression	An Arcade expression evaluating to either a string or a number. This expression can reference field values using the `$feature` global variable and perform mathematical calculations and logical evaluations at runtime. Field names referenced in Arcade expressions must be included in the `outFields` property of the layer.
<String> name	The name of the expression. This is used to reference the value of the given expression in the popupTemplate's `description` property by wrapping it in curly braces and prefacing it with expression/ (e.g., {expression/expressionName}). See the code snippet below.
<String> returnType	Optional. The return type of the Arcade expression. Supported types are `string` and `number`. The default value is `string`.
<String> title	Optional. The title used to describe the value returned by the expression in the popup.

Examples

The popup template defines that the title and description for the popup will come from fields. In popups fields can be referenced using {field_name} syntax.

var template = new PopupTemplate({
  title: "{title}",
  description: "{description}"
});

Template with content from multiple fields defined using fieldInfos[].

var template = new PopupTemplate({
  title: "Age Distribution in {FIPS}",
  fieldInfos: [{
    fieldName: "AGE_UNDER5",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_5_17",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_18_21",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_22_29",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_30_39",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_40_49",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_50_64",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_65_UP",
    visible: true,
    format: {
      places: 0
    }
  }]
});

Template that defines a popup chart:

var template = new PopupTemplate({
  title: "Age Distribution in {FIPS}",
  mediaInfos: [{
    type: "piechart",
    value: {
      fields: ["AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29", "AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"],
      theme: "Julie"
    }
  }]
});

Template that displays an image in the media section:

var template = new PopupTemplate({
  title: "Parcel Photos",
  mediaInfos: [{
    "title": "",
    "caption": "",
    "type": "image",
    "value": {
      "sourceURL": "{link}",
      "linkURL": "{link}"
    }
  }]
});

Template that references a related field and uses it in a chart:

var template = new PopupTemplate({
  "title": "Beverly Hills Trees By Block",
  "fieldInfos": [{
    "fieldName": "Point_Count",
    "label": "Count of Points",
    "format": {
      "places": 0,
      "digitSeparator": true
    }
  }, {
    "fieldName": "relationships/0/Point_Count_COMMON",
    "label": "Sum of species tree count",
    "format": {
      "places": 0,
      "digitSeparator": true
    },
    "statisticType": "sum"
  }, {
    "fieldName": "relationships/0/COMMON",
    "label": "Common Name"
  }, {
    "fieldName": "BLOCKCE10",
    "label": "Block"
  }],
  "description": "There are {Point_Count} trees within census block {BLOCKCE10}",
  "showAttachments": false,
  "mediaInfos": [{
    "title": "Count By Type",
    "type": "columnchart",
    "caption": "",
    "value": {
      "theme": "GreySkies",
      "fields": ["relationships/0/Point_Count_COMMON"],
      "normalizeField": null,
      "tooltipField": "relationships/0/COMMON"
    }
  }]
});

Template that references an Arcade expression.

var template = new PopupTemplate({
  expressionInfos: [{
    name: "participation-rate",
    title: "% of population 16+ participating in the labor force",
    expression: "Round(($feature.CIVLBFR_CY / $feature.POP_16UP)*100,2)"
  }],
  description: "In {NAME} county, {expression/participation-rate}% of the population"
    + " participates in the labor force."
});

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

Define popup content

PopupTemplate

Examples

Keyboard shortcuts