HTML Formatting within an Arcade Expression

Question

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: "Data Source Name: " +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

CMV_Erik · Answer

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 
}

PeterMilenkovic · Answer

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

MarkChappell · Answer

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 ' + $feature.RPL_THEMES + ' putting it into the ' + percentile + suffix + ' percentile.

'}; 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!