Calculating custom HTML tables by feature for AGOL popups

Question

I am working on a project that has all of the stops in a bus system. Each stop can serve more than one route and I have broken down ridership by route in each of the columns with a total route ridership, route boardings and route alightings. This data was an object that I transferred to a table. So there is a lot of fields that are 0 since that particular stop is not serving that route.

Each of these data fields have a standard field formula.

• total route ridership = 'R_{route}'
• total route boardings = 'R_{route}_BRD'
• total route alightings = 'R_{route}_ALT'

In the table there is a list of routes separated by ', ' and I am using this to build a list in a for loop to create an html table. I have tried a couple of different methods to no avail to produce something that AGOL or Arcade finds acceptable.

Method 1: Arcade loop for building HTML

When Arcade outputs html it does not form a table

Method 2: Python loop for building Arcade

The first thing that I tried was building a Python script that would automate some arcade HTML and then used the field in a calculated field by just using return $feature.html

def htmlTable(routes):
list = routes.split(', ')
html = '<table><tbody><tr><th>Route</th><th>Total Ridership</th><th>Avg Board</th><th>Avg Alight</th></tr>'
for route in list: 
 html += '<th>' + route + '</th>"'
 html += '<th>+' + f'$feature.R_{route}' + '+</th>'
 html += '<th>+' + f'$feature.R_{route}_BRD' + '+</th>'
 html += '<th>+' + f'$feature.R_{route}_ALT' + '+</th></tr>'
html += '</tbody></table>'
return html

Method 1: Python loop for building HTML

When I put this together I am able to get the html formatting, but the popup ignores my attempt to call fields with Arcade.

AGOL failed popup

def htmlTable(routes):
list = routes.split(', ')
html = '<table><tr><th>Route</th><th>Total Ridership</th><th>Avg Board</th><th>Avg Alight</th></tr>'
for route in list: 
 html += '<tr><th>' + route + '</th>'
 html += '<th>{' + f'R_{route}' + '}</th>'
 html += '<th>{' + f'R_{route}_BRD' + '}</th>'
 html += '<th>{' + f'R_{route}_ALT' + '}</th></tr>'
html += '</table>'
return html

Answer 1

I was able to figure this out by just using ArcGIS JavaScript API using a generic function. To build out the popup.

const ridershipPopup = (feature) => {
 let routes = feature.graphic.attributes.RouteList;
 let list = routes.split(', ');
 let filterList = [];
 let obj = '';
 for(let i in list){
 if(!filterList.includes(list[i])){
 filterList.push(list[i]);
 }
 }
 for(let i in filterList){
 obj += 'Route: ' + filterList[i] + '<br>' + `Total Ridership: {R_${filterList[i]}}` + '<br>' + `Average Board: {R_${filterList[i]}_BRD}` + '<br>' + `Average Alight: {R_${filterList[i]}_ALT}` + '<br>';
 };
 return obj
};

Then I ended up calling the function in FeatureLayer:

 const stops = new FeatureLayer({
 url: 'url',
 popupTemplate: {
 title: 'Stop ID: {stop_id}',
 // ! CALCULATE OUT POPUP TEMPLATE
 content: ridershipPopup,
 },
 outFields: ['*'],
 });