Crafting custom attribute displays in pop-ups

An important part of authoring good web maps is configuring pop-ups for layers. Pop-ups can be edited by opening up More Options on the layer:

Then choosing  Configure Pop-up:

There are several options to choose from when configuring the pop-up display, including choosing from and modifying a list of field attributes, choosing contents from a single field for display, and removing the attribute display altogether.

A very flexible choice that permits the combination of free text, field contents, and links is A custom attribute display. You’ll find it among the Pop-up Contents display options.

Choose A custom attribute display:

Then click Configure:

Working with Custom Attribute Display

In Custom Attribute Display you can enter a combination of free text and fields chosen from the drop down list.

For example, below we’ve added a combination of free text and fields in the pop-up configuration for a layer containing locations of high peaks in California. What appears within curly braces (brackets) are field names. When the pop-up is opened these will be replaced by the attributes for the feature.

After you’ve configured the custom display, save your changes by clicking Save Pop-Up.

Here’s how the above pop-up appears when opened:

Add more style

Other style options can be applied to field names as desired. Select the field name (including the curly braces) and apply the desired styling. Below we’ve changed the name of the peak to appear in bold blue text:

Adding links from fields

You can also use fields as text links in custom attribute displays. Use the drop down to select the field containing the link and add it to your custom attribute display. In this case we’ve chosen a field containing a link to the credits for the photo of each peak:

However when the pop-up is opened, we don’t quite get the desired result – we see the URL string displayed, but not as a link:

How do we create the link? Follow these steps:

Step 1. Select and copy the field name from the Custom Attribute Display panel

Step 2. Replace the field name with the text for the link and select it
Step 3. Click Create Link
Step 4. Paste the field name in the URL input shown below. Note that a warning – The value entered is not valid – will be displayed, which can be ignored. Click Set.

Here’s the pop-up after these changes. The text “Photo credit” is now a unique hyperlink, with the link going to the URL stored in {Photo_Credit} for each feature:

Enhancing your custom attribute display pop-ups

You can add other pop-up elements like images and charts to your custom attribute displays. We’ve completed our pop-up configuration by adding a link to a thumbnail photo of each peak, which when clicked opens a larger version of the same photo:

For more information

This post was originally published on July 25, 2013, and has been updated.

This entry was posted in ArcGIS Online and tagged , , , , . Bookmark the permalink.

Leave a Reply

10 Comments

  1. rdunfey says:

    Hi Bernie,

    As always, a great user conference! Any plans for pop ups to display Iframes? I think some work has been done with HTML5 to make them safer:

    http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/

    Running ArcGIS for portal on an internal network, it would be great to be able to do this. Especially if I could take feature attributes of the feature associated with a popup, and pass them as URL parameters in the URL used for the iframe.

    All the best,

    Rob

  2. randomblink says:

    I’m wanting the Locate widget to trigger a popup as if the user clicked the map at the location of the pop-up. Is there a simple way to do this?

    I have a ‘City Council’ layer and a ‘Locate’ widget. The goal is for the user to type in their address and quickly see what Council District they are in. (without opening FlexBuilder).

  3. alexroma says:

    Hi,
    I would like to add photos on on the pop-up from two different fields. If I do it the “normal” way juts by stacking the field names in the “Display Images” box I can accomplish it, but the resulting images get lined up in the horizontal way, so I have to click the right-arrow to move to the second image. I need to place both images simultaneously on the pop-up, so both can be seen together, one above another. Do you think it is possible? (see my post here.)

  4. seidensticker says:

    Is it possible to do mathematical operations on fields and have the popup display the results?

    For example in the custom attribute display have something like:
    Total Score is: ({SCORE_1} + {SCORE_2}).

    The popup would then display:
    Total Score is:35.

    • Bern Szukalski says:

      For custom pop-ups configurations mathematical operators are not supported. However, an alternative approach would be to open the table for that later, add a field, and use the field calculator to perform the math, then use the contents of that field in your pop-up.

  5. durshe says:

    Hi,
    Is it possible to format date in this custom attribute display for pop ups? For example; I have a date time field in my data (12/31/1950, 4:30 PM). I don’t want the time portion of the data to display; I only care about the date. What syntax should I use in order for my date to show up without the time within the custom pop up configuration. My field name is {INSTDATE} and I want to format it to shortDate. I’ve tried to format this several different ways but am not having much success.

    Thanks!
    Eugene D.

  6. lynchburggis says:

    Is there any way to add logic to a custom pop-up window? For example, we have a few apps that take in parameters in the url. We often build a hyperlink on demand when a feature is clicked.

    http://www.somecustomapp.com/?parcelId={Parcel_Id}

    Would it be possible to have logic built in to the custom bubble to check if {Parcel_ID} is null? If null, display “No link available” if populated, display hyperlink?

    We currently do this in a custom javascript application, but would love to move away from that application to AGOL MapViewer. But logic in the pop-ups is a must.

    • Bern Szukalski says:

      That’s not possible at the moment, but seems like a good enhancement request. I’d suggest posting it on ideas.arcgis.com to see if others agree and promote it.

      An alternative that might work is to always have a valid URL (in this case, with a “dummy” parcel ID that might point to a page that indicates “no information available”) and then populate with valid URLs as Parcel_IDs are available.

  7. mdhoover85 says:

    I want to load an image from a URL saved in an attribute field, however when I type in the {Picture} similar to your example for the “Create Link” I get the same warning but once the warning appears I am unable to click ” Set”. I know in previous blogs this issue came up several times. At this point is there a way to use a complete URL in an attribute field as the image in the custom attribute display?

    Thanks
    Mark

    • Bern Szukalski says:

      If I understand you correctly, the answer is no. You cannot display an image in a custom attribute display, but you can of course add links, and also use them in some creative ways as covered in the post. If you do have the link to the image, then you could combine both a custom attribute display with a an image pop-up. In otherwords, do what you need to do in the custom display, then add the image URL (likely from a field in the attributes) to the Pop-up Media section of the pop-up configuration. If I misunderstood, or this doesn’t work, just send me an email.

      Bern