pass arcade to html popup

[2Quiker]

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 + 
           "\nPhone: " + contact.phone + 
           "\nEmail: " + contact.email + 
           "\nAddress: " + contact.address;
}

// Initialize result string
var result = "Fire District: " + fireDistValue + "\n\n";

// Check the fire district and append the appropriate contact info
if (fireDistValue == "FIRE") {
    result += formatContact(Contact1) + "\n\n" + 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%;">
    <tbody>
        <tr>
            <th style="border: 1px solid #ddd; padding: 8px;">Fire District</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Contact Name</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Phone</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Email</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Address</th>
        </tr>
        <tr>
            <td style="border: 1px solid #ddd; padding: 8px;">${FireDist}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">${ContactName1}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">${Phone1}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">${Email1}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">${Address1}</td>
        </tr>
        <tr>
            <td style="border: 1px solid #ddd; padding: 8px;"></td>
            <td style="border: 1px solid #ddd; padding: 8px;">${ContactName2}</td>
            <td style="border: 1px solid #ddd; padding: 8px;"></td>
            <td style="border: 1px solid #ddd; padding: 8px;">${Email2}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">${Address2}</td>
        </tr>
    </tbody>
</table>

[SteveCole]

You absolutely can do this. In the Popup options, add a text component and enter the editor. Click the "Source" button and then paste in your HTML clock block. Click the Source button once again to go back to "normal" edit mode & click ok. You don't need the dollar sign stuff in the HTML code block. Just put the field names (or expression names) within the curly brackets {}

[2Quiker]

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

 <td rowspan="2" style="border: 1px solid #ddd; padding: 8px;">{expression/expr8}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">{expression/expr13}</td>

But it puts all the info in both columns, it's not being separated out.

[SteveCole]

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:

<table style="border-collapse: collapse; width: 100%;">
    <tbody>
        <tr>
            <th style="border: 1px solid #ddd; padding: 8px;">Fire District</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Contact Name</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Phone</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Email</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Address</th>
        </tr>
        <tr>
            <td style="border: 1px solid #ddd; padding: 8px;">{FireDist}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">{ContactName1}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">{Phone1}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">{Email1}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">{Address1}</td>
        </tr>
        <tr>
            <td style="border: 1px solid #ddd; padding: 8px;"></td>
            <td style="border: 1px solid #ddd; padding: 8px;">{ContactName2}</td>
            <td style="border: 1px solid #ddd; padding: 8px;"></td>
            <td style="border: 1px solid #ddd; padding: 8px;">{Email2}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">{Address2}</td>
        </tr>
    </tbody>
</table>

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 <TR> object) and cell data elements (the <TD> object) inside the <table></table> 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]

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

<table style="border-collapse: collapse; width: 100%;">
    <tbody>
        <tr>
            <th style="border: 1px solid #ddd; padding: 8px;">Fire District</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Contact Name</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Phone</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Email</th>
            <th style="border: 1px solid #ddd; padding: 8px;">Address</th>
        </tr>
        <tr>
            <td style="border: 1px solid #ddd; padding: 8px;">{FireDist}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">{ContactName1}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">{Phone1}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">{Email1}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">{Address1}</td>
        </tr>
        <tr>
            <td style="border: 1px solid #ddd; padding: 8px;"></td>
            <td style="border: 1px solid #ddd; padding: 8px;">{ContactName2}</td>
            <td style="border: 1px solid #ddd; padding: 8px;"></td>
            <td style="border: 1px solid #ddd; padding: 8px;">{Email2}</td>
            <td style="border: 1px solid #ddd; padding: 8px;">{Address2}</td>
        </tr>
    </tbody>
</table>

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 + 
           "\nPhone: " + contact.phone + 
           "\nEmail: " + contact.email + 
           "\nAddress: " + contact.address;
}

// Initialize result string
var result = "Fire District: " + fireDistValue + "\n\n";

// Check the fire district and append the appropriate contact info
if (fireDistValue == "xyzx xyzx FIRE") {
    result += formatContact(Contact1) + "\n\n" + formatContact(Contact2);
} else {
    result += "No contact information available for this Fire District.";
}

// Return the result
return result;