HTML Tags in Arcade Expressions for Popups

[awgeezrick]

Good Morning,

Here is my conundrum. Our organization has moved to 10.9.1 (finally) and I am stoked that I can finally bring in content from related data table layers into a feature layer popup. I was able to get the functionality working (i.e. grab related layer from a data table based on a common field) combine that data with some HTML tags for styling and then return the results (e.g. "<h1>" + filed_value + "</h1>"; ) so that it looks nice in the popup, the popup displays the HTML tags rather than rendering them (as they would if I just used the html tags in the popup directly. I realize that I could just return the data from the expression and style it as needed in the popup but the data that is return is a list of data (more than one record).

UPDATE (added Arcade Expression code and popup output):

var x = $feature['bail_go'];
var fs = FeatureSetByName($map, 'sureties');
var filt = Filter(fs,'bail_go = @x');
var cnt = Count(filt);
var sureties = "";
if (cnt > 0) {
    for (var surety in filt) {
        var bail_go = "<p><span style='color:#d6d6d6'><em>" + surety.bail_go + "</em></span></p>";
        var txt_date = Text(surety.dob, ' - (Y/MM/DD) ');
        var surety_tombstone_info = "<p><strong><span style='color:#d6d6d6'>" + surety.g1 + "&nbsp;" + surety.surname + "</span></strong>&nbsp;&nbsp;" + surety.sex + "-&nbsp;" + txt_date + "</p>";
        var address = "<p>" + surety.address + ",&nbsp;" + surety.city + ",&nbsp;" + surety.province + ",&nbsp;" + surety.postal_code + "</p>";
        var final = bail_go + TextFormatting.NewLine + surety_tombstone_info + TextFormatting.NewLine + address;
        sureties += final;
    }
    
} else {
        
sureties = "No Sureties";
}
return sureties;

Any guidance, insight, assistance is greatly appreciated.

Mark

[MichaelGinzburg]

Hello, it will be useful if you'll post Arcade expression you used.

[awgeezrick]

Hi Michael,

I have updated the post with the Arcade Expression and the output as shown in the PopUp.

Mark

[KarstenRank]

It looks like you didn't change to HTML-Source, when entering your data.

[awgeezrick]

Thanks for the reply, but when I am creating the popup I am using the HTML-source so that I can enter the {expression/expression12} value properly. But what happens is when the expression is rendered in the popup window it displays the html tags that were included in the expression return. As per @jcarlson indicated, the expression returns the expression as a string so the html tags are displayed as such.

[jcarlson]

You can't actually do this sort of thing in 10.9.1 in the way that you're hoping. In 11.0, there will be a new Arcade element you can add to your popups that supports HTML tags like this, but at the moment, the output of your expression will only come into the popup as a string, so "<b>bold text</b>" comes in just like that, rather than the "bold text" you would expect.

For the time being, you will only be able to do this by applying the style in the popup HTML, rather than in the expression itself.

If you HTML styling needs to be dynamic, you can pipe an expression into the style tag of an HTML element. Say you had an expression:

Iif($feature['some_attribute'] == 'Important', 'bold', 'normal')

You could then pipe that expression in like this:

<div style="font-weight:{expression/expr0}">Some text here</div>

The text "Some text here" will now dynamically change between bold and normal text, depending on the evaluation of the expression above.

While doable, this method requires you to write an expression for every style element that you want to define by some attribute, and can be quite tedious. You also can't utilize any other HTML tags like lists and such.

It's possible to hard-code a number of HTML elements and use expressions to define whether or not they are visible, using the CSS property display. But since you're working with related data, the number of related records may not be known. So you might write a bunch of expressions to return up to, say, 10 list items, even if most features will not have that many. Again, very tedious, and will probably impact performance.

[awgeezrick]

Yargh!

Thanks for the detailed response. Not the one I was hoping for, but appreciated none the less. =]

[JohnNergeBrooklynPark]

I don't know if this is quite what you're looking to do, but I just recently discovered using the rich text content element. It lets you use html tags to format your pop-up text along with the typical Arcade expressions.

https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/part-1-introducing-arcade-pop-up-con...

[awgeezrick]

Thanks for the link John. I will give it a look.