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.

[ChelseaRozek]

Is your final WAB app public? Can you post a link?

[Anonymous User]

Yes it is.  Its a Park Locator application.  We want a descriptive text to appear when you hover over the park asset icon in the pop-up.  Here is the URL: ArcGIS Web Application 

I can't figure out what I am doing wrong.  I tried a mouseover function inside the img tag but that didn't work.  I tried to put in a bit of coding that told what the mouseover function should be and then refer to that inside the img tag but the pop-up configure won't save the html coding.  Keeps deleting it.  Grrr....

[ChelseaRozek]

I hadn't used this in a production app, so I never noticed. AGO is also deleting the title tags from my popups once I save the webmap. I can add it in with Chrome's DevTools, so the browser knows how to use it. It looks like ESRI filters out certain tags: Supported HTML—ArcGIS Online Help | ArcGIS  : (

Love the activity icons!

[Anonymous User]

Interesting!  Any ideas on how to fix IE displaying the activity icons with spacing? Looks goofy and most of the county staff use IE, not Chrome.  Can't have it looking like this.

[AndreaMcIntosh1]

I think it has something to do with IE not being compatible with HTML 5 I have the same problem sometimes and that is what I have gathered so far. 😕

Also to help with you initial question

I think with AGOL popups CSS is not a feature that can used because of security reasons. So although you can type it in and initially they apply they do not go beyond that.

[ChelseaRozek]

Here's my work around for the spacing issue in IE. I slimmed down my popups to only 3 activities. The 2/3 park is missing swimming and 3/3 has all 3 activities. Instead of leaving img_blank = '' in my arcade, I changed it to a transparent 1x1 pixel '....blank.png'. So an image actually renders in IE, but it's pretty much invisible.

Before (issue seen in IE):

Chrome: 2/3 =  3/3 = 

IE: 2/3 =  3/3 = 

After:

IE: 2/3 = 3/3 = 

Chrome (still fine)

[Anonymous User]

That worked!  I also had to remove my width="35" syntax.  Viola!  Now it looks good in IE!  Thank you so much!  1 problem down, on to the next.  Now to figure out how to add a hover or caption text to my images....

[NedCake1]

Added a request to include support for HTML title tag in popups to Ideas.arcgis.com.  Please take a moment to vote up.

https://community.esri.com/ideas/15845 

Thanks

Ned

[AndreaMcIntosh1]

May I ask where did you find the park amenity activity symbols?

[Anonymous User]

I made most of them in Adobe Illustrator.  Otherwise I used Flat Icons website.