Pop-up configuration files

This page describes an older version, please read about the latest version at:
http://resources.arcgis.com/en/help/flex-viewer/concepts/

The ArcGIS Viewer for Flex supports pop-up windows created either on ArcGIS.com or configured using configuration files. The pop-ups can be used for different types of layers. Starting with version 2.3, the ArcGIS Viewer for Flex supports pop-ups windows for tiled and dynamic map services, as well as feature layers. This pop-up functionality is built-in to the API, it is not a separate widget.

Note: this replaces the functionality of the SimpleInfoWin and InfoPopup widget which are being deprecated.

Examples

Example 1: Pop-up for feature layer using a free-flow description with HTML and multiple fields.

Screenshot of a pop-up window with hurricane information
The pop-up configuration file.
<?xml version="1.0" ?>
<configuration>
    <title>{NAME}</title>
    <description>
        <![CDATA[<b>Hurricane {NAME}</b> was a <i>category {CAT}</i> hurricane that occurred in {BASIN} on {TRACK_DATE}. It had a wind speed of {WIND_KTS} knots.]]>
    </description>
    <fields>
        <field name="NAME"/>
        <field name="WIND_KTS"/>
        <field name="CAT"/>
        <field name="BASIN"/>
        <field name="TRACK_DATE">
            <format dateformat="shortDateShortTime"/>
        </field>
    </fields>
</configuration>

<!--
    Pop-up configuration file for:
    http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hurricanes/NOAA_Tracks_1851_2007/MapServer/0
-->
The main configuration file:
<layer label="Hurricanes" type="feature" visible="false" alpha="1.0"
    popupconfig="popups/PopUp_Hurricanes.xml"
    definitionexpression="NAME &lt;&gt; 'NOTNAMED' AND CAT IN ('H1','H2','H3')"
    url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hurricanes/NOAA_Tracks_1851_2007/MapServer/0"/>

Example #2: Pop-up window for a sub-layer in a dynamic map service, using default key-value table and multiple charts.

Screenshot of a pop-up window with demographic information and charts
The pop-up configuration file:
<?xml version="1.0" ?>
<configuration>
    <title>{NAME}</title>
    <fields>
        <field name="NAME"/> <!-- Used in title, do not repeat in content -->
        <field name="TOTPOP_CY" alias="Population" visible="true"/>  <!-- Overwrite alias specified in Map Service -->
        <field name="MEDHINC_CY_12" alias="Household Income, Median ($)" visible="true"/>
        ...
        <field name="OWNER_CY_12" alias="Owner Occupied"/>
        <field name="RENTER_CY_12" alias="Renter Occupied"/>
    </fields>
    <medias>
        ....
        <media type="barchart" title="Owners vs Renters" chartfields="OWNER_CY_12,RENTER_CY_12"/>
        ...
    </medias>
</configuration>

<!--
    Pop-up configuration file for:
    http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Household_Income/MapServer/4
-->
The main configuration file:
<layer label="Demographics" type="tiled" visible="false" alpha="0.5"
    url="http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Household_Income/MapServer">
    <sublayer id="1" popupconfig="popups/PopUp_Demographics_BlockGroups.xml"/>
    <sublayer id="2" popupconfig="popups/PopUp_Demographics_Tracts.xml"/>
    <sublayer id="3" popupconfig="popups/PopUp_Demographics_Counties.xml"/>
    <sublayer id="4" popupconfig="popups/PopUp_Demographics_States.xml"/>
</layer>

Example #3: Pop-up with images (QueryWidget):

Screenshot of pop-up with image.

Configuration files for pop-up windows

Use either <description> or <fields> for the main content. To format dates and numbers, you can use the <format> for specific fields and it will apply to the main content. The <medias> and <showattachment> will display below the main content.

<title>
The title to use for the pop-up window. If specified, a title (in bold) and an horizontal line will show above the main content.
<description>
By default the pop-up window shows the visible fields in a key-value styled table. Alternatively, you can use the <description> tag to present it in a different manner, for example in a sentence or paragraph structure:
<description>
    <![CDATA[<b>Hurricane {NAME}</b> was a <i>category {CAT}</i> hurricane that occurred in {BASIN} on {TRACK_DATE}. It had a wind speed of {WIND_KTS} knots.]]>
 </description>
The description supports field substitution using a {FIELD} style syntax. The description will show below the title and above any media and/or attachments. Basic Flash Player HTML is supported:
  • Anchor tag (<a>)
  • Bold tag (<b>)
  • Break tag (<br>)
  • Font tag (<font>)
  • Image tag (<img>)
  • Italic tag (<i>)
  • List item tag (<li>)
  • Paragraph tag (<p>)
  • Text format tag (<textformat>)
  • Underline tag (<u>)
<fields>
Container for which fields to use when <description> has not been specified. It has the following child tags:
  • <field> - which fields to display (or not) and how to label and format them. See API Reference for more details. This tag has the following attributes and child tags.
    • name - Name of the field to use. Required. Case-sensitive.
    • alias - Alias to display instead of the "name". Optional.
    • visible - Boolean. Default value is false. Optional.
    • and the following optional child tag:

      <format> - how to format dates and numbers. See API Reference for more details. This tag has the following attributes:

      • dateformat - Can be set to either one of the constants below or a DateFormatter formatString like YYYY-MM-DD. Optional. The default is "shortDateShortTime".
        • "dayShortMonthYear" - for example, "21 Dec 1997"
        • "longDate" - for example, "Sunday, December 21, 1997"
        • "longMonthDayYear" - for example, "December 21, 1997"
        • "longMonthYear" - for example, "December 1997"
        • "shortDate" - for example, "12/21/1997"
        • "shortDateShortTime" - for example, "12/21/1997 6:00 PM". This is the default.
        • "shortDateShortTime24" - for example, "12/21/1997 18:00"
        • "shortMonthYear" - for example, "Dec 1997"
        • "year" - for example, "1997"
      • precision - Number of decimal places to show. You can disable precision by setting it to -1, which is the default. Optional.
      • usethousandsseparator - Boolean. Whether numbers should have a thousands separator. Default is "true". Optional.

<fields>
     <field name="TOTPOP_CY"  alias="Population" visible="true"/>  <!-- Overwrite alias specified in Map Service -->
     <field name="MEDHINC_CY" alias="Household Income, Median ($)" visible="true"/>
     <field name="TRACK_DATE">
        <format dateformat="shortDateShortTime"/>
    </field>
</fields>
<medias>
Container for charts and images. It has the following child tags:
  • <media> - which charts and images to display and how to display them. See API Reference for more details. This tag has the following attributes and child tags.
    • title - Title of this media. Optional. Templated similar to <description> above. Example 1: title="My Media". Example 2: title="{MEDIATITLE}". Example 3: title="Chart of {NAME}".
    • caption - Caption of this media. Optional. Templated like title above.
    • type - Type of chart or image to use for this media. The suppored values include columnchart, piechart, barchart, linechart and image. For charts, set "chartfields". For images, set "imagesource" and optionally "imagelink".
    • chartfields - The field names to display in the chart. Required for all charts.
    • imagelink - The link to open when the image is clicked. Only applies when type is "image". Optional.
    • imagesource - Field or URL of the image to display. Required when type is "image".
<medias>
    <media type="columnchart"
           title="Households by income"
           chartfields="HINC0_CY_12,HINC10_CY_12,HINC15_CY_12,HINC20_CY_12,HINC25_CY_12,HINC30_CY_12,HINC35_CY_12"/>
    <media type="barchart"
           title="Owners vs Renters"
           chartfields="OWNER_CY_12,RENTER_CY_12"/>
    <media type="piechart"
           title="Population by race"
           chartfields="WHITE_CY_12,BLACK_CY_12,AMERIND_CY_12,ASIAN_CY_12,PACIFIC_CY_12,HISPPOP_CY_12,OTHRACE_CY_12"/>
    <media type="linechart"
           title="Population by age"
           chartfields="POPU5_CY_12,POP5_CY_12,POP10_CY_12,POP15_CY_12,POP20_CY_12,POP25_CY_12,POP30_CY_12,POP35_CY_12"/>
</medias>
<showattachments>
Indicates whether to show the attachments in the pop-up or not. Boolean. The default is "false".
Copyright © 1995-2012 Esri. All rights reserved.
2/15/2012