Configure pop-ups

When you configure pop-ups for feature layers, you can customize the content and how the content is displayed. Pop-ups can contain custom text, a list of fields, charts, images, attachments, and a series of charts and images displayed in a carousel. You can split and arrange elements as well as apply border styling.

To configure a pop-up for a layer, right-click the layer in the Contents pane and click Configure Pop-ups Configure pop-ups to open the Configure Pop-ups pane.

Pop-up elements

A default pop-up consists of a single column listing of fields. If the layer has attachments, an image element is added. These elements do not have a visible border. Element choices are listed as buttons at the top of the pane. Click an element type to add it to your pop-up definition list. Optionally, click an element type and drag it to a specific vertical position. To switch an element to a different type, drag the element on top of the item in the list, for example, to change an image element to a text element. This way you do not have to delete an existing element and possibly modify your custom arrangement unexpectedly.

Pop-up elements support related data, hyperlinks, and ArcGIS Arcade expressions.

The following table lists the pop-up elements available:

ElementDescription

Title

Text or field values that provide the name for the pop-up. Use the Field drop-down menu to add dynamic text from the layer. The display name defined in the layer properties is used by default.

Text Text

Add custom text to the pop-up, including hyperlinks. Standard text formatting options are available. Optionally, turn on HTML mode to further enhance the text.

List of Fields Fields

Choose the fields to display in the pop-up. If the layer has related records set, the statistics of the related numeric fields can also be included.

Click and drag a selected field to change the order. Sort all fields by right-clicking the Field Alias {Field Name} header.

Chart Chart

Build vertical or horizontal bar, line, or pie charts. You can only use numeric fields for both the chart and the field used to normalize the chart.

Charts can have a title and a caption.

Image Image

Provide an image from a URL or attachment and set a custom title or caption. For attachments, you can access the name of the file from the Field drop-down menu so you can distinguish a title or caption for multiple attachments. Images sourced from an attachment do not appear when shared as a web map or feature layer.

Attachments Attachments

For layers with enabled attachments, you can display the list of attachments in the pop-up. In the Configure Pop-ups pane, check the Show list of Attachments option at the bottom. Once enabled, the pop-up lists hyperlinks that open each attachment in the default file handler. If you display a pop-up for a feature that does not have an associated attachment when the Show list of attachments option has been checked, a message appears in the pop-up indicating that no attachments were found.

Carousel Carousel

A container that can hold multiple chart or image elements. Items are displayed in top-down order. In the displayed pop-up, use the navigation arrows to browse the list. Items are viewed in the same order they are configured.

After you select an element, double-click it to edit its properties or click the Edit pop-up element button Edit Pop-up Element. Optionally, press F2 or Enter to edit the properties.

When you finish editing the properties of an element, click Back Back to return to the home page in the Configure Pop-ups pane to commit your changes. Changing the selected layer in the Contents pane also commits your changes. The next time you interact with pop-ups, the updates will be reflected.

Tip:

At the bottom of the Configure Pop-ups pane, you can disable pop-ups, customize them with ArcGIS Arcade expressions, and reset them to their previous state.

Text element HTML mode

HTML can be directly entered to further customize a Text element. Turn on the slider to enter this mode. Below is a table of the supported HTML tags and attributes you can use.

TagAttribute

a

href, style

audio

autoplay, controls, loop, muted, preload

img

src, width, height, border, alt, style

source

media, src, type

span

style

table

width, height, cellpadding, cellspacing, border, style

div

style, align

font

size, color, style

tr

height, valign, align, style

td, th

height, width, valign, align, colspan, rowspan, nowrap, style

p

style

b, strong, i, em, u, ul, ol, li, tbody, br, hr

HTML Considerations

  • HTML tags not listed in the table above are not supported and will be filtered out.
  • Allowed protocols for href and src are https, http, tel, and mailto.
  • Tags are automatically closed if not closed.
  • <>&s are escaped outside of legal tags if not escaped using &lt;&gt;&amp;&quot.
  • UNC links are not supported.
  • When an a tag is used, the href target URL always opens in a new browser tab.

Split an element

Each element you add to your pop-up configuration can be split in half either vertically or horizontally to create a unique grid in the pop-up. Select one or more elements and click Split into two horizontally stacked elements Split Horizontal to create two identical elements side-by-side in the original space.

Note:

An element cannot be divided into a width smaller than 25 percent, or one-quarter, of the row. The Split Horizontal command is also unavailable if any of the selected elements do not have enough space to complete the action.

Alternatively, click Split into two vertically stacked elements Split Vertical to duplicate the selected elements as two vertically stacked rows; any unselected elements in the original row then vertically span these two rows.

Update the arrangement of pop-up elements

The horizontal distribution for multiple elements in a single row can be redefined at any time using the arrangement drop-down menu. Click the drop-down next to the split buttons to see the distribution options when one or more elements in a single row are selected. Expand the menu to see a list of available configurations for that row. Hover over an option to see the specific width percentages. Select a different arrangement to redistribute the elements in that row to match.

Remove pop-up elements

Deleting an element also updates the arrangement. Click the Remove pop-up element button to delete a single element. Alternatively, select one or more elements and click the Remove pop-up element button next to the arrangement button to delete all selected elements. When an element is removed, the remaining arrangement expands to fill that space. Neighboring elements in the same row that are of the same height fill the missing space. Removing an element that spans multiple rows results in expansions of each impacted row. If there are no neighboring elements of the same height, an element of the same width expands from above or below.

Element borders

All elements can be further customized to include a colored border. Border thickness options range from 1 pt to 5 pt and include a No Border option. The standard color pallet is available.

Use related data

When a layer participates in a relate or relationship class, the related data can be accessed in the pop-up's upper portion where it lists the identified items. You can also use the Configure Pop-ups pane to add fields or statistical functions to the pop-up's lower section, based on the related data. For text elements in the pop-up, you can choose a field from a related table from the Fields drop-down menu. For the fields element, the related data is appended below the main list of fields. For chart elements, you can choose from the related table's numeric fields to add to your chart. Numeric field formatting for decimal places is honored by the pop-up.

Relationship classes must have a cardinality of 1:1, 1:M, or M:N to be used in a pop-up.

For 1:1 relationships, values from the related table are copied from the singular related record. For example, for a 1:1 relate between a layer named Offices and a table named Current Staff, the pop-up can display the office identifier from the first table, and the current occupant's name and hire date from the second table.

For 1:M and M:N relationships, statistical summary values are collated from the potentially multiple related records. For example, for a 1:M relate between a Land Records layer and a Previous Owners table, the pop-up can display the parcel address from the first table and the count of previous owners and maximum purchase price from the second table.

Related record statistics

If a layer has related records, statistics for the related numeric fields can also be included in the pop-up using the following steps:

  1. Right-click the layer in the Contents pane and click Configure Pop-ups Configure pop-ups.
  2. Click the Edit pop-up element button Edit Pop-up Element for a Fields element.
  3. Under the Related Records: Statistics heading, expand the arrow for the related table name from which to include statistics.

    All numeric fields from that table are listed.

  4. Check the Display box for the desired fields.

    A new row containing the applicable statistics appears below the chosen field name.

  5. Choose related statistics to add to the pop-up.
  6. Click Back Back to close Fields Options and commit your changes.

    The main page on the Configure Pop-ups pane appears. If no related statistic was chosen in Step 5, the related field is automatically unchecked when you commit your changes.

Hyperlinks

Hyperlinks can be applied to image, chart, and text elements to add additional information to pop-ups. You can then click the linked element in the pop-up window to open a web page, document, or other information.

Insert hyperlinks as text elements

Complete the following steps to add hyperlinks as text:

  1. In the Contents pane, right-click the layer with the pop-up and click Configure Pop-ups Configure pop-ups.
  2. In the Configure Pop-ups pane, click the Text element button Text to add it to the pop-up.
  3. Click the Edit button Edit Pop-up Element to edit the text element.
  4. Position the pointer at the desired link location and click the Hyperlink button Hyperlink from the list of buttons at the top of the page.
  5. For URL, provide a URL or path to the item you want to open or display when you click the image, chart, or text in the pop-up window. Do one of the following:
    • Provide a full path to the desired item, for example, \\machineName\sharedDirectory\imageName.jpg or file:///C:\Users\temp\OperationsSchedule.docx.
    • Provide a base path and get the remaining portion of the path from an attribute table field, for example, \\machineName\sharedDirectory\{Hyperlink_FieldName}. You can also use "mailto:"{EmailAddressField}.
    • Include the source URL in an attribute table field and reference the field as {FieldNameWithLinks}.
    • Use an Arcade expression that can be referenced by name as {expression/expression0}.
  6. For Description, provide the text you want displayed as a link and click Apply.
  7. Optionally, specify and format additional text.
  8. Click the Back button Back on the Text Options tab in the Configure Pop-ups pane to save your edits.

Insert hyperlinks as chart elements

Complete the following steps to add hyperlinks to charts:

  1. In the Contents pane, right-click the layer with the pop-up and click Configure Pop-ups Configure pop-ups.
  2. In the Configure Pop-ups pane, click the Chart element button Chart to add it to the pop-up.
  3. Click the Edit button Edit Pop-up Element to edit the chart element.
  4. Chart elements accept hyperlinks in the Title and Caption sections. Position the pointer at the desired location and click the Hyperlink button Hyperlink from the list of buttons at the top of the page.
  5. For URL, provide a URL or path to the item you want to open or display when you click the image, chart, or text in the pop-up window. Do one of the following:
    • Provide a full path to the desired item, for example, \\machineName\sharedDirectory\imageName.jpg or file:///C:\Users\temp\OperationsSchedule.docx.
    • Provide a base path and get the remaining portion of the path from an attribute table field, for example, \\machineName\sharedDirectory\{Hyperlink_FieldName}. You can also use "mailto:"{EmailAddressField}.
    • Include the source URL in an attribute table field and reference the field as {FieldNameWithLinks}.
    • Use an Arcade expression that can be referenced by name as {expression/expression0}.
  6. For Description, provide the text you want displayed as a link and click Apply.
  7. Optionally, specify and format additional text in the Title and Caption sections.
  8. Click the Back button Back on the Chart Options tab in the Configure Pop-ups pane to save your edits.

Insert hyperlinks as image elements

Complete the following steps to add a hyperlink to an image:

  1. In the Contents pane, right-click the layer with the pop-up and click Configure Pop-ups Configure pop-ups.
  2. In the Configure Pop-ups pane, click the Image element button Image to add it to the pop-up.
  3. Click the Edit button Edit Pop-up Element to edit the image element.
  4. Position the pointer at the desired link location—image elements accept hyperlinks in the Title and Caption sections—and click the Hyperlink button Hyperlink from the list of buttons at the top of the page.
  5. For URL, provide a URL or path to the item you want to open or display when you click the image, chart, or text in the pop-up window. Do one of the following:
    • Provide a full path to the image, for example, \\machineName\sharedDirectory\imageName.jpg or file:///C:\Users\temp\OperationsSchedule.docx.
    • Provide a base path and get the remaining portion of the path from an attribute table field, for example, \\machineName\sharedDirectory\{Hyperlink_FieldName}. You can also use "mailto:"{EmailAddressField}.
    • Include the source URL in an attribute table field and reference the field as {FieldNameWithLinks}.
    • Use an Arcade expression that can be referenced by name as {expression/expression0}.
  6. For Description, provide the text you want displayed as a link and click Apply.
  7. For Source URL, provide a URL or path to the image you want displayed in the pop-up window.
  8. For Hyperlink, provide a URL or path to the item you want displayed upon executing the link.
  9. Click the Back button Back on the Image Options tab in the Configure Pop-ups pane to save your edits.

Related topics