Formatting an Arcade Expression for Popup in Grid/Table Format
77
3
15 hours ago
by
Hello - I need some help with formatting a popup. I want to display my data in a grid format. I'm using the below Arcade expression. How do I add the formatting? I'm new at Arcade and I've tried to find examples online, but not having any luck.
The current result is:
Want:
var harvestLayer = FeatureSetByName($map, "Harvest Tracking v4 Analysis View");
var currentFeatureID = $feature.UCode;
var relatedRecords = Filter(harvestLayer, "BlockCode = @currentFeatureID");
var result = "";
for (var record in relatedRecords) {
var sampleBlockName = record.SampleBlockName;
var sampleDate = Text(record.SampleDate, "MM/DD/YYYY");
var brix = record.Brix;
result += sampleBlockName + " " + sampleDate + " " + brix + TextFormatting.NewLine;
}
// Return the result
return result;
by
@AllisonWebb Here is an example that we use, hopefully you can pull from it what you would need:
Here is the resulting popup:
Code:
<div style="background-color:{expression/expr0};color:#FFFFFF;padding:7px;text-align:center;">
<span style="font-size:medium;">{expression/expr1}</span>
</div>
<figure class="table" style="width:100%;">
<table style="border-collapse:collapse;font-family:arial, sans-serif;text-align:left;">
<tbody>
<tr style="background-color:#eee;">
<td style="border:1px solid #ddd;padding:8px;">
Fountain Type
</td>
<td style="border:1px solid #ddd;padding:8px;">
{Type}
</td>
</tr>
<tr>
<td style="border:1px solid #ddd;padding:8px;">
Dog Dish
</td>
<td style="border:1px solid #ddd;padding:8px;">
{dog_dish}
</td>
</tr>
<tr style="background-color:#eee;">
<td style="border:1px solid #ddd;padding:8px;">
Spout
</td>
<td style="border:1px solid #ddd;padding:8px;">
{spout_type}
</td>
</tr>
<tr>
<td style="border:1px solid #ddd;padding:8px;">
Last Update
</td>
<td style="border:1px solid #ddd;padding:8px;">
{expression/expr2}
</td>
</tr>
</tbody>
</table>
</figure>by
by
@AllisonWebb This example is a little more advanced, but I thought you could use this example to build out yours. You have to add this code with the Arcade popup element:
Resulting popup:
Code:
// Function to get background color and text color based on status
function getBackgroundColorAndTextColor(status) {
var color = iif(status == "Open", "#2DA13C",
iif(status == "Closed" || status == "Closed Bacteria Levels", "#FF0000", "#FFB22E"));
return {
backgroundColor: color,
textColor: "#FFFFFF" // Default to white text
};
}
// Get colors for the status
var colors = getBackgroundColorAndTextColor($feature.status);
// Define the header text
var headerText = "Pool/Splash Pad is " + Text($feature.status);
// Get the GlobalId of the selected feature
var globalId = $feature.GlobalId;
// Create a FeatureSet from the related records service
var relatedRecords = FeatureSetByPortalItem(
Portal("https://www.arcgis.com"),
"XXXXXXXXXXXXXXXXXXXX",
0,
["*"] // Retrieve all fields
);
// Filter the related records by matching the GlobalId
var filteredRecords = Filter(relatedRecords, "relfeatureglobalid = @globalId");
// Sort the filtered records by sample_date in descending order
var sortedRecords = OrderBy(filteredRecords, 'sample_date DESC');
// Limit to the last three records
var lastThreeRecords = Top(sortedRecords, 3);
// Initialize a string to build the formatted output
var rows = "";
var recordCount = Count(lastThreeRecords);
// Loop through each of the last three records and build the output string
if (recordCount > 0) {
for (var record in lastThreeRecords) {
// Check if the status is "Not Acceptable" and set the background color accordingly
var rowBackgroundColor = "";
if (record.status == "Not Acceptable") {
rowBackgroundColor = "background-color: #FBDCDC;";
}
rows += "<tr style='" + rowBackgroundColor + "'>";
rows += "<td style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>" + Text(record.sample_date, 'MMM D Y') + "</td>";
rows += "<td style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>" + record.ecoli + "</td>";
rows += "<td style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>" + record.enterococci + "</td>";
rows += "<td style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>" + record.p_aeruginosa + "</td>";
rows += "<td style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>" + record.water_temp + "°F" + "</td>";
rows += "<td style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>" + record.status + "</td>";
rows += "</tr>";
}
}
// Combine all parts into a single HTML string
var popupContent = "<div style='display: flex; align-items: center; margin-bottom: 10px;'>";
popupContent += "<img src='https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/google-map-icon.png' alt='Google Maps' style='width: 20px; height: 20px; margin-right: 5px;'/>";
popupContent += "<a href='https://www.google.com/maps/dir/?api=1&destination={expression/expr3},{expression/expr4}' target='_blank'>Google Maps Directions</a>";
popupContent += "</div>";
popupContent += "<h3 style='text-align:center; background-color: " + colors.backgroundColor + "; color: " + colors.textColor + "; padding: 7px;'>" + headerText + "</h3>";
popupContent += "<div style='padding: 7px;'>";
popupContent += "<table style='width:100%; border-collapse: collapse; font-family:arial, sans-serif;'>";
popupContent += "<tbody>";
popupContent += "<tr style='background-color:#eee;'><td style='border: 1px solid lightgrey; padding: 8px;'>Pool Type</td><td style='border: 1px solid lightgrey; padding: 8px;'>" + $feature.Pool_Type + "</td></tr>";
if ($feature.status != "Open") {
popupContent += "<tr><td style='border: 1px solid lightgrey; padding: 8px;'>Explanation for Closure</td><td style='border: 1px solid lightgrey; padding: 8px;'>" + $feature.public_explanation + "</td></tr>";
popupContent += "<tr style='background-color:#eee;'><td style='border: 1px solid lightgrey; padding: 8px;'>Last Status Change</td><td style='border: 1px solid lightgrey; padding: 8px;'>" + Text($feature.LastDateInspected, 'MMM D Y, h:mm A') + "</td></tr>";
} else {
popupContent += "<tr><td style='border: 1px solid lightgrey; padding: 8px;'>Last Status Change</td><td style='border: 1px solid lightgrey; padding: 8px;'>" + Text($feature.LastDateInspected, 'MMM D Y, h:mm A') + "</td></tr>";
}
popupContent += "</tbody>";
popupContent += "</table>";
popupContent += "</div>";
// Check if there are related records before adding the water quality data section
if (recordCount > 0 && rows != "") {
popupContent += "<br><hr style='margin: 10px 0; border: 0; border-top: 1px solid #FF0000;'>"; // Ensure the color change here
popupContent += "<h3 style='text-align:center; color: #000000; font-size: 16px; padding: 7px; margin-top: 0;'>Water Quality Data</h3>";
popupContent += "<div style='text-align:center; margin-top: 10px;'><a href='https://www.minneapolisparks.org/activities-events/water-activities/webber_natural_swimming_pool/' target='_blank'>Bacteria Levels Explanation (select the water quality tab)</a></div>";
popupContent += "<div style='padding: 7px;'>";
popupContent += "<table style='width:100%; border-collapse: collapse; font-family:arial, sans-serif;'>";
popupContent += "<thead>";
popupContent += "<tr style='background-color:#eee; color:#000;'><th style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>Sample Date</th><th style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>E. coli (mpn)</th><th style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>Enterococci (mpn)</th><th style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>P. aeruginosa (mpn)</th><th style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>Water Temp</th><th style='border: 1px solid lightgrey; padding: 8px; font-size: 12px;'>Status</th></tr>";
popupContent += "</thead>";
popupContent += "<tbody>";
popupContent += rows;
popupContent += "</tbody>";
popupContent += "</table>";
popupContent += "</div>";
}
// Add download links for the specific GlobalIds
var downloadLinks = {
"{073B88FB-1C1B-4DD2-A29F-F37F781B1DFE}": "https://www.arcgis.com/sharing/rest/content/items/975ba2b7a6be4189be97472852054c0b/data",
"{46BF0FBE-5887-4201-BC1E-65C0008EBDD5}": "https://www.arcgis.com/sharing/rest/content/items/4be02c90557a4132bb622153461ff8f1/data"
};
if (HasKey(downloadLinks, globalId)) {
popupContent += "<div style='text-align:center; margin-top: 10px;'><a href='" + downloadLinks[globalId] + "' target='_blank'>Download This Year's Water Quality Data (CSV)</a></div>";
}
return {
"type": "text",
"text": popupContent
};
