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

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.