Can't pass html tag as an arcade expression variable into web map popup

[PLadd]

In ArcGIS Pro Arcade Expression I can build a variable for an html tag and pass it to the popup window and it works.  But when I publish this as a web map, the variable just passes the html tag as dumb text - so much for Arcade being seamless, portable, and application agnostic :-(.

I'm trying to make the background-color of the div red or green depending on the value returned in the filter of the expression.

Here's what the variable looks like (where bg and myDelqTax are variables assigned earlier):

var html = "<div style='padding:8px; color:white; font-weight:bold; " +
                   "border-radius:6px; background-color:" + bg + ";'>"
                   + myDelqTax +
                   "</div>";
return html;

And here's how it looks in ArcGIS Pro popup:

But when I publish to a web map, this is the result:

Maybe I'm reading this post wrong, but it seems to indicate this might be available at 11.x (I'm at 11.5).  And don't get me started on what ai searches returned.

I also tried the "Arcade Expression Options" that went something like this but didn't work in web map:

return {
type : 'text',
text : '<div style="background-color:{expression/expressiontaxBG};"><p>hello<p></div>'
// this property supports html tags
}

Anybody know of a workaround to make an Arcade Expression in ArcGIS Pro that uses a variable holding html tags work in a web map?

[ZachBodenner · Accepted solution]

You would need to use an Arcade Element in the popup and then use template literals to access the html

var bg = '#xyzxyz'
var myDelqTax = "whatever this is"
var html = `<div style = "padding:8px; color:white; font-weight:bold;border-radius:6px; background-color:${bg}">${myDelqTax}</div> `                 

and then use 

return {
type : 'text',
text : html

Portable, but not perfectly.

[PLadd]

Thanks for the reply @ZachBodenner 

I tried what you are suggesting:

• In the Arcade expression I assign the variables as you've shown
• Then I configure a popup using an Arcade Expression Option that grabs the html variable as an expression
• It works in APro but doesn't work in Web Map when APro is published.

Here's an abridged version of the Expression called {expression/expressionDelqTax}:

var bg = ""#F44336";

var myDelqTax = "$1234"

var html = "<div style='background-color:" + bg + ";'>"

+ "<b>DELINQUENT TAX ES OWED:</b><br>" + myDelqTax

+"</div>";

return html;

Here's the how I configured the popup with an Arcade Expression Option:

return {

type : 'text',

text : '{expression/expressionDelqTax}'

// this property supports html tags

}

[ZachBodenner]

Ah that's an important point: You can't pass an Arcade expression that you created elsewhere in the popup. You basically have to copy that code into the Arcade popup element itself in order to get the element to recognize it. It's kind of weird that way, I would think it should be able to access expressions built individually, but such is life.

[PLadd]

@ZachBodenner I apologize.  I completely misunderstood how to use an Arcade Text Template (the one in the image below).  Your solution was actually the correct solution.

I thought first I had to create an {expression} and then call that expression using the above Arcade Text Template.  This solution helped clarify what you were trying to point out.

I tested in a web map and it actually works now.

Everything goes into the Arcade Text Template (not in the Expressions section as I was trying to do).

var bg = '#xyzxyz'
var myDelqTax = "whatever this is" //a value derived from the feature clicked on but not shown here

var html =
"<div style='padding:8px; color:white; font-weight:bold; border-radius:6px; background-color:" + bg + ";'>"
"<b>DELINQUENT TAX SEARCH RESULTS:</b><br>" + myDelqTax + "</div></div></div>"

return {
type : 'text',
text : html
}

To sum, if you want to use expression values inside an html and pass it to your popup, don't use the Expression button below and try to pass it to a configured popup.  Instead, use the Arcade button pointed to above.

Thanks!