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

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

    • khillstrom says:

      There are Attribute Expressions that should allow you to do just that. Now if they could only allow more control of charts.

      • Bern Szukalski says:

        You can do some clever things using Arcade that emulate charts, will try to do a blog post on this very soon. Charts are part of the forward-looking dev plans for 2018, not sure when these may appear yet.

  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

  8. michael2323 says:

    Is there a way to change the size of the pop-window frame? For example, if I want to avoid excessive word-wrap, I could make the window size 500px wide instead of the default.

    Thanks,
    Michael

    • fgoehner says:

      Were you able to figure this out?

      • psteen14 says:

        Could Bern Szukalski comment on this? I would also like a bigger pop-up real estate. You can maximize the pop-up in the map viewer, but not in a story map.

        • mlamb_usfs says:

          I’m interested in this question as well. My interest is for a popup in the main stage of a map journal and I want the popup window to automatically display as a large window.

          • Bern Szukalski says:

            While you can persist an open pop-up in the Story Map Journal builder, you can’t automatically have it open maximized. I’m not quite sure that would get you want you want anyway… If there are links in your pop-ups to, say, larger images those will still work. If you can give me an idea of what exactly necessitates the maximized pop-up, I might be able to suggest an alternative approach.

        • Bern Szukalski says:

          There isn’t a way to increase the size of the web map pop-up when you’ve embedded it in your Map Journal. An alternative approach might be to configure an app that enables more real estate for the pop-up contents, then embed that app in your Story Map Journal. For example, the Basic View offers a configuration where the pop-up contents display in the side panel, and that might provide the additional real estate you are after. There are other downsides to using the basic viewer though… But I’ll consider some other options as well.

          • Ian Wittenmyer says:

            Another option would be to embed the minimalist in map journal. this supports pop-up in the side panel, also has an option to disable mouse scrolling if you wanted to avoid zooming the map as users scroll through the story. both of these can been enabled on the options panel when configuring the minimalist app. Here is a simple example. The side panel also has the option to be open when the app loads.

  9. mtrust says:

    Is it possible to change the color of attribute values based on a condition? For example, if a value representing population change is positive display it in green; if a value in the same field (e.g. POP_CHANGE) is negative, display it in pink.

    • Bern Szukalski says:

      There really isn’t a way to make a conditional color change in the pop-up, but it’s an interesting enhancement request that has been sent on to the team doing the pop-up redesign work.

  10. NB says:

    Is there a way to display a link only IF a certain value is present in one of the attributes?

    For example I am working with cemetery data and if a plot is vacant I want to add the link to a purchase a plot form. If the plot is occupied I don’t want this link to show!

  11. random_kiwi says:

    Is it possible to configure what will show in the pop up within ArcGIS desktop? (10.3?) I’m publishing a web map service on a regular basis and would be great to be able to set these attributes in the MXD file rather than manually configuring every time I republish.

  12. jngreen516 says:

    Is it possible to use the styling of the stock pop-ups? For my parcel layer, I simply want to add a $ sign before any monetary values, but would like the style of this pop-up to match all the others.

    I see the ‘View HTML Source’ but I am not well-versed in HTML and CSS enough to craft it.

    • Bern Szukalski says:

      I am not sure what you mean by “stock pop-ups” and suspect you’re interested in ArcGIS Desktop capabilities… But in the web map you can use the custom attribute display and simply add “$” in front of the attribute (which is what is in the curly braces). For example, if the attribute is {dollars} to format it the way you like you just enter: ${dollars}

  13. Philip Attisano says:

    Running arcgis online webapp. I want to create a custom attribute review/edit popup that has a couple of selects that will be conditionally populated with attribute data of other features in very close proximity. Is this possible, and if so, can some code examples be provided?

  14. jhitchcoo says:

    First of all, I’m a novice user. I have been trying to get my attributes to show in the pop-up window for points added using add data X-Y in ArcGIS Pro. I have successfully created the table and points on the map. The three columns of the .xls file have a header in Row 1. The are titled Longitude, Latitude, and Nitrogen. X-Y data entered in the Long and Lat columns is decimal degrees. Long is negative. All works good, 69 points created on the map, each in the right location. When I click on a point and the pop-up is displayed, the content has three rows but the attribute numbers do note display. For the Longitude row in the pop-up, the word “Longitude” is displayed rather than the decimal degrees in the table. Same for the other two rows in the pop-up. Latitude row displays the word “Latitude”, and the Nitrogen row displays the word “Nitrogen”. When I view the attribute table, all looks good, the header row is right. all decimal data looks good in the 69 rows and 3 columns. What am I missing or doing wrong? I also added X-Y data using a file saved as CSV…same result.

  15. kwalispecial says:

    Is there a way to show an attachment in the pop-up, rather than an image from a url link?

    I am trying to set up a map that will function as a travel log. I want to use collector to add points with attached images, and use a text field for the captions. At first I was thinking Snap2Map, but it appears that the tool is a one shot deal – in other words, it doesn’t seem like you can keep adding new pictures/points on an ongoing basis after you set up the initial map (unless I am missing something). So I am hoping to make a story map in advance, tied to an editable feature service where I can add points throughout the trip. Then I want to use an embedded map or web app configured to show the points on the map, with either a pop-up or a side panel configured to show the text caption for the attribute field and an image stored as an attachment.

    Doable?

    Thanks!

    • Bern Szukalski says:

      Doable? Anything is doable. But what is important is what is practical.

      Web maps in Story Maps can have dynamic layers that will be updated as the story map is opened or refreshed, or can be refreshed at specific intervals using the refresh properties on the layer in the web map used in the story map.

      I agree that Snap2Map is not your solution; once a session is complete you cannot go back and add to features collected using the app. Collector, Survey123, and other editing applications offer a dynamic way to update feature layers that are in a web map in your story maps. If so, then the story map will display the latest updates when opened/refreshed, or as the layer refresh interval is executed in the web map layer itself.

      Basic Viewer, for one, offers an option to display pop-up content from the map in the side panel, so you could think to embed a Basic Viewer app in a story map to achieve the desired result. However embedding is often best thought of as seasoning on a good steak — less is often more.

      Displaying the pop-up content in the side panel of a story map series, story map journal, or similar, will require downloading the source code, making the necessary modifications to the source (likely non-trivial), and hosting the app yourself.

      At some level it might be easier to build a custom app using the JS API.

      All this said, it’s a game of compromises. To achieve EXACTLY what you want is always possible, but may be challenging and difficult to maintain over the long run if custom apps are what you use. I’d recommend the compromise approach – use a hosted app, live with the compromise delta between your ideal custom app and an off-the-shelf hosted app, and I think you will be happier in the long run. Just my opinion…

  16. ssmithgct says:

    Is it possible to override the hyperlink target=”_blank” command to target=”_parent” in the customized pop-up window? I have tried deleting the target command and replacing it with _parent, but it does not stop the link from opening in a new tab or window instead of the parent screen.

  17. sheilabr@usc.edu says:

    Hi
    I’m trying to add links using the custom attribute display panel and I don’t know what I’ve done wrong, but the links all take me here:

    https://www.arcgis.com/home/webmap/www.thesovereigndc.com

    They show up as the link in the pop-up, but for some reason are not actually going to the link, but to acgis.com with the website I want to link at the end of the url. I’m using a .csv file. I hope this makes sense.

    Sheila

  18. dpwh_martinezrb says:

    Hi Bern,
    I have 5 polygons (five floor plans of our Central Office) published as Map service from our Production server. After adding the service in an ArcGIS Online Web Map, I’m able to “Configure Pop-up” the 1st/ground floor. But for the 2nd to 5th floors, the “Configure Pop-up” NO LONGER RESPONDS :(

    We tried to Publish the 5 polygons from a File Geodatabase in ArcMap (v10.4.1) to our Development server and after clicking the Analyze button, it gives a HIGH Severity warnings of “Data source is not registered with the server and data will be copied to the server”.

    The workaround I do is to “Mark” these warnings as “Exceptions” and Publish these to the Development server. And adding this service to an ArcGIS Online Web Map, I’m able to “Configure Pop-up” for ALL the floor plan polygons succesfully.

    We wanted this map service to come from Production as this can be viewed publicly via the Internet while the development-based service is viewable only within our organization’s Intranet. By the way, we are using SQL Server for our backend.

    Any ideas? What seems to be the problem with the map service coming from the Production server?

    Thanks in advance,
    Bobby

    • Bern Szukalski says:

      I’m not quite understanding how you’ve configured your services. I assume you have either stacked/overlapping features, or stacked layers, which represent the multiple floors you want to handle. If all in one layer, than pop-ups would be configured across all floors. If in individual layers, then you’d need to configure the pop-up for each layer.

      This might not be the best forum for this type of question, so you can also take this on up to support.esri.com, or place a post out on GeoNet as well.

      • dpwh_martinezrb says:

        Thanks for responding. Just to clarify, the polygons come from individual layers and I’m able to “Configure Pop-up” only the 1st layer; the “Configure Pop-up” doesn’t respond at all when configuring the other layers when it’s coming from the Production server. But when coming from the Development server the “Configure Pop-up” works for ALL layers.

        Could it be the configuration between servers? Just a thought.

        • Bern Szukalski says:

          I am not sure…. But if that’s your suspicions, the answer is beyond what’s capable via comments on this blog post. I’d suggest just logging a support incident to get to the bottom of it. Or try GeoNet. In either case, being able to look at your app would be really helpful in understanding how you’ve implemented it, and what might be going on.

          • dpwh_martinezrb says:

            After seeing this link at GeoNet, https://geonet.esri.com/thread/185328-i-cant-seem-to-configure-my-popup-for-a-certain-layer, I decided to simplify the concerned Floor plan polygon layers with just a few key attributes by creating an empty feature class templates for each floors in a File geodatabase and loaded these with only reselected data from the original ones.

            I exported them back to SDE on the production server; then added them into ArcMap from SDE to publish as a map service on the same production server. After adding the layer on ArcGIS Online, I was able to “Configure Pop-up” all the floor plan polygons successfully.

  19. draney21 says:

    Is it possible to configure a custom popup to contain links which when clicked populate the popup with different fields from the attribute table? I currently have a FC loaded multiple times in the mxd with desired fields turned on. What I would like to do is load once with all fields on and create custom popup that will produce desired fields only based on a link in popup.

    • Bern Szukalski says:

      If I’m understanding your question, the short answer is “no.” Pop-ups are not dynamic, meaning that you can’t trigger a pop-up to display differently based on a link in the original pop-up. There’s lots of clever things you can do using the Custom attribute display, but there’s only one pop-up configured for all features, so whatever magic you plan to do has to be visible in the original attribute display within the pop-up.

  20. dinah.oliver_vdot says:

    Hi! Is there a way to choose a custom pop up field from a related table for the feature service? Or to put code (such as choose more current date from related table)?

    Thanks!
    dinah

    • Bern Szukalski says:

      As of the last release (Dec 2016) if the layer has a related table you can configure fields from the related table in your layer pop-ups. If the relationship is 1 to 1, the related field contents can be displayed directly. If it’s a 1 to M relationship, then summaries can be applied to the related field values for display in the pop-up.

  21. jantoun_uscssi says:

    Is there any way to display related table values (with a one to many relationship) in a pop-up. Currently one can only configure statistics or count and I need to display the actual values from a related table.

    • jantoun_uscssi says:

      Displaying the summaries has no value in a one to many relationship – I need to display the actual values.

      • jantoun_uscssi says:

        ArcGIS Online popup configuration. It would be so valuable if there could be a way to display related table information from a 1:M relationship within an actual popup. I do not want another click to view additional records. Displaying summary count information is not useful or practical for many purposes.

        I am creating a property application using the ArcGIS for JavaScript API and I need to access related table information (from a 1:M relationship) in a popup of an ArcGIS Online web map that I use with the API. I need to display all the related table information but can only display the count. It would be great if we could display the actual values.

        Thank you

  22. ibrahimd13 says:

    Hi,
    I am giving a URL including with a field name i.e.,Longitude (link: http://www.naveenwater.com/Long={LONG}), it has 10 digits after the decimal point. But I want to reduce to 5 digits after decimal point.
    Is it possible reduce the digits after the decimal point?
    ex: LONG = 144.3232323232 to reduce to LONG = 144.32323

    Thanks & Regards,
    Naveen