Show Attachments in Pop-ups with Arcade Expressions

47414
81
03-22-2019 09:44 AM
JenniferBell
Esri Contributor
21 81 47.4K

In ArcGIS Online, you can store images as attachments with feature layers. By default, the attachment is shown in the pop-up as a hyperlink. With just a few lines of Arcade Expressions, you can configure the pop-up to display the actual image without requiring your viewers to click on the link.

With the March 2019 release of ArcGIS Online, you can now upload geotagged photos to create a point feature layer of each image's location. This blog will outline the process to create the layer and display your geotagged photos in the pop-up. Here is a video showing how to add photos and edit the pop-up (step-by-step instructions are found below):

After uploading your images, the pop-up includes a hyperlink that looks something like this:

This image shows the default pop-up with a hyperlink to the image attachment.

This pop-up configuration workflow will result in the photo displaying in a pop-up like the image below:

This image shows a custom pop-up with a photo of pink flowers found on the trail.

To achieve this workflow, there are two steps to the process:

  1. Calculate the attachment ID for each feature
  2. Configure the pop-up to display the attachment URL as an image

Steps to view attachments as photos in your web map pop-up:

Part 1:  Calculate the attachment ID   

Note: Sometimes this is not required if the attachment IDs match the feature IDs. There are some cases where these may match, but in most cases these IDs will be different if the data is edited after publishing or in cases where attachments are added after publication (like inspection data when using Collector). 

1. Upload your geotagged images to ArcGIS Online as a feature layer. Click here to download a sample zipped folder of images.

2. Make sure your layer is shared with the public.

3. Open the layer in a web map and save the web map.

3. Open the layer table and add a CountAttachments field and calculate it with the Arcade Expression:
      Count(Attachments($feature))

4. Filter the layer to show:

      CountAttachments is greater than 0
5. Add a new field called AttachID and calculate it with the Arcade Expression: 
      First(Attachments($feature)).ID
6. Remove the filter.

Part 2:  Create the Pop-up   

1. Click on a point in the map to view the pop-up, and open the hyperlink.

2. Return to the previous tab that shows your web map. Select More Options (the three dots under your layer name in the Content tab), then click Configure Pop-up.

3. Under Attribute Expressions, click the ADD button. 

4. In the Expression builder window, fill in the following logic seen below with the text from your hyperlink URL. The Arcade Expression builds an on-the-fly image URL for each record in your layer using the unique Object ID and attachment ID (calculated in Part 1). 

Note: This is an example of what an image attachment URL looks like: https://services.arcgis.com/jIL9msH9OI208GCb/arcgis/rest/services/JoshuaTreeHike/FeatureServer/0/7/attachments/7. The first 7 in red is the Object ID and the second 7 in blue is the attachment ID

      var Part1 =       "https://services.arcgis.com/5uh3wwYLNzBuU0Eu/arcgis/rest/services/JoshuaTreeHike/FeatureServer/0/"
      var ObjectID = $feature.OBJECTID
      var Part2 = "/attachments/"
      var AttachID = $feature.AttachID
      When($feature.CountAttachments > 0, Part1 + ObjectID + Part2 + AttachID, null)

5. Under Pop-up Media, click ADD then choose Image. Edit or remove the title and caption. Under URL, click on the plus sign and select your Arcade Expression. After you add it, it will look something like {expression/expr0}. Additionally, you can edit the pop-up title and additional pop-up content. You can also uncheck the "Show feature attachments as links". 

Click here to view a web map example of this in action.

This image shows a web map with a custom pop-up displaying a photo of pink flowers found on the trail.

This is a similar workflow to the popular tool and blog written by Jake Skinner‌.

This workflow will get you up and running to display images in URLs in most places but does have some limitations to be aware of:

  • Calculate field is not dynamic. When new features are added, you will need to re-run the field calculation in Part 1.
  • The field calculation only takes the first attachment listed, so displaying multiple images in a single pop-up isn't supported through this workflow.
  • The layer needs to be public to access attachments.

We are sharing this workflow to help you display your images in pop-ups as quickly as possible with Arcade, but want you to know that there is more to come. In future releases, we are working to make it easier to display attachments as images. You can see a sneak preview of this work in the 4X JS API. Check out the pop-ups in the Media Map template to see this implementation in a configurable app where it isn't required to do additional configuration to display these images.

Stay tuned for more updates and share and discuss your examples and improvements to this code.

81 Comments
JenniferBell
Esri Contributor

Thanks for your comment. The new Map Viewer Beta will not be in Portal until we move out of beta. Until then, if you would like to add the image in a specific location (e.g., above your pop-up text), you can click the green Configure button and add an image through the Custom Attribute Display window. 

JenniferBell
Esri Contributor

Thanks for your comment. The new Map Viewer Beta will not be in Portal until we move out of beta. Until then, if you would like to add the image in a specific location (e.g., above your pop-up text), you can click the green Configure button and add an image through the Custom Attribute Display window. 

KateCarlson
Occasional Contributor

Hi Jennifer-  Thanks for that tip.  I am able to add the image to the top, but do you know if there is a way to constrain the image size or would you recommend creating thumbnails?  

Kate

AndrewGasser
New Contributor

Thank you for posting this.  I was able to make it work for my attachments (photos) and popups.  However, I have features that have multiple attachments and I want to be able to show all of them on a popup.  Is this possible?    

ThomasIngold
New Contributor II

Hi

I was wondering if something similar is possible with audio attachments. I created a survey which included a file upload question for .wav audio files. In the data tab of Survey123 I can directly start the audio files without opening an url in a new tab:

Is there a way to do something similar in a pop-up? In the end the aim is to provide a storymap where someone could directly listen to all the audio files without opening a new tab.

Thanks

JenniferBell1
Occasional Contributor

Hi Andrew, check out the Map Viewer Beta. Here, you can view all attachments in your pop-up without writing any arcade expression. You can also choose to view attachments as lists. Here's a helpful blog about it: Fast, flexible and fun: The new pop-up experience in the next generation Map Viewer Beta 

JenniferBell1
Occasional Contributor

Hi Thomas, will your data update regularly? If not, the easiest way to do this is to add a field and hard-code an iframe. You will use arcade to create a unique iframe for each row. If you add this in your pop-up, it will automatically play when you click the pop-up. However, I have not figured out how to make this work in 4x (the new map viewer beta). To address this, create the popup and map in the current map viewer (3x), add it to a 3x app like Minimalist and embed the Minimalist app in StoryMaps (4x). Here is a layer, map, app, and story that I created to test this.

Create a field for CountAttachments and AttachID (instructions in blog above). Then create a field called url and use arcade to fill in everything below. Note: your Part 1 variable is the only thing that will be different. Click on your audio file to view the url that you will fill in here. 

var iframe1 = "<iframe width='xxx' height='xxx' src= "
var Part1 = "https://services1.arcgis.com/4yjifSiIG17X0gW4/arcgis/rest/services/TestAudioFile/FeatureServer/0/"
var ObjectID = $feature.OBJECTID
var Part2 = "/attachments/"
var AttachID = $feature.AttachID
var iframe2 = " frameborder='0' allowfullscreen></iframe>"
When($feature.CountAttachments > 0, iframe1 + Part1 + ObjectID + Part2 + AttachID + iframe2, null)


Then go to the pop-up and choose the url field. 

I first tried to add this as an arcade expression in the pop-up (instead of hard-coding it in), but it just shows the iframe text in the final pop-up instead of embedding the audio player. This is the best workaround I could come up with so I'm interested if this works for you and if you discover an alternative method.


Best of luck! 

ThomasIngold
New Contributor II

Hi Jennifer

That really helped and worked! Thanks a lot. The data should not be updated regularly. So this should work.

One last question. I'm not really good at using arcade..: How would that work if I have multiple attachments? In my example I have two file upload questions in my survey. 

Thanks again!

JenniferBell
Esri Contributor

Glad to hear that it worked for you. Are the other attachments images? If so, you could view the images in the pop-up as well. Check out the new map viewer beta if you haven't already. It automatically shows all image attachments in the pop-up (no arcade needed); you can also show all image attachments as lists. 

ThomasIngold
New Contributor II

No the attachments are all audio files (in my example just two .wav files)

JenniferBell
Esri Contributor

That's an interesting use case. For this next suggestion, you can disregard creating a field for attachID and field for number of attachments.

Instead, in your url field, you can use this expression that evaluates the number of attachments per row. If there are no attachments, no url will be created, if there is only 1 attachment only 1 iframe will be created, and if there are 2 attachments then two iframes will be created (using AttachID+1).

var iframe1 = "<iframe width='xxx' height='xxx' src= "
var Part1 = "https://services1.arcgis.com/4yjifSiIG17X0gW4/arcgis/rest/services/TestAudioFile/FeatureServer/0/"
var ObjectID = $feature.OBJECTID
var Part2 = "/attachments/"
var AttachID = First(Attachments($feature)).ID
var iframe2 = " frameborder='0' allowfullscreen></iframe>"
var iframeFinal = iframe1 + Part1 + ObjectID + Part2 + AttachID + iframe2
When(Count(Attachments($feature)) == 1, iframeFinal,
Count(Attachments($feature)) == 2, iframeFinal + iframe1 + Part1 + ObjectID + Part2 + (AttachID+1) + iframe2,
null)

The trick is to figure out how to disable autoplay if there are two audio files in the pop-up. I opened the story in incognito mode and the audio files do not autoplay. However, when I view the story not in incognito mode, they autoplay. When there are two audio files in the pop-up it's not ideal that they play at the same time. Please let me know if you figure out a solution to this. Thanks!

ThomasIngold
New Contributor II

Hi Jennifer 

Thanks a lot for the answer. This looks like the final solution. I just get the error "Cannot read property 'length' of null. Any ideas what went wrong?

Your example is perfectly fine for me. The two audiofiles don't start at the same time in my browser. i can start them manually.

JenniferBell
Esri Contributor

Hello, were you able to figure out what was causing the property length of null error? If not, please feel free to send me the arcade expression you are using and the layer if it is shared publicly. Thanks!

AdamBourque
New Contributor III

Hey Jennifer, so I am also using Survey123 to get images to web feature layer. The attachments are popping up as URL's but I am unable to use this Arcade expression method because I am using sync for offline use. You say the new map viewer allows attachments to be shown instead of URL now? Will this be the norm for viewing AGOL map? In other words should I even mess with all this? 

I was just hoping for an easy toggle or code option to embedded the picture in pop-up without doing all these loops (that which in my case did not work unfortunately) when viewing webmap on ArcGIS Online. 

Thank you!

JenniferBell1
Occasional Contributor

Hi Adam, the new map viewer will show the attachment as an image in the pop-up. No need to do all this! If you have more than one attachment, you can choose to show the images as a list if you like. 

JenniferBell1
Occasional Contributor

Here's a blog about pop-ups in the new map viewer.

ThomasIngold
New Contributor II

Hi Jennifer

No it did not work yet. I used the following code in the url field calculation:

var iframe1 = "<iframe width='xxx' height='xxx' src= "
var Part1 = "https://services4.arcgis.com/9hSTcaT2vUglUGs4/arcgis/rest/services/survey123_0686e2102af34b6884d852c... "
var ObjectID = $feature.OBJECTID
var Part2 = "/attachments/"
var AttachID = First(Attachments($feature)).ID
var iframe2 = " frameborder='0' allowfullscreen></iframe>"
var iframeFinal = iframe1 + Part1 + ObjectID + Part2 + AttachID + iframe2
When(Count(Attachments($feature)) == 1, iframeFinal,
Count(Attachments($feature)) == 2, iframeFinal + iframe1 + Part1 + ObjectID + Part2 + (AttachID+1) + iframe2,
null)

This is the layer: https://www.arcgis.com/home/item.html?id=6d992fbebaaf4efa8d56771c2fa9be25 

JenniferBell1
Occasional Contributor

I opened the table of a test feature layer and added a new field, selected Arcade, then pasted the expression you shared, and it successfully calculated for me so your expression is correct. I'm wondering if it has something to do with the attachment. Can you share a screenshot of the error and describe the steps before when you receive it? If it is easier to jump on a call to share your screen, please feel free to email me. 

MarcelArendt1
New Contributor

Hi, 

I followed your steps and it worked really good.

Now i wondering whether it is possible to move the image to the top and the text under the image.

In my Pop Up it always shows the Text I added on top and than the image. And I would like to switch these.

Thx

Marcel 

JenniferBell
Esri Contributor

Hi Marcel, glad it worked for you! You can now move images above the text in the new Map Viewer Beta with a simple drag and drop. Here's a blog where Paul Barker shares the new pop-up enhancements.

HannahWilson
New Contributor

Hi Jennifer, 

Thank you very much for publishing this post and video. It has been extremely helpful to me. I need to be able to label each of my images within the pop up. Right now no text is showing up since we removed that option when configuring the pop up. Is there a way for me to have custom text per image? I have looked for a way to do that and have been unsuccessful. 

Thanks, 

Hannah

DylanTrerise_EsriCanada
Esri Contributor

Thanks so much for this!

I tested this without geotagged photos and it seemed to work fine, just for reference.

JenniferBell
Esri Contributor

Hi Hannah, thanks for your patience with my response. Did you ever get the labels figured out? One possible solution could be to add pop-up text and additional info by double-clicking on the image in the Pop-up media section. Here you can add text that will be consistent for every pop-up or you can click on the plus sign to specify a field in the layer. Please let me know if I misunderstood your question.

JenniferBell
Esri Contributor

I hadn't tried that yet so that's great to hear. Thanks for the feedback, Dylan! 

DavidMurray_ODWC
New Contributor III

Reading your comment was a "Eureka!" moment for me. 

The 'Token' message had been driving me up a wall for days. 

Thank you very much for posting.  It all works now.  

It found the right photo!  Ha-HA!!

MonikaSamorajska
New Contributor II

Hi @JenniferBell,

Thank you for this post.

 

I am straggling to make it work, and thouht you can advise me.

I have a feature service in AGOL which I call from Portal. It is a point feature service with attached pictures. This service is used in Collector for collecting the pictures.The tracking option as well as the sync option are enabled, as I need those informatiom.

I would like to display pictures in a pop up, but I Object ID is different than AttachementID.

I was trying to use below code:

var Part1 = "https://utility.arcgis.com/usrsvcs/servers/d152d6cb4e074404a43b350d57eaf183/rest/services/MMA_WBHE/WBHE_SITE_Pictures_Collector/FeatureServer/0/"
var ObjectID = $feature.objectid
var Part2 = "/attachments/"
var AttachID = First(Attachments($feature)).ID

return Part1 + ObjectID + Count(Attachments($feature)) + Part2 + AttachedID

 

But receiving th error message:

MonikaSamorajska_0-1607426435249.png

Is there a way that I can keep the tracking and sync enale and still make this work?

Thank for your help!

 

AprilChipman
Occasional Contributor III

Before I delve too much more deeply into this, can someone tell me if this will work with a Survey123 layer created in Portal 10.6.1?

I see that upgrading to 10.8 may help me, but that isn't an option for the next year or so.

BlairDeaver3
Occasional Contributor

@JenniferBell Can you describe how one can follow the same steps using Portal/Enterprise versus AGOL?  It looks like the calculate field option via Arcade is not an option via Portal.  Do you know when this functionality will be added?  Thank you.

BrittanyBurson
Occasional Contributor III

Hi @BlairDeaver3 , I'm unable to reply to your comment directly, but I believe the Field Calculate directly on hosted layers is available starting Enterprise 10.7 (source). If you aren't at that version yet, you could still use Arcade to calculate the fields if you bring the layer into Pro.

BlairDeaver3
Occasional Contributor

@BrittanyBursonThanks Brittany for the quick response.  It looks like Enterprise only supports SQL expressions and not Arcade expressions for field calculations.  Can you clarify this for me please?

I am not clear if there is a function that will allow me to traverse between the feature table and attachments table via SQL.  An example would be very helpful since it appears that several comments in this post are related to problems trying to follow the pattern with Portal/Enterprise.  Thank you.

RustyCook
New Contributor II

Hello,

I tried looking for blogs that had similar questions and this seemed to be the closest. I have a feature layer hosted on enterprise and one of the attributes ("content") contains a link to a pdf document. On the web map popup configuration I threw this HTML in:

<embed src="{content}" type="application/pdf" width="100%" height="800px"> </embed>

Screen Shot 2021-04-08 at 6.47.31 AM.png

Initially it looks like it worked (see below), however once I save the map and then try to open it again the embed code is removed from my custom display.

Screen Shot 2021-04-08 at 6.54.52 AM.png

I tired using other HTML tags as well such as <iframe> and <object> however the same thing occurred. 

 

Thanks!

Labels