Show Attachments in Pop-ups with Arcade Expressions

80378
89
03-22-2019 09:44 AM
JenniferBell
Esri Contributor
26 89 80.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.

89 Comments
KevinMayall
Occasional Contributor III

"4. Click the field when it appears and select the Calculate option with Arcade."

Not seeing an option to use Arcade in ArcGIS Online Calculate.  The calculator seems to want a SQL expression.

KellyGerrow
Esri Frequent Contributor

Check out this blog by Paul Barker‌ for more information about the attachments function with arcade:

Visualize your attachments in ArcGIS Online with Arcade 

KellyGerrow
Esri Frequent Contributor

Hi Kevin,

Calculating fields with Arcade is not supported for feature layers that have sync enabled or are configured to track who created and updated features.

Calculate field values—ArcGIS Online Help | ArcGIS 

Is this the case for your data? Are you able to modify any of the settings or are they required for your workflow?

-Kelly

Anneka_France
Occasional Contributor III

I'm getting the error "Runtime Error: Cannot call member method on null."

Is this because some features don't have an image attached?

KevinMayall
Occasional Contributor III

Hi Kelly,

Thank you! Once I disabled sync, the Arcade option was there.

Kevin

KellyGerrow
Esri Frequent Contributor

Can you share your expression? 

-Kelly

KevinMayall
Occasional Contributor III

I think so.  I get it too after it processes my first record with attachments, then gives an error on the second record with no attachments.  Probably needs a condition test, but I haven't got it working yet.

JenniferBell
Esri Contributor

Thanks for your comments. You're right that the null error is due to not having an attachment in one or more of the features, and that a condition test is a possible solution to this issue.

Here's one way to address features that do not have attachments:

1. Open the layer with attachments in the map viewer.
2. Open the layer table and add a CountAttachments field and calculate it with the Arcade Expression:
      Count(Attachments($feature))
3. Filter the layer to show:

      CountAttachments is greater than 0
4. Add an AttachID field and calculate it with the Arcade Expression:
      First(Attachments($feature)).ID
5. Remove the filter.
6. Configure the Arcade Expression in the pop-up to include the conditional statement. The When statement is read as "When the count of attachments is greater than zero, return the URL string. For all else (count less than or equal to zero), return null (or nothing)."
      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)
7. Add an image to the pop-up and set the expression as the URL.

JosephKerski
Esri Notable Contributor

I am looking forward to sharing this with the education community - at the moment I cannot get past the step where I calculate the Arcade expression - I am using return First(Attachments($feature)).ID  but I am getting the error "unable to append data".  When I first enter the expression and "test" - I do get a "1" returned so it seems like the expression is valid.

JenniferBell
Esri Contributor

Hi Joseph, were you able to get the expression working?

ZandBakhtiari1
New Contributor II

https://community.esri.com/community/gis/web-gis/arcgisonline/blog/2019/03/22/show-attachments-in-po...‌  Does this work with Map Services that are not hosted on AGOL?  For example a Map Service from a ArcGIS Server (non federated) that has been published with  attachments.

KellyGerrow
Esri Frequent Contributor

HI Zand,

Currently the attachment function in Arcade is only available with the calculate feature tool with hosted feature layers. You may be able to look into Jake Skinner's post about to perform the same steps with a Geoprocessing tool although i haven't tried this with non-hosted feature services.

Show Attachments in Web Map Popup

-Kelly

AutumnMason
New Contributor II

I have a feature service with attachments that I am trying to get this to work with. It does not have syncing enabled, and I went ahead and made it public like the workflow mentions. I am getting stuck on the very first line of the Arcade Expression, var Part1= "myservicename.../FeatureServer/1/", when I continue to get a red x with the message, "Parse Error:Line5: Unexpected token ILLEGAL". Any help figuring this out is much appreciated.

KellyGerrow
Esri Frequent Contributor

In order to access the attachments, the feature layer must be shared publicly. Is there anything preventing you from sharing this publicly?

AutumnMason
New Contributor II

It is shared publicly, I am an AGOL admin within my organization. 

KellyGerrow
Esri Frequent Contributor

can you share a link to the layer?

JoeBorgione
MVP Emeritus

For other Arcade newbies like myself, here is a post of mine that describes my experience.

Many thanks to Kelly Gerrow‌ and Jennifer Bell (sorry there are three Jennifer Bells...) and my friend and colleague Rachel Manko who is the best trainer of old dawgs learning new tricks I know!

JoeBryant1
Occasional Contributor III

The hosted feature service I'm trying to add pop-up pictures to is used by our staff in Collector. I can't share this publicly because it is editable. However, I made a View of the layer without editing rights that I have made public.

When I try to calculate the Attachment ID as described above on this public view, I get: "Execution Error:Runtime Error: Cannot call member method on null. ID". (Yes, I filtered out all rows without attachments first). This is the same error I get when trying to calculate on the non-public parent feature service.

Does this make sense? Can I not access the attachment ID because the editable parent feature service of the view is not shared publicly? 

KellyGerrow
Esri Frequent Contributor

Hi Joe,

I just ran through a similar workflow and am not experiencing any issues where the sharing privileges of both the primary layer and view layer are different. Can you verify that you are calculating the field on the public layer? I would also suggest getting in touch with Tech Support.

RyanWoehl
New Contributor

I have run through the workflow and now i'm getting "Token Required" Error,  when I test to see the attachment.   I don't/can't have the feature shared publicly.   Is that causing the error?

KellyGerrow
Esri Frequent Contributor

HI Ryan,

In order to use this workflow, the feature layer must be public. For testing purposes you can append a token to the image url, but this has security implications and requires updating of the token if it were to be used as a production workflow. For now, I would only recommend following this workflow with public layers.

-Kelly

RyanRish
New Contributor II

Hello all,

Will this procedure work with attachments from Survey123?

The URLs for the attachments have tokens. So, for example the file name for the attachment in the data table is: 2019-04-09 10.02.22.jpg

And, the URL is: "https://services4.arcgis.com/88rfrrytOLWa0xax/arcgis/rest/services/survey123_50d1bb44f2fe4e95a8bd5b0...

Any advice on how to make this work?

Thank you,
Ryan

JenniferBell
Esri Contributor

Here is a map of your test data showing how to do this. Click Modify Map in the top right, then open the layer's pop-up configuration to view the expression.

If your object ID and attachment ID are the same, you can use the following code for your expression:

var Part1 = "https://services4.arcgis.com/88rfrrytOLWa0xax/arcgis/rest/services/survey123_50d1bb44f2fe4e95a8bd5b0..."
var ObjectID = $feature.ObjectId
var Part2 = "/attachments/"
var AttachID = $feature.ObjectId
Part1 + ObjectID + Part2 + AttachID

However, if the object ID and attachment ID are different, then I would add a countAttachments field (Part 1, Step 3) and an AttachID field (Part 1, Step 5) and use the Arcade expression format in Part 2. 

RyanRish
New Contributor II

Thank you so much. I've been trying to figure this out for a while, and I was over complicating it. I copied what you had in your popup configuration without adding any fields and it worked! Thanks again!!

-Ryan

James_Armstrong
Occasional Contributor

Hey Kelly,

I wonder if the reason you gave above is also relevant to my not being able to add a field.  That option does not appear anywhere.  I am using Portal, but should that matter?

James

James_Armstrong
Occasional Contributor

Nice article.  Do you know if there is a class or webinar on using ARCADE.  I am speaking more of a deeper dive that I have seen on internet so far.  Perhaps I am missing something that is already there.

Thanks

James

JenniferBell
Esri Contributor

Hi James. I don't know of any upcoming webinars, but we just had the User Conference in July where there were lots of recorded tech workshops. Until they become available, here are some videos from last year: https://www.youtube.com/results?search_query=arcade+expression+esri 

I also just released this story describing everything I shared during an Arcade workshop I gave a couple weeks ago at the conference. There are lots of additional links at the end of it: https://storymaps.arcgis.com/stories/2f65e766a5864a37a44a598d585f80b2

James_Armstrong
Occasional Contributor

This is awesome. Thank you!

James

James_Armstrong
Occasional Contributor

Jennifer,  Thanks so much for posting this as I have an application that needs it badly.  I followed the instructions and actually got it to work. Beautiful.  One thing though....I notice that when I click on the picture (actually right click) there is an option to open the photo in a new browser tab.  I like this, however, for some reason, when I click on a picture in my app, all I get is a download request.   Im not sure it is something with the script, but have you seen or heard of this before, and if so, would you have a suiggestion on what I might try so that the phot opens in a browser?  (Chrome, IE, Firefox and Edge)

Thanks

James Armstrong

JenniferBell
Esri Contributor

Hi James, I'm glad it worked for you. Do you have a url to your app that you could share? 

James_Armstrong
Occasional Contributor

Hey Jennifer,

Yes the URL is:  ArcGIS Web Application 

The images are with the dots in the lake.  The data (and images) was collected using Survey 123.  It was my first use of that cool tool.  the URL for the feature service is>  Layer: surveyPoint (ID: 0) 

I do see that when I hover over the image in the popup, the url in the bottom left does not end with a .jpg

Any suggestion you may have to better access the photos would be very helpful.

James

joerodmey
MVP Alum

I've ran through the steps but I get the cannot load error in my popup. Any ideas why?

James_Armstrong
Occasional Contributor

Hi Jennifer,

I responded to you in the GeoNEt forum, but now also send the link to the app.

https://wa.lrcog.org/portal/apps/webappviewer/index.html?id=b9302894c502413495cef43dc09311d8

Thanks for taking a look.

James

RickeyFight
MVP Regular Contributor

Jennifer Bell‌, 

Thank you for providing this information. 

I am having one issue with my popup. It rotates my image in the popup. 

Any idea on how to get around this? 

What the attached image should look like 

joerodmey
MVP Alum

My pictures wont show. How can I show the pictures this way if I don't wan to make the data public? The ops dashboard can do it without making data public so this should operate the same way shouldn't it?

by Anonymous User
Not applicable

I gave this a quick test in ArcGIS Online and the image does open in a new tab as expected. Since you are working in ArcGIS Enterprise, I am wondering if this is a difference between the two platforms. What version of Enterprise are you on?

Thanks,

Peter

by Anonymous User
Not applicable

Hi Rickey,

Were these images taken in Collector?

It is likely that there is EXIF metadata in the photo about the orientation that is not picked up by HTML clients. I'm thinking that this blog might help you towards achieving the proper rotation. 

Thanks,

Peter

by Anonymous User
Not applicable

Hi Joe,

I think the reason that this doesn't work with secured Hosted Feature Layers is that the Arcade script constructs a URL to the image resource location. A token would be required to access a secured image, and it is not recommended to embed a token into a URL. You could try this for testing purposes but as Kelly Gerrow‌ mentioned above, this should not be used in production. 

The REST API would be required to generate a token for use in scripts, Arcade does not have this functionality within the Web Map pop-up window.

I also want to mention that the New Map Viewer (Beta Coming Soon) will be able to show attachments in pop-ups without Arcade. I am expecting that this will handle the token issue. 

Thanks,

Peter

RickeyFight
MVP Regular Contributor

Peter Klingman

Yes it was taken in collector. The problem is that some photos are in a feature class and some are in a related table. 

I will try to rotate the popup in WAB. 

joerodmey
MVP Alum

Hi Peter,

Would I be able to use something like Integromat to make my REST call to create a short lived token and pass that in? Any other suggestions?

Joe

by Anonymous User
Not applicable

Hi joe rodmey‌,

This is not something I've tried before. 

If you have a separate script that generates a token with a post request, you could possibly access that token using Arcade. As I mentioned above we do not recommend embedding tokens in URLs. 

Thanks,

Peter

KateCarlson
Occasional Contributor

Hi Joe and Kelly-   

I really like this attachments to URL solution, but I am experiencing a similar issue with the View layer pop-ups.  The image will not display in the View layer's pop-up unless I make the feature layer public.  The View layer is public and I cannot set the feature layer to public because it is editable (field staff are using Collector for the "What's in Bloom" application at the arboretum).  Any recommendations on how to handle this... or if it can be handled?

Thanks much-

Kate  

JoeBryant1
Occasional Contributor III

Hi Kate,

I gave up on this back in April, but just tested it again using the same data. I am getting the same behavior as you - the Parent feature layer has to be shared publicly in order for the View layer pop-up to work. If the Parent is only shared with my Collector group, the pop-up images don't work in either the Parent or View layers, even if the View is shared publicly.

FYI: I also just tested using the new BETA Map Viewer for this, and while the custom Arcade expression still doesn't work in this interface, using the new "Add Attachment" to the pop-up tool does. The formatting needs some work (I'm guessing other BETA users have already reported the large gap between the fields and the image, requiring you to scroll down to see the image), but it will likely solve this problem when it is officially released.

KateCarlson
Occasional Contributor

Hi Joe-

Thanks so much to taking the time to revisit this to respond.  Looks as though all effort for an attachments solution is going into the new Map viewer, makes sense. I did test the beta map yesterday as well and found that it does display the attachments easily (yay!).   I assume more customizing options will be presented in time, like the ability to remove the word Attachments...

I just re-read Kelly's response to your original post and found that I can get this to work. I was originally calculating the field in the editable feature layer, not the public View layer. I did not realize that you can perform field calculations in a View layer that is not set as editable??  Learn something new everyday.

Best-

Kate

JoeBryant1
Occasional Contributor III

And now I’ve learned something, too; thanks!

To clarify, it’s not which layer you perform the calculations in, it’s which Feature Service URL you use for the calculated URL in the last step.

I was initially confused by your response as I could see the results of the field calculations I had performed in the parent feature service being displayed in the attribute table of the View layer. But navigating to the calculated “Custom” URL from the View layer gave a “Token Required” error. It then occurred to me that I needed to alter the URL used in Part 2, step 4, to point to the public view layer instead of the private parent layer.

I hope this helps anyone else experiencing token problems when using a public view layer of a private editable service.

Joe Bryant

GIS Coordinator

WEST YOST ASSOCIATES

direct 530.761.0226

KateCarlson
Occasional Contributor

Yes, that is it. I calculated within the View layer table using the service URL for the View layer... but I suppose I could calculate the field in the parent layer making sure to use the View's service URL.

Thanks!

Kate

TKSHEP
by
New Contributor III

Hello,

I am unable to calculate field in step one, I keep getting "The calculate expression is not valid" error.  I am trying to add my photo attachments that are attached to the feature layer at the top of the popup in a specific location.  Any help would be greatly appreciated.

Thank you!

JenniferBell
Esri Contributor

Hi Trisha, thanks for your question. Have you tried the new Map Viewer Beta? The Map Viewer Beta has the option to reorder attachments, text, images, and attributes. If you have multiple attachments for one record, you can view them as a list. Since it's using 4x, you can even dock the pop-up. 

TKSHEP
by
New Contributor III

Hello, unfortunately I have not. I am trying to use it in our portal and it is currently not available yet in our portal.

Thank you!

JaredPilbeam2
MVP Regular Contributor

Hi Jennifer,

I'd like to do something similar, namely put attachments at the top of the pop-up window. But, I don't see an option to open Map Viewer Beta in Portal. If I did that in AGOL could I somehow sync it to Portal?