HTML Formatting within an Arcade Expression

[DJB]

I have a feature service that identifies where we have soils data / resources.  I have a related table that provides details to all of those resources.  I am trying to configure the pop-up so that all the details appear when a user clicks on a polygon.  The code that I use is included below:

var tbl = OrderBy(FeatureSetById($datastore, "1"), 'Data_Source_Type DESC');

var primarykey = $feature.GlobalID;

var sql = "ParentGlobalID = '" + primarykey + "'";

Console(sql);

var relatedrecords = Filter(tbl, sql);

var popupString = ''

for (var f in relatedrecords){

    popupString +=

        "Data Source Name: " +

        f.Data_Source_Name + TextFormatting.NewLine +

        "Data Source Type: " +

        f.Data_Source_Type + TextFormatting.NewLine +

        "National Soil Database ID: " +

        DefaultValue(f.NSDB_ID, 'N/A') + TextFormatting.NewLine +

        "Soils Report Number: " +

        DefaultValue(f.Soils_Report_Num, 'N/A') + TextFormatting.NewLine +

        "Year Soils Report was Published: " +

        f.Publishing_Year + TextFormatting.NewLine +

        "Mapping Scale: " +

        f.Mapping_Scale + TextFormatting.NewLine +

        "Metadata URL: " +

        f.Metadata_URL + TextFormatting.NewLine +

        "Data Download URL: " +

        f.Data_Download_URL + TextFormatting.NewLine +

        TextFormatting.NewLine

}

return popupString;

It gives me exactly what I want.  The only thing missing is some formatting.

For example, I would really like to have the field headings bolded and have my hyperlinks displayed properly.

I've looked into Arcade Pop-up content elements but am unfortunately struggling to wrap my head around it.

In a perfect world I would love to just be able to use code as follows:

<b>"Data Source Name: " </b> +

f.Data_Source_Name + TextFormatting.NewLine +

But I know that's not how it works.

If anyone could provide me with some guidance or additional resources I would greatly appreciate it.

Thanks everyone.

~Dan

[MarkChappell]

So, looking at this, I believe the issue is that your HTML could be inside of the text quotes.

So a correction to your code would be:

"<b>Data Source Name: </b>" +

f.Data_Source_Name + TextFormatting.NewLine +

[DJB]

@MarkChappell Thank you for your response.

Unfortunately it does not recognize the HTML tags.  It treats it a regular text.

var popupString = ''

for (var f in relatedrecords){

    popupString +=

        "<b>Data Source Name: </b>" +

        f.Data_Source_Name + TextFormatting.NewLine +

[MarkChappell]

Ohhhh okay. I ran into this issue previously, and ended up choosing the messier solution. Instead of using a single expression, I added multiple content attributes (a variety of switching back and forth from Text to Arcade). 

This is what I ended up doing for the solution: 

var percentile = Round($feature.RPL_THEMES * 100, 0);

var suffix = '';

if (percentile != 11 && percentile != 12 && percentile != 13) {

    var lastDigit = percentile % 10;

    if (lastDigit == 1) {

        suffix = 'st';

    } else if (lastDigit == 2) {

        suffix = 'nd';

    } else if (lastDigit == 3) {

        suffix = 'rd';

    } else {

        suffix = 'th';

    }

}

return {

    type: 'text',

    text: 'This Census Tract has a Social Vulnerability Index (SVI) score of <b>' +

        $feature.RPL_THEMES + '</b> putting it into the <b>' +

        percentile + suffix + '</b> percentile.<br><br>'

};

 It ended up with the following results.

Not sure if this is the solution that you're looking for, but it is at least, a solution.

Hope this helps!

[PeterMilenkovic]

In the return you can reference the popupString variable, you dont have to construct your string there. This is handy if you use loops to construct stings.

return {
    type: 'text',
    text: popupString
};

Cheers

Peter

[CMV_Erik]

It took me some doing to understand the requirements, but I've found two different approaches using Arcade elements (as opposed to Text elements): 

One is just to build an HTML text string. You can create the formatting using an HTML table, so label is column 1 and value is column 2. A bit of extra work, but does allow you do do things like add <b> tags only where you want

To get a popup with the default formatting, use the fieldInfos method (the fields type). After a lot of trial and error, I think I understand it: 

• fieldInfos should be an Array of Dictionaries that define the field names (and optionally, alias) using the supported format.
• attributes should be a Dictionary where the keys are the field names, and the values are the values from the feature.
• You could think of fieldInfos as defining the first column, and attributes defining the second column.  I assume the fieldnames MUST match; at the very least, I've never tried any other way.
• Example (I have an open support case relevant to the first two lines, but it shouldn't affect the $feature.fieldname format you're using):

//Fields pulled using the $feature['fieldname'] format but aren't explictly referenced using the $feature.fieldname format may not appear. Including them as the line below appears to solve the problem, even if they don't appear in the popup
$feature.Creator


var flds = ['OBJECTID','Category', 'Creator'];
var info = [];
var atts = {};

for (var i in flds) {
    var fldname = flds[i];
    Push (info, {'fieldName': fldname}) 
    atts[fldname] = $feature[fldname];
}

return {
    type: 'fields',
    title: 'My Title', 
    description : 'My description',
    fieldInfos:  info,
    attributes : atts 
}