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.
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
property.
description
or fieldInfos[]
properties.
mediaInfos[]
property
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. |
<Boolean> showLastEditInfo | Indicates whether or not editor tracking should display. |
<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' }
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<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> } { "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. |
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." });