Arcade Expression with HTML, TextFormating.NewLine doesn't work ?

JasonBOCQUET

Hello, I have an attribute expression like this :

var transactions = FeatureSetByRelationshipName($feature,"SDE.TRANSACTIONS")
//return transactions
 
// Build the pop-up string by iterating through all related features
var info = ''
for (var f in transactions){
    info += "ID : " + DefaultValue(f.TRA_ADR_ID, 'no data') + TextFormatting.NewLine +
        "Nom immeuble : " +
        DefaultValue(f.TRA_NOM_IMMEUBLE, 'no data') + TextFormatting.NewLine +
        "Montant : " + 
        DefaultValue(f.TRA_MONTANT, 'no data') + TextFormatting.NewLine +
        "Acquéreur : " +
        DefaultValue(f.TRA_ACQUEREUR, 'no data') + TextFormatting.NewLine + TextFormatting.NewLine 
}
iif(isempty(info),'Pas de transactions','Transactions utilisateurs :'+TextFormatting.NewLine +TextFormatting.NewLine+info)

 

and it returns me that :

 

It's good for me but i want to improve my pop-up windows with some HTML.

 

So I try this code (it's only a short part of the code) :

 

var transactions = FeatureSetByRelationshipName($feature,"SDE.TRANSACTIONS")
var info = ''
for (var f in transactions){
    info += "ID : " + DefaultValue(f.TRA_ADR_ID, 'no data') + TextFormatting.NewLine +
       "Nom immeuble : " +
        DefaultValue(f.TRA_NOM_IMMEUBLE, 'no data') + TextFormatting.NewLine +
        "Montant : " + 
        DefaultValue(f.TRA_MONTANT, 'no data') + TextFormatting.NewLine +
        "Acquéreur : " +
        DefaultValue(f.TRA_ACQUEREUR, 'no data') + TextFormatting.NewLine + TextFormatting.NewLine
}


HTML += "<p style='text-align: left;'><span style='font-size: 16px; font-family: Calibri, sans-serif;'>"+"<strong>"+iif(isempty(info),'Pas de transactions',TextFormatting.NewLine +TextFormatting.NewLine+info)+"</strong></span></p>"

 

But it returns me this :

 

It seems that the TextFormatting.NewLine constants do not work in the arcade window but only in the attribute expressions window? Or did I make a mistake in my code?

 

ZachBodenner

One of the utilities of the backticks is so that you don't actually need to rely on textformatting etc.

https://developers.arcgis.com/arcade/guide/template-literals/#:~:text=Template%20literals%20can%20contain%20placeholders,easier%20text%20manipulation%20in%20Arcade.

https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/manage-your-strings-quite-literally-with-arcade-1-11/

Here are some ESRI provided resources that can provide a little more info.

 

And here's one more example of using the backticks to make writing HTML returns a bit easier

//set variables. First variable is the unique ID that is shared by the primary and related data. Second variable is calling the related forms as a FeatureSet
 
var treeGlobal = $feature.GlobalID;
var relatedForms = FeatureSetByName($map, "Tree Inventory Form")

//create a filter statement where the maintenance form GUID = the Tree Inventory GlobalID

var filterStatement = "TreeInv_Rel = @treeGlobal"

//a maintenance form equals the table run through the filter
 
var inspForm = Filter(relatedForms, filterStatement)

console (inspForm)

if (isEmpty(inspForm)) {
  var title = ``
}

else if (!isEmpty(inspForm)) {
  var title = `<div style="text-align:center"><b>Inspection Records</b></div><br>` 
}
// Sort related features by oldest to newest
var relatedDataSorted = OrderBy(inspForm, 'Date ASC')
 
// Build the pop-up string by iterating through all related features. Add or subtract new lines in the popupString as needed from the related form.
var popupString = ''
for (var f in relatedDataSorted){
    
    popupString += 
        `<div style="text-align:center"><b>${Text(f.Date, 'MMMM DD, Y')}</b></div><br>    
        <b>Maintenance Performed: </b>${DefaultValue(f.Maintenance_Performed, 'No maintenance performed')}<br>

        <b>Maintenance Performed by: </b>${DefaultValue(f.Performed_By, 'No maintenance performed')}<br>

        <b>Condition:  </b>${DefaultValue(f.Condition, 'Condition not assessed')} <br>

        <b>Chemical Used (if any): </b>${DefaultValue(f.Chemical_Treatment, 'No chemical treatment')} <br>

        <b>Amount Used (if any): </b>${DefaultValue(f.Chemical_Qty_ML, 'No chemical treatment')} <br>
              
        <b>Notes: </b>${DefaultValue(f.Notes, 'No notes')}<br><br>
        `
 
}

return { 
	type : 'text', 
	text : `${title} 
  ${popupString}`
}

 

You'll notice the backticks enclose my final popupstring variable and I just include an extra <br> tag at the end of the loop. That way, multiple related record come in with some breathing room between each.