Insert HTML with Arcade

20035
46
Jump to solution
06-28-2017 10:46 AM
ChelseaRozek
MVP Regular Contributor

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.

46 Replies
DougBrowning
MVP Esteemed Contributor

I tried using this trick to set the font color.  But every single time I go back in to edit the Popup it changes back to not showing HTML and wipes my html tag changes.

0 Kudos
ChelseaRozek
MVP Regular Contributor

Hi Doug,

    Can you post a screenshot of your code? In case it helps, this is what I've done:

I'm able to change font colors of an attribute with this workflow:

1. add Arcade expression in popup config that defines color based on feature's status attribute:

return When($feature.poststatus == 'missing', 'a33939', $feature.poststatus == 'bad', 'ef1010', $feature.poststatus == 'needsattention','e5d202', $feature.poststatus == 'ok','11af3e','000000')

2. In the Custom Popup, click on the View HTML Source button, add:

<font color="#{expression/expr2}">{poststatus}</font>

3. Get these in the popup based on status: (note, I did all this twice, once for the sign status and once for the post status)

0 Kudos
DougBrowning
MVP Esteemed Contributor

It is not even my code.

If I edit the popup, change to html, add <font color="{expression/expr4}">Text</font>, save, it works.

If I go back into the popup, edit, change to html, it then wipes any custom code I had - changing the line above to <font color="#0e00e0">Text</font>. 

This means I would have to rebuild all of this every time I need to edit.  

Weird but it does it every time.

Thanks

0 Kudos
ChelseaRozek
MVP Regular Contributor

That is weird. I haven't seen that before. Please let us know if you or esri support figures out what's going on.

0 Kudos
NicolasGIS
Occasional Contributor III

Has anyone tried using the HTML configured pop-up from ArcGIS Online in a webmap displayed with the 4.X API ?

var webmap = new WebMap({ portalItem: { id: "e691172598f04ea8881cd2a4adaa45ba" } });

I am under the impression that the HTML is overwritten. Is it an unsupported workflow ?

0 Kudos
mfinch
by
New Contributor II

@BrandonCales  I was trying to use your arcade expression and changed it a little to a IF ELSE to bring in a specific URL image depending on what is entered in field "Category". There are three options - 'Habitat', 'Pollution', and 'Fisheries'.

First I created this expression using URL links to each individual image:

var category = $feature.category
var h_url = 'https://live.staticflickr.com/65535/50811758156_0a9c8775c6_h.jpg'
var p_url = 'https://live.staticflickr.com/65535/50811758111_bf75a9417f_k.jpg'
var f_url = 'https://live.staticflickr.com/65535/50811758161_30724fa19c_z.jpg'

var img_url = '';
if ((category == 'Pollution') || (category == 'Fisheries')) {
img_url = h_url;
} else if ((category = 'Fisheries') || (category == 'Habitat')) {
img_url = p_url;
} else {
img_url = f_url
}
return img_url

When I test this expression the output is a image link:

mfinch_3-1610056691097.png

Then I went into the pop-up configuration and chose "A custom attribute display" and inserted the HTML code that was mentioned:

mfinch_0-1610056481845.png

 

But all I see in the output when I switch from HTML view to regular view in the Custom Attribute Display window is this image icon:

mfinch_1-1610056537448.png

 

And when I save and close the pop-up configuration the pop-up is empty when I select a feature, even though I have data in the attribute table that says the category:

mfinch_2-1610056602627.png

Any thoughts on what I might be missing?

0 Kudos
GregMak1
New Contributor

Hi guys, I recently checked out this thread and I'm glad I came across it but I was wondering if I can get some help.  I'm currently working on the hover over or mouse over effect on my Parks Locator App amenity list.  There are a bunch of icons that I'm using (e.g. Biking) which I want a text popup to appear that shows the word of the amenity (e.g.Biking).  I have tried some of the solutions that were mentioned in the above posts but to no avail.  What should i add to make the Biking amenity in the parks polygon popup, for example, show up with the "Biking" text?  Can anyone help?

P.S. Everything here in the attachments is working as intended.  The non working code I initially had for text (css/html) box in the webmap for the mouseover text, is deleted.

0 Kudos