Unable to create new line in Arcade popup

[E_-_MattReed__GISS_]

I'm seeing an issue where I can create a new line in a popup multiple ways that displays properly in a web map, but when viewed in Field Maps on mobile devices (both Android and iOS with newest versions available), the carriage returns are ignored. I'll post my code below, but for a little background...

I've created a text element in my popup. The text is formatted with HTML to display data the way I want. However, I have a series of fields that may or may not contain data. So I created an Arcade expression to remove the empty fields, and create an ordered list out of those with data. I started by creating an array of the group of them, then filtered that into a new array. The resulting expression is then inserted into the HTML of the popup.

I'll reiterate, the popup displays correctly in a web map, but when viewed in Field Maps, the new lines are ignored. 

Here is my HTML:

<div>
    <p>
        <strong>Location</strong>
        <br>
        {Location}
        <br>
        <br>
        <strong>Values At Risk</strong>
        <br>
        {ValuesAtRi}
        <br>
        <br>
        <strong>Trigger Conditions</strong>
        <br>
        {TriggerCon}
        <br>
        <br>
        <strong>Contact/Notifications</strong>
        <br>
        {ContactNot}
        <br>
        <br>
        <strong>Recommended Actions</strong>
        <br>
        {expression/expr0}
        <br>
        <strong>Recommended Resources</strong>
        <br>
        {RecommReso}
    </p>
</div>

Here is one option I tried for the Arcade expression:

var aRecomm = [ $feature.Recommen_1, $feature.Recommen_2, $feature.Recommen_3, $feature.Recommen_4,$feature.Recommen_5,$feature.Recommen_6,$feature.Recommen_7,$feature.Recommen_8,$feature.Recommen_9];

function FilterNonEmpty(value) {
    return !IsEmpty(value) && value != "" && value != " ";
}

var aFiltered = Filter(aRecomm, FilterNonEmpty);

var result = "";
for (var i in aFiltered) {
    result = result + (Number(i) + 1) + ". " + aFiltered[i] + '\n\n';
}

return result;

And here is the other:

var aRecomm = [ $feature.Recommen_1, $feature.Recommen_2, $feature.Recommen_3, $feature.Recommen_4,$feature.Recommen_5,$feature.Recommen_6,$feature.Recommen_7,$feature.Recommen_8,$feature.Recommen_9];

function FilterNonEmpty(value) {
    return !IsEmpty(value) && value != "" && value != " ";
}

var aFiltered = Filter(aRecomm, FilterNonEmpty);

var aResult = [];
for (var i in aFiltered) {
    aResult[i] = (Number(i) + 1) + ". " + aFiltered[i] + `\n`;
}

return Concatenate(aResult, TextFormatting.NewLine);

I've tried all combinations of \n and TextFormatting.NewLine.

Here is the resulting popup in a web map:

And here it is in Field Maps (Andriod, but iOS gives same results):

Obviously, the Recommended Actions are what are created by the expression.

The product is usable, it's just not clean. Does anyone know how I can split those actions onto new lines?

[KenBuja]

What happens with this expression?

var aRecomm = [ $feature.Recommen_1, $feature.Recommen_2, $feature.Recommen_3, $feature.Recommen_4,$feature.Recommen_5,$feature.Recommen_6,$feature.Recommen_7,$feature.Recommen_8,$feature.Recommen_9];

function FilterNonEmpty(value) {
    return !IsEmpty(value) && value != "" && value != " ";
}

var aFiltered = Filter(aRecomm, FilterNonEmpty);

var result = "";
for (var i in aFiltered) {
    result =+ `{(Number(i) + 1)}.${aFiltered[i]}${TextFormatting.NewLine}${TextFormatting.NewLine}`;
}

return result;

[E_-_MattReed__GISS_]

Thanks for the attempt, but.... not a number...

[KenBuja · Accepted solution]

Field Maps does not interpret "TextFormatting.NewLine" or "/n" properly. If you want to add them, you have to use the Arcade element in the popup. I've created a popup using an Arcade element and a regular Text element. The Arcade element uses this code

var test = ['A','B','C'];
var output = '';
for (var i in test)
{
	output += `${test[i]} <br/>`;
}

return { 
	type : 'text', 
	text : output //this property supports html tags 
}

The Text element uses this expression

var test = ['A','B','C'];
var output = '';
for (var i in test)
{
	output += `${test[i]}${TextFormatting.NewLine}`;
}
return output;

While they both render properly in the Map Viewer popup, the Text element doesn't render properly in the Field Maps popup

 

 

[E_-_MattReed__GISS_]

That's it @KenBuja. I was trying to keep the whole thing together, building the expression as an attribute. I'm not thrilled with the spaces that it displays between the elements, but it is WAY better than it was before. Thanks for the assist!

There's no way to remove those gaps, is there?

[HollyTorpey_LSA]

I'm also annoyed with the extra spaces between elements. Did you ever figure out a solution to that, @E_-_MattReed__GISS_? 

[KPyne]

I do this something similar but I use '<br>' and it works fine. Of course, <br> show up in the webmap when you do it this way.

I am still trying to find a solution for new lines that works in both Field Maps and the webmap

[E_-_MattReed__GISS_]

<br> works fine in the HTML, but I can't get it to read properly by inserting it into the for loop.