Pop-Up Attribute expression related table returning [object Object]

[ScoutStanley]

Hi, I have a pop-up that is needing to reference information from related table. Currently, I have an attribute expression that returns result in the test area (image 1). However, when I click within map it returns [object Object]. Any ideas on how to correct? The end goal is that pop-up will show candidates running for office and their information. 

Image 1

ScoutStanley_0-1686759039865.png

Image 2 

image2.PNG

[JohannesLindner]

The popup can't process a Featureset, only simple data types like text, numbers, or dates. You need to process the Featureset:

var fs = FeaturesetByRelationshipName(...)
var candidates = []
for(var f in fs) {
    var c = `${f.Candidate_Name}, email: ${f.EMail}, office phone: ${f.Phone_Number}`
    Push(candidates, c)
}
return Concatenate(candidates, TextFormatting.NewLine)

[ScoutStanley]

Thank You Johannes!! Question do you know if ArcGIS Online capability is able to add bold to one feature within arcade. Check this post out for clarification https://community.esri.com/t5/mapping-questions/arcade-labeling/td-p/545121. Below is final product, which returns everything I want. However, visually it is messy. Any ideas of using arcade to get cleaner look? 

ScoutStanley_0-1687288346006.png

[JohannesLindner · Accepted solution]

If you use the new Map Viewer, you can use the Arcade Element. Here, you can return HTML that gets interpreted by the popup (as opposed to an Arcade Expression, where HTML won't get interpreted).

JohannesLindner_3-1688283943716.png

Really simple:

var fs = ...

var candidates = []
for(var f in fs) {
    var c = `<strong>${f.Candidate_Name}</strong><br/>Phone: ${f.Phone_Number}<br/>Address: ${f.Address}`
    Push(candidates, c)
}

return { 
    type : 'text', 
    text : Concatenate(candidates, '<br/><br/>')
}

JohannesLindner_0-1688282053214.png

Align phone and address, using a table:

var c = `<strong>${f.Candidate_Name}</strong><table><tr><td>Phone:</td><td>${f.Phone_Number}</td></tr><tr><td>Address</td><td>${f.Address}</td></tr></table>`

JohannesLindner_1-1688282234373.png

Using symbols:

var person_icon = "https://example.com/person.png"
var phone_icon = "https://example.com/phone.png"
var address_icon = "https://example.com/address.png"

//...

    var c = `<table>
    <tr><td><img src="${person_icon}" height=16></td><td><strong>${f.Candidate_Name}</strong></td></tr>
    <tr><td><img src="${phone_icon}" height=16></td><td>${f.Phone_Number}</td></tr>
    <tr><td><img src="${address_icon}" height=16></td><td>${f.Address}</td></tr>
    </table>`

JohannesLindner_2-1688283882520.png

[ScoutStanley]

Johannes,

THANK YOU SO MUCH! I did not realize that is what the Arcade feature could do within pop-up! And thank you for breaking down how to do it. This helped me so much in understanding html, arcade, and how to piece them together! Very excited to understand this new feature within the new map viewer. 

Scout