Insert HTML with Arcade

[ChelseaRozek]

I'm trying to insert particular icons into a feature's popup based on the feature's attributes. So if the park allows dogs, I want to show a dog icon. Can Arcade insert <img> elements into the popup? I can't seem to get it to work, it just writes the <img> element out as text.

[BrandonCales · Accepted solution]

Here is what I was able to figure out...

Create an Attribute Expression:

var checkvalue = $feature.SOMEATTRIBUTE
var img_blank = 'https://blankimage.png'
var img_show = 'https://goodimage.png'
iif(checkvalue=='Yes',img_show,img_blank)

Then under CONFIGURE for Custom Popup, enter in any text you want. Add an image, and for the source, use the expression you just created.

Some text and here is the pic: <img border="0" src="{expression/expr0}" width="25" /> 

It works really nice for me, however it would be nice to have a little more functionality to better it.

[ChelseaRozek]

Perfect, thank you! I was able to get it to work. Also, if I leave one of the image source URLs blank in Arcade, it looks like you don't get a broken image icon, so that's great. It doesn't even take up a blank spot for it in the popup (see the 2nd picture). It'll just show all the icons for amenities that = 'Yes' there. I also edited the HTML of the popup to add title="Dogs Allowed" etc. to <img> so users can hover over the icon with their mouse and double check the meaning (see the 1st picture) in case it's an ambiguous symbol.

[JHayes]

This looks great!  Only if I could get it to work   I seem to be missing something.  

I've added my version of this code:

var checkvalue = $feature.SOMEATTRIBUTE
var img_blank = 'https://blankimage.png'
var img_show = 'https://goodimage.png'
iif(checkvalue=='Yes',img_show,img_blank)

It gives me a 'more info' hyperlink in the pop-up that takes me to my image in a new browser window.  I imagine it has something to do with this line of code "<img border="0" src="{expression/expr0}" width="25" /> " but I'm not sure how.

Thanks,

Joe

[ChelseaRozek]

Hmm.. I haven't seen that happen. Here's what my popup config looks like. I just put the replacement string for the relevant arcade expression straight into the URL line from Insert an Image. If I click on the View HTML button, this is what I have (second image). The bottom part is just me printing out the actual YES/NO values to double check if the images are working correctly. If this doesn't help with your map, let me know.

[JHayes]

Okay, now I get it! Wow!

The existence of arcade expression "tags" ({expression/expr*}), our ability to put them into the URL for the images, and the "custom attribute display" option was eluding me. This is awesome!  I had no idea this functionality was available to us in AGOL until now. Thanks, Chelsea!

Also, I hope ESRI makes the custom attribute window bigger in the future.

[XanderBakker]

Really very helpful discussion on what you can do with Arcade in the pop-up window of ArcGIS Online. I used your comments and suggestions to create some visualization on coverage for water and gas per "state" in Colombia.

This is what I got:

The visualization of the 5 green to red person symbols depend on the % of coverage.

Will blog about it and post back the link.

Thanks again for sharing!

[ChelseaRozek]

Awesome example, thanks for sharing!

[XanderBakker]

As promised, below the link to document that describes how I created the pop-up windows mentioned before. One downside, the explanation is in Spanish. I will translate the document to English and publish it in GeoNet. For now I think it might be useful, since it contains all the code (Arcade and HTML) and it is a visual explanation:

Crear ventanas emergentes en ArcGIS Online con imágenes condicionales usando expresiones de Arcade 

[XanderBakker]

Just created a document with the explanation in English:

https://community.esri.com/docs/DOC-10692-create-pop-ups-in-arcgis-online-with-conditional-images-us...