Select to view content in your preferred language

Unable to create new line in Arcade popup

1486
7
Jump to solution
08-09-2023 02:21 PM
E_-_MattReed__GISS_
New Contributor III

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:

E__MattReed__GISS__0-1691615697612.png

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

Screenshot_20230809-151616.jpg

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?

1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

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

Map Viewer.png

Screenshot_20230810-112625.png

View solution in original post

7 Replies
KenBuja
MVP Esteemed Contributor

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;
0 Kudos
E_-_MattReed__GISS_
New Contributor III

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

E__MattReed__GISS__0-1691624697996.png

 

0 Kudos
KenBuja
MVP Esteemed Contributor

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

Map Viewer.png

Screenshot_20230810-112625.png

E_-_MattReed__GISS_
New Contributor III

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
Occasional Contributor III

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

- Holly
0 Kudos
KPyne
by
Occasional Contributor

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

0 Kudos
E_-_MattReed__GISS_
New Contributor III

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

0 Kudos