Hide Table of Contents
Format Popup Content

Define popup content

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.

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.
<Boolean> isEditable Specify that the field is editable, only applicable for feature service data.
<String> tooltip Define a tooltip for editable popup fields.
<String> stringFieldOption For editable popups define 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
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.

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"
    }
  }]
});