topic Re: Insert HTML with Arcade in Developers Questions

Insert HTML with Arcade

ChelseaRozek — Wed, 28 Jun 2017 17:46:05 GMT

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.

Re: Insert HTML with Arcade

BrandonCales — Thu, 13 Jul 2017 23:14:52 GMT

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.

Re: Insert HTML with Arcade

ChelseaRozek — Fri, 14 Jul 2017 13:27:15 GMT

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.

Re: Insert HTML with Arcade

JHayes — Wed, 02 Aug 2017 22:27:21 GMT

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

Re: Insert HTML with Arcade

ChelseaRozek — Thu, 03 Aug 2017 13:10:34 GMT

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.

Re: Insert HTML with Arcade

JHayes — Thu, 03 Aug 2017 23:14:59 GMT

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.

Re: Insert HTML with Arcade

XanderBakker — Wed, 16 Aug 2017 18:18:47 GMT

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!

Re: Insert HTML with Arcade

ChelseaRozek — Mon, 21 Aug 2017 12:34:44 GMT

Awesome example, thanks for sharing!

Re: Insert HTML with Arcade

ELIZABETH50 — Tue, 05 Sep 2017 19:15:21 GMT

I'm struggling with this custom attribute display. How did you get it to work? I have 15 pictures that I want to display, depending on which area the user clicks. Only one picture should pop-up. What's on the expression and where the URL goes?

Re: Insert HTML with Arcade

XanderBakker — Fri, 08 Sep 2017 02:31:11 GMT

Hi ELIZABETH F.T. ,

The idea is that you have a custom visualization of the pop-up window (sorry for the Spanish interface)

In the configuration window, activate the HTML mode and then put your html code for the image (and all other info). Inside the source parameter "src" of the image tag you reference your expression "{expression/expr0}":

Your expression should be the part where a URL is generated:

The resulting URL is based on some logic derived from 1 or more attributes.

Can you explain a little more what defines which of the 15 images should be picked in your case?

Re: Insert HTML with Arcade

XanderBakker — Thu, 21 Sep 2017 21:52:55 GMT

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

Re: Insert HTML with Arcade

XanderBakker — Mon, 09 Oct 2017 14:08:36 GMT

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-using-arcade

Re: Insert HTML with Arcade

AndreaMcIntosh1 — Thu, 24 May 2018 18:46:59 GMT

I tried this approach using these images but as you can see even if you leave it blank there is still a space. Any ideas why?

Re: Insert HTML with Arcade

ChelseaRozek — Thu, 24 May 2018 18:51:11 GMT

Hi Andrea, can you either post a screenshot of the arcade expression and the popup html code or provide a link to your public map so I can take a look?

Re: Insert HTML with Arcade

AndreaMcIntosh1 — Thu, 24 May 2018 18:57:02 GMT

sure

http://arcg.is/18OjX0

Re: Insert HTML with Arcade

ChelseaRozek — Thu, 24 May 2018 19:06:36 GMT

Is it Woodrow Wilson Park with the issue? It looks fine on my screen, a small gap due to the white border around the images. With Chrome Developer Tools, I can see that there is an img element in between the 2 visible icons that is 0x0 pixels (vs. the other two are 50x50). I forgot that I wouldn't be able to see the Arcade/popup configs without the ability to edit the webmap, sorry.

Re: Insert HTML with Arcade

ChelseaRozek — Thu, 24 May 2018 19:30:05 GMT

Looks like your code is good. I tried your webmap in Chrome, Firefox, and IE. I only see those gaps in IE, is that what you're using? The Dev tools show that it's giving dimensions 28x30 to that blank image, thus showing a white gap, unlike the other browsers. I tried searching for known issues with Arcade and IE, but haven't found anything.

Re: Insert HTML with Arcade

AndreaMcIntosh1 — Thu, 24 May 2018 19:41:20 GMT

Yes IE is my browser of choice. I tried it in chrome and voila of course it looked correct. Ugh I should of thought of that first.Thanks so much for your help!

Re: Insert HTML with Arcade

AaronMurphy4 — Wed, 18 Jul 2018 21:49:29 GMT

How did you get your images to appear and disappear once you clicked on the different parks? I was able to upload an image in my popup but it appears on every popup but I only want it to show up on certain ones. For example: when I click on the Bollards line it should only the the bollard image and text.

Do I have to create an expression to have the image only show when needed?

I'm also very new to arcade and learning on the fly. This feed has been very helpful so far. Thank you.

Re: Insert HTML with Arcade

AndreaMcIntosh1 — Thu, 19 Jul 2018 12:44:07 GMT

Yes you have to use the an expression. The correct answer above is the sample that you can follow.