Hide Table of Contents
Application Layouts
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. Note: the Popup class doesn't support the deferred object option for setting content. 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}, note that this syntax differs from the syntax used to define the info template for an info window.

To create a PopupTemplate, define the popup content by creating an object with the properties listed in the table below. Note: Field names can be used in the content by specifying the field name in curly brackets, for example {description}.

<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 popupTemplate = new esri.dijit.PopupTemplate({
      title: "{title}",
      description:"Photos from Flickr Public Stream{description}"
    });    
   
<Object[]> fieldInfos An array of field information. The order of the fields in the array defines how the fields will display in the popup. Field infos can contain the following properties:
<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 an enumeration from the table below:

          format:{dateFormat:'shortDateShortTime'}
        
shortDate 12/21/1997
longMonthDayYear December 21,1997
dayShortMonthYear 21 Dec 1997
longDate Sunday, December 21, 1997
shortDateShortTime 12/21/1997 6:00 PM
shortDateShortTime24 12/21/1997 18:00
longMonthYear December 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.
<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.
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

Single field

The popup template defines that the title and description for the popup will come from fields. In popups the field is defined using the {field name} syntax.

var popupTemplate = new esri.dijit.PopupTemplate({
  title: "{title}",
  description: "{description}"
});

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

template = new esri.dijit.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:

// legacy
template = new esri.dijit.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:

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