Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: PopupTemplate
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/PopupTemplate"], function(PopupTemplate) { /* code goes here */ });
Description
(Added at v2.3)
The PopupTemplate class extends esri/InfoTemplate and provides support for defining a layout. It can contain the following components:
- Title
- Description
- Media (charts and images)
- Display Attachments
View the Working with Popups help topic for details on creating and using popups.
Samples
Search for samples that use this class.Class hierarchy
esri/dijit/InfoTemplate |_esri/dijit/PopupTemplate
Constructors
| Name | Summary |
|---|---|
| new PopupTemplate(popupInfo, options?) | Create a new PopupTemplate object. |
CSS
esri/dijit/PopupTemplate | Download source
Properties
| Name | Type | Summary |
|---|---|---|
| content | String | Function | The template for defining how to format the content used in an InfoWindow. |
| info | Object | The popup definition defined as a JavaScript object. |
| title | String | Function | The template for defining how to format the title used in an InfoWindow. |
Methods
| Name | Return type | Summary |
|---|---|---|
| setContent(template) | InfoTemplate | Sets the content template. |
| setTitle(template) | InfoTemplate | Sets the title template. |
| toJson() | Object | Converts object to its ArcGIS Server JSON representation. |
Constructor Details
Create a new PopupTemplate object.
Parameters:
< |
Required | An object that defines popup content. Field names can be used in the content by specifying the field name in curly brackets, for example {description}. View the Popup Content help topic for information on the object properties. |
< |
Optional | Optional parameters. See options list for details. |
options properties: < |
Optional | Positive or negative offset (in minutes) from UTC. If specified, date fields in the popup will be formatted in the time zone represented by the offset. Positive value indicates offset to the west of UTC, negative otherwise. If offset is not specified, date fields will be formatted in the user's local time zone. |
Sample:
require([
"esri/dijit/PopupTemplate", ...
], function(PopupTemplate, ... ) {
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 } }
],
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"
]
}
}
]
)};
...
});
Property Details
The template for defining how to format the content used in an InfoWindow.
Starting with version 2.2 the content for an InfoWindow can be defined using either a string or a function. This provides the developer the ability to easily format and customize the InfoWindow contents. Prior to 2.2, only a string could be specified. View the Format Info Window Content help topic for more details.
<Object
ObjectThe popup definition defined as a JavaScript object.
The template for defining how to format the title used in an InfoWindow. You can format the title by specifying either a string value or a function. See the content property for more details. In most cases, the title is specified as either a simple string or a function that returns a simple string. View the Format Info Window Content help topic for more details.
Method Details
Sets the content template. View the Format Info Window Content help topic for more details.
Return type:
InfoTemplateSample:
infoTemplate.setContent("State Name: ${STATE_NAME}");
Sets the title template. View the Format Info Window Content help topic for more details.
Return type:
InfoTemplateSample:
infoTemplate.setTitle("Feature Attributes");