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, attachment images or thumbnails, a linked list of attachments, and a series of charts and images displayed in a carousel. You can split, arrange, and rotate a selection of 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.

Note:

3D tile layers and some raster types do not support pop-up configuration.

Pop-up elements

A default pop-up consists of a single column listing of fields. If the layer has attachments, an attachment 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 the bottom of 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, ArcGIS Arcade expressions, and HTML code and include a title and description.

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.

Note:

  • Custom ArcGIS fonts are not supported in pop-ups.
  • Use the keyboard shortcut Shift+Enter to establish single spacing between paragraphs.

Fields Fields

Choose the fields to display in the pop-up. By default, the list reflects the visibility of the fields in the table. Optionally, turn off the Only use visible fields and Arcade expressions option to further customize the list. If the layer has related records set, the statistics of the related numeric fields can also be included.

Change the field alias as well as the format of numeric and date fields by clicking the Format the field button.

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

Optionally, turn on HTML mode to convert the element to a prepopulated Text element to further enhance the text.

Attachments Attachment

For layers with enabled attachments, you can display images, the default file handler thumbnail for non-images, or a linked list of attachments in the pop-up. Optionally, show only images or only the single most recent image.

Alter the sort order to change the order attachments appear. By default, attachments are presented in descending order by ATTACHMENTID meaning the most recently added attachment appears first. Click an image, thumbnail, or link to open it in the default file handler.

If you display a pop-up for a feature that does not have an associated attachment, a message appears in the element indicating that no attachments were found.

Image Image

Provide an image from a URL, either local or web based and set a custom title or caption.

Optionally, turn on HTML mode to further enhance the title and caption text.

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. Hover over each field in the chart to see its value.

Note:

Only the first 10 fields will be included in a chart, and x-axis labels will resize to accommodate the maximum value of the included fields for that record.

Control the maximum axis to compare the identified values against a defined maximum. Values above the set maximum will appear capped. A negative value cannot be used. Click the Maximum button to determine the largest value of the fields currently included in the chart. This button is disabled in the following circumstances:

  • A layer does not have an attribute table.
  • Only statistics and expressions are used—Values that are calculated upon opening the pop-up cannot be determined by the Maximum button. When used in such cases, the value is set to zero.

Optionally, pick a color ramp to change the chart appearance.

Charts can have a title and a caption. Optionally, turn on HTML mode to further enhance the text.

Carousel Carousel

A container that can hold multiple attachment, 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.

Arcade Arcade Expression

An element defined by a custom Arcade expression. For example, you can format the font of an individual label or attribute in a Field element.

To get you started, a list of templates, one for each element type, is available in the drop-down menu.

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:

There are four buttons at the bottom of the Configure Pop-ups pane to control pop-ups:

  • Disable—Remove the pop-up configuration for this layer so that no pop-up appears when the feature is identified. Enable pop-ups to restore the configuration.
  • Expressions—Add a field using an ArcGIS Arcade expression to use in the pop-up. Refer to the specific Arcade profile for pop-ups to learn more about the usage, profile variables, return types, and more.
  • Formats—Format the fields in the pop-up by changing the alias or the numeric and date field formats. Changes made here are exclusive to the pop-up display and do not impact the format of the field in the table.
  • Reset—Reset the pop-up configuration to its default.

HTML mode

HTML can be directly entered to further customize most elements. Turn on the HTML mode toggle button to enter this mode.

Note:

Keep the following in mind in HTML mode:

  • Chart and Image elements only support HTML in titles and captions.
  • Field elements are converted to Text elements that are prepopulated with a table containing the current list of visible fields.

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

Keep the following in mind when working with HTML:

  • HTML tags not listed in the table above are not supported and are 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 and relative paths are not supported.
  • When an a tag is used, the href target URL always opens in a new browser tab.
  • Turning HTML mode off results in the loss of all HTML customization.

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.

Rotate a set of elements

A selected set of elements can be rotated counterclockwise 90 degrees. This converts a single row of multiple elements into multiple rows of individual elements as well as multiple rows of elements into a single row.

Note:

When converting multiple rows into a single row, a maximum of four elements is allowed.

To rotate elements, select two or more elements of the same width, or a set of elements that form an area of the same width, and click Rotate left 90° Rotate left 90° to rotate the selection.

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 menu 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.

The vertical distribution of an element can be manually adjusted. To move the edge of an element manually, hover over the upper or lower edge where a blue line appears. Click and drag this line to a new position. As the edge is moved, the line thickens at all available positions. Release the mouse to reshape the element and its applicable neighbors into the new configuration.

Note:

One element cannot overtake another. If no vertical move is possible, the blue line does not appear when hovering over an element edge. If there are multiple positions available and the destination encompasses a neighboring element, the thick blue line does not appear, indicating the move is invalid.

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 palette is available.

Remove pop-up elements

Deleting an element also updates the arrangement. Click the Remove pop-up element button Remove pop-up element to delete a single element. Alternatively, select one or more elements and click the Remove pop-up element button Remove pop-up element 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.

Related topics