Arcade and Html tag <br> not working in ArcGis Enterprise 11.1

[YasnaiaMassie]

Hello there,

I am new to Arcade, but I managed to put together an expression to hide fields with no values in pop-up layers.
The Arcade expression behaves the way I was expected in ArcGis Pro 3.1.
The layer pop-up shows correctly, see screenshot

Publishing as web layer to ArcGis Enterprise 11.1, I encounter these problems:
1- The Arcade expression does not render. Basically the web layer does not carry over the Arcade expression from ArcGis Pro to ArcGis Enterprise.

2- And Placing the Arcade code directly in the layer pop-up, ArcGis Enterprise, the expression does not accept the tag <br>, Html. See screenshot

See attached file for the code and its screenshot:

Thank you for your attention

[HaydenWelch]

Maybe try using concatenate?

var fields = [
    'Division', 
    'StaffName', 
    'County', 
    'Route', 
    'BeginPM', 
    'EndPM', 
    'AreaCode',
    'CostCenter',
]

var descriptions = []
var field_value
for (var field in fields) {
    field_value = $feature[fields[field]]
    // skip empty values
    if (isEmpty(field_value)) { continue }
    Push(descriptions, `${labelFormat(fields[field])}: ${field_value}`)
}

return {
    'type': 'text', 
    'text': Concatenate(descriptions, br)
}

Edited to use the proper return type for popupElement according to the webmap documentation

[KenBuja · Accepted solution]

The HTML formatting in a text element doesn't get interpreted in the web map. Instead, use an Arcade element to show the HTML

var test = "<b>This is the first line</b><br>This is the second line"
return { 
	type : 'text', 
	text : test //this property supports html tags 
}

 

 

[HaydenWelch]

Huh, I leaned something new today. Is there an API reason for this format?

Edit: I found a blog post that goes into how to create rich text elements in online pop ups. I'm assuming that since the 'type' attribute is set to text that there are other options that you can give to the pop up.

Seems like if you follow that blog series there's a 'media' and 'fields' type as well

here's the full spec from the esri developer docs. 

[YasnaiaMassie]

Hi Hayden,

Thank you so much for your answer.

I still do not know how to incorporate KenBuja snippet.

[HaydenWelch]

Your return type needs to be a dictionary with two keys 'type' and 'text'

The webmap interprets that as a popupElement with the 'type' attribute determining which type of element you want (in your case text) and the properties you want to give to that element (in your case a 'text' property with the value being your html string)

Those resources I linked are full of good examples and explanations!

I've also edited my snippet to use that pattern.

[YasnaiaMassie]

Hi KenBuja,
Thank you so much for your answer.

Could you please give me an example how to incorporate  your code into:

var fields = Schema($feature).fields;
// Function to get alias for a field name
function alias(name) {
for (var f in fields) {
if (Lower(fields[f].name) == Lower(name)) {
return fields[f].alias;
}
}
return name; // fallback if not found
}

// ====== SWITCH HERE ======
// Set to true if HTML is enabled in the pop-up
var useHTML = true;

// Break line type based on mode
var br = IIF(useHTML, "<br>", TextFormatting.NewLine);

// Optional: bold labels in HTML mode
function labelFormat(lbl) {
return IIF(useHTML, "<b>" + lbl + "</b>", lbl);
}

// Build each line only if value exists
var Desc1 = When(IsEmpty($feature.Division), '', labelFormat(alias("Division")) + ": " + $feature.Division);
var Desc2 = When(IsEmpty($feature.StaffName), '', br + labelFormat(alias("StaffName")) + ": " + $feature.StaffName);
var Desc3 = When(IsEmpty($feature.County), '', br + labelFormat(alias("County")) + ": " + $feature.County);
var Desc4 = When(IsEmpty($feature.Route), '', br + labelFormat(alias("Route")) + ": " + $feature.Route);
var Desc5 = When(IsEmpty($feature.BeginPM), '', br + labelFormat(alias("BeginPM")) + ": " + $feature.BeginPM);
var Desc6 = When(IsEmpty($feature.EndPM), '', br + labelFormat(alias("EndPM")) + ": " + $feature.EndPM);
var Desc7 = When(IsEmpty($feature.AreaCode), '', br + labelFormat(alias("AreaCode")) + ": " + $feature.AreaCode);
var Desc8 = When(IsEmpty($feature.CostCenter), '', br + labelFormat(alias("CostCenter")) + ": " + $feature.CostCenter);
// Return concatenated string
return Desc1 + Desc2 + Desc3 + Desc4 + Desc5 + Desc6 + Desc7 + Desc8;