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

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

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.

List of 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.

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 into a pre-populated Text element to further enhance the 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.

Note:

Only the first ten fields will be included in a chart and x-axis labels will resize to accommodate the total number of included fields.

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

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.

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

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, change the numeric and date field formats, and reset them to their previous state.

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 pre-populated 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

  • 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 links 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 pallet 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