pass arcade to html popup

Question

I am trying to build a popup in an ArcGIS Online map that displays fire district contact information using Arcade and HTML. My Arcade script successfully retrieves and formats the data, but I want to link it to the HTML table for a cleaner, structured display. Is this possible? Arcade // Debugging: Trim whitespace and standardize case for comparison var fireDistValue = Upper(Trim($feature.FireDist)); // Define contact information for Fire var Contact1 = { name: "xyzxy xyzxy", phone: "xyz-xyz-xyzx", email: "xyz@xyzxyz.xyz", address: "xyz xyzxyzxy, xyzxyz, xy xyzxy" }; var Contact2 = { name: "xyzxy xyzxy", phone: "xyz-xyz-xyzx", email: "xyz@xyzxyz.xyz", address: "xyz xyzxyzxy, xyzxyz, xy xyzxy" }; // Function to format contact details function formatContact(contact) { return "Contact: " + contact.name + " Phone: " + contact.phone + " Email: " + contact.email + " Address: " + contact.address; } // Initialize result string var result = "Fire District: " + fireDistValue + " "; // Check the fire district and append the appropriate contact info if (fireDistValue == "FIRE") { result += formatContact(Contact1) + " " + formatContact(Contact2); } else { result += "No contact information available for this Fire District."; } // Return the result return result; html table style="border-collapse: collapse; width: 100%;"> Fire District Contact Name Phone Email Address ${FireDist} ${ContactName1} ${Phone1} ${Email1} ${Address1} ${ContactName2} ${Email2} ${Address2}

2Quiker · Answer

Thanks for the HTML tips, I made the adjustments you suggested, but nothing gets populated in the columns except for the Fire District column. I am still in Classic Map Viewer because we are still on an older version that doesn't have the "Source" button in the New Map Viewer. Current HTML

Fire District	Contact Name	Phone	Email	Address
{FireDist}	{ContactName1}	{Phone1}	{Email1}	{Address1}
	{ContactName2}		{Email2}	{Address2}

Current Arcade code, // Debugging: Trim whitespace and standardize case for comparison var fireDistValue = Upper(Trim($feature.FireDist)); // Define contact information for Fire var Contact1 = { name: "xyz", phone: "xyzx", email: "xyz", address: "xyzxy" }; var Contact2 = { name: "xyz", phone: "xyzx", email: "xyzx", address: "xyzxy" }; // Function to format contact details function formatContact(contact) { return "Contact: " + contact.name + " Phone: " + contact.phone + " Email: " + contact.email + " Address: " + contact.address; } // Initialize result string var result = "Fire District: " + fireDistValue + " "; // Check the fire district and append the appropriate contact info if (fireDistValue == "xyzx xyzx FIRE") { result += formatContact(Contact1) + " " + formatContact(Contact2); } else { result += "No contact information available for this Fire District."; } // Return the result return result; FireArcGisOnline.png Screenshot_021021_100429_AM.jpg

evtguy · Answer

One thing I noticed today that I didn't previously is that your HTML table code is missing the preceding less than symbol ( the < ) before the "table" tag which would break the HTML interpretation for the popup. Your HTML table code should be this:

Fire District	Contact Name	Phone	Email	Address
{FireDist}	{ContactName1}	{Phone1}	{Email1}	{Address1}
	{ContactName2}		{Email2}	{Address2}

Also, because I'm not seeing it in your latest post, I'll just point out that when using the table HTML element, you also need to include the rows element (the object) and cell data elements (the object) inside the

tags. This is what gives it that nice, structured look. Lastly, your screenshot looks like the Classic Map Viewer rather than the New Map Viewer. They should be basically the same but there's always a chance that there is difference. I have stopped using the classic map viewer in my projects but perhaps you have reasons to continue its use.

2Quiker · Answer

I clicked on the "Source" button and pasted the HTML code block, Click the source button once again. My expression name is Custom{expression/expr13} table style="border-collapse: collapse; width: 100%;"> Fire District Contact Name Phone Email Address {FireDist} {ContactName1} {Phone1} {Email1} {Address1} {ContactName2} {Email2} {Address2} I get , table style="border-collapse: collapse; width: 100%;"> Fire District Contact Name Phone Email Address xyzx xyzx FIRE I can do {expression/expr8} {expression/expr13} But it puts all the info in both columns, it's not being separated out. FireArcGisOnline.png Screenshot_4.png