Formatting an Arcade Expression for Popup in Grid/Table Format

AllisonWebb — Fri, 30 Aug 2024 15:15:01 GMT

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;

Re: Formatting an Arcade Expression for Popup in Grid/Table Format

ArmstKP — Fri, 30 Aug 2024 15:36:01 GMT

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

Re: Formatting an Arcade Expression for Popup in Grid/Table Format

AllisonWebb — Fri, 30 Aug 2024 16:04:55 GMT

Thank you! I will work with this. 😊

Re: Formatting an Arcade Expression for Popup in Grid/Table Format

ArmstKP — Fri, 30 Aug 2024 16:10:58 GMT

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

topic Re: Formatting an Arcade Expression for Popup in Grid/Table Format in ArcGIS Online Questions

Formatting an Arcade Expression for Popup in Grid/Table Format

Re: Formatting an Arcade Expression for Popup in Grid/Table Format

Re: Formatting an Arcade Expression for Popup in Grid/Table Format

Re: Formatting an Arcade Expression for Popup in Grid/Table Format