How can I insert HTML code into a popup using an arcade expression

1246
5
02-17-2023 02:40 PM
KhoaPham
New Contributor II

I'm having trouble inserting HTML code in an arcade expression in the Map Viewer popup configuration and have the HTML code be processed not as a text string.  I'm using template literals rather than single quotes around the HTML code.  However, the Map Viewer interpreter does not process the value like the javascript interpreter does and displays the HTML as text in the popup window.  

KhoaPham_0-1676671770210.png  

KhoaPham_1-1676672778500.png

I read this post Solved: Arcade expression correct but doesn't show up in p... - Esri Community where it is mentioned that there are two types of arcade you can configure in the popup window, arcade expression and arcade element.  Here's the image showing the two in the post and that you can add an arcade element using the "+ Add content" button, then "</> Arcade"

KhoaPham_2-1676673157291.png

However, I'm not seeing that "</> Arcade" option when I go to add it.  I'm using Enterprise 10.9.1.  

Does anyone know what version is that arcade element option available? 

Also, why wouldn't the expression work?  I figure that the Map Viewer wouldn't interpret it as vannila javascript would and that is understandable, but is there another way to use arcade expression and still get injected HTML code to display correctly?

Appreciate any help you can give.

 

 

5 Replies
jcarlson
MVP Esteemed Contributor

Yeah, the Arcade element isn't available until 11.0, so you can't do it yet.

The next best thing is to configure your popup to have HTML, then use an Arcade expression to fill in parts of it.

<a href="{expression/URL_expression}">Click Here to see {expression/text_expression}!</a>

 

- Josh Carlson
Kendall County GIS
KhoaPham
New Contributor II

Thanks Josh for the prompt response.

That's what I had to resort to.  What I'm really trying to do is to build an HTML block of table,rows,columns tags that is embedded with a dataset returned by a FeatureSetBy... function in the arcade.  Unfortunately though since the {expression/expr#} embedded in the HTML can only be single values I'm not able to accomplish this. 

I was able to do this in a custom web map without issue.   So then there is no way to do what I'm trying to do using the Map Viewer popup configuration tool without upgrading to 11.0?  Do you know if the arcade element option is available with ArcGIS Online?

0 Kudos
jcarlson
MVP Esteemed Contributor

It's in AGOL, yes.

Depending on what you're trying to do, though, you can still get some pretty intense popups with the 10.9.1 capabilities. But any time there's something dynamic, you'll need a separate Arcade expression. So if you wanted a table with dynamic font, background color, and visibility, that could be 6+ separate expressions per row of the table.

What about a Dashboard? Even in 10.9.1, there's still a fair bit you can do with Arcade in a dashboard List element.

- Josh Carlson
Kendall County GIS
0 Kudos
KhoaPham_AWWD
New Contributor

Thanks Josh for the tips.  Yes the work around is less than ideal.  I can't wait until being able to use the popupElement.  I'm new to arcgis programming and haven't dabbled in dashboards yet.   Can't wait to get into that either.

Thanks!

0 Kudos
StefanUseldinger
Occasional Contributor II

If You're using Your own hosted ArcGIS JavaScript API and You don't want to split Arcade expressions, You can also remove the HTML element sanitizer mechanism completely.

For v. 4.27, just modify the \esri\widgets\Popup.js from:

p.htmlEntities=function(M){return M.replaceAll(k,ja=>`&#${ja.charCodeAt(0)};`)};

 to:

p.htmlEntities=function(M){return M};

 This will allow any HTML elements in the feature popup.

0 Kudos