Formatting an Arcade Expression for Popup in Grid/Table Format

Question

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;

ArmstKP · Answer

@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 += ""; rows += "" + Text(record.sample_date, 'MMM D Y') + ""; rows += "" + record.ecoli + ""; rows += "" + record.enterococci + ""; rows += "" + record.p_aeruginosa + ""; rows += "" + record.water_temp + "°F" + ""; rows += "" + record.status + ""; rows += ""; } } // Combine all parts into a single HTML string var popupContent = "

"; popupContent += "

"; popupContent += "Google Maps Directions"; popupContent += "

"; popupContent += "

" + headerText + "

"; popupContent += "

"; popupContent += ""; popupContent += ""; popupContent += ""; if ($feature.status != "Open") { popupContent += ""; popupContent += ""; } else { popupContent += ""; } popupContent += ""; popupContent += "

Pool Type	" + $feature.Pool_Type + "
Explanation for Closure	" + $feature.public_explanation + "
Last Status Change	" + Text($feature.LastDateInspected, 'MMM D Y, h:mm A') + "
Last Status Change	" + Text($feature.LastDateInspected, 'MMM D Y, h:mm A') + "

"; popupContent += "

"; // Check if there are related records before adding the water quality data section if (recordCount > 0 && rows != "") { popupContent += "

"; // Ensure the color change here popupContent += "

Water Quality Data

"; popupContent += "

Bacteria Levels Explanation (select the water quality tab)

"; popupContent += "

"; popupContent += ""; popupContent += ""; popupContent += ""; popupContent += ""; popupContent += ""; popupContent += rows; popupContent += ""; popupContent += "

Sample Date	E. coli (mpn)	Enterococci (mpn)	P. aeruginosa (mpn)	Water Temp	Status

"; popupContent += "

"; } // 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 += "

Download This Year's Water Quality Data (CSV)

"; } return { "type": "text", "text": popupContent };

AllisonWebb · Answer

Thank you!  I will work with this. 😊

ArmstKP · Answer

@AllisonWebb Here is an example that we use, hopefully you can pull from it what you would need: Here is the resulting popup: Code:

{expression/expr1}

Fountain Type	{Type}
Dog Dish	{dog_dish}
Spout	{spout_type}
Last Update	{expression/expr2}