I have a table of related work history on a point asset layer. For each point representing an asset, there are multiple related records storing the work history. Here is the Arcade expression I used to display in the pop up.
Note: This only works right now when set up as an Arcade Expression content type, rather than an arcade expression referenced in a Text content type.
// Get the related work orders
var includedFields = ['Type','completion_date','real_price'];
var history = FeatureSetByRelationshipName($feature, 'relationshipName', includedFields);
if (count(history) > 0){
// Get the schema of the WorkOrders table
var woSchema = Schema(history);
// Get the fields from the schema
var fields = woSchema.fields;
// Define an array to store the table headers
var headers = [];
// Loop through the fields and add a header to the array for each one
for (var i in fields) {
var field = fields[i];
if(Includes(includedFields, field.name)) {
Push(headers,'<th style="border: 1px solid #ddd;padding: 8px;background-color: #eee;">' + field.alias + '</th>');
}
}
// Define the HTML table header row
var headerRow = '<tr style="border: 1px solid #ddd;padding: 8px;">' + concatenate(headers) + '</tr>';
// Define an array to store the HTML table rows
var rows = [];
// Loop through each related work order and add an HTML table row to the array
for (var i in history) {
var wo = i;
// Define an array to store the data for the current row
var rowData = [];
// Loop through the fields and add the value of each field to the rowData array
for (var j in fields) {
//Skip Object ID Field
if(fields[j].alias != 'OBJECTID_1') {
Push(rowData, '<td style="border: 1px solid #ddd;padding: 8px;">' + wo[fields[j].name] + '</td>');
}
}
// Concatenate the rowData array into a string with table data tags
var row = '<tr style="border: 1px solid #ddd;padding: 8px;">' + concatenate(rowData) + '</tr>';
// Push the resulting string into the rows array
push(rows, row);
}
// Define the HTML table using the header row and the rows array
var table = '<p><h3>Work History</h3></p><div><table style="font-family: arial, sans-serif;border-collapse: collapse;text-align: left;">' + headerRow + concatenate(rows) + '</table></div>';
// Return the HTML table
return {
type : 'text',
text : table //this property supports html tags
}
//return table;
} else {
return {
type : 'text',
text : '<p><h3>Work History</h3></p><p>No related work history</p>' //this property supports html tags
}
}