Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: PopupTemplate

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
These components are organized in a layout that is identical to the popup experience in ArcGIS.com

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

NameSummary
new PopupTemplate(popupInfo, options?)Create a new PopupTemplate object.

CSS

esri/dijit/PopupTemplate | Download source

Properties

NameTypeSummary
contentString | FunctionThe template for defining how to format the content used in an InfoWindow.
infoObjectThe popup definition defined as a JavaScript object.
titleString | FunctionThe template for defining how to format the title used in an InfoWindow.

Methods

NameReturn typeSummary
setContent(template)InfoTemplateSets the content template.
setTitle(template)InfoTemplateSets the title template.
toJson()ObjectConverts object to its ArcGIS Server JSON representation.
Constructor Details

new PopupTemplate(popupInfo, options?)

Create a new PopupTemplate object.
Parameters:
<Object> popupInfo 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.
<Object> options Optional Optional parameters. See options list for details.
options properties:
<Number> utcOffset 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

<String | Function> content

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> info

The popup definition defined as a JavaScript object.

<String | Function> title

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

setContent(template)

Sets the content template. View the Format Info Window Content help topic for more details.
Return type: InfoTemplate
Parameters:
<String | Function> template Required The template for the content.
Sample:
infoTemplate.setContent("State Name: ${STATE_NAME}");

setTitle(template)

Sets the title template. View the Format Info Window Content help topic for more details.
Return type: InfoTemplate
Parameters:
<String | Function> template Required The template for the title.
Sample:

infoTemplate.setTitle("Feature Attributes");

toJson()

Converts object to its ArcGIS Server JSON representation.
Return type: Object
Show Modal