topic Re: HTML Formatting within an Arcade Expression in ArcGIS Online Questions

HTML Formatting within an Arcade Expression

DJB — Mon, 26 Jun 2023 18:41:36 GMT

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

Re: HTML Formatting within an Arcade Expression

MarkChappell — Mon, 26 Jun 2023 20:09:13 GMT

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:

"Data Source Name: " +

f.Data_Source_Name + TextFormatting.NewLine +

Re: HTML Formatting within an Arcade Expression

DJB — Mon, 26 Jun 2023 20:17:48 GMT

@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 +=

"Data Source Name: " +

f.Data_Source_Name + TextFormatting.NewLine +

Re: HTML Formatting within an Arcade Expression

MarkChappell — Mon, 26 Jun 2023 20:34:19 GMT

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!

Re: HTML Formatting within an Arcade Expression

PeterMilenkovic — Mon, 26 Jun 2023 23:14:37 GMT

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

Re: HTML Formatting within an Arcade Expression

CMV_Erik — Mon, 26 Jun 2023 23:30:59 GMT

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 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 }