Select to view content in your preferred language

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

1034
4
Jump to solution
06-14-2023 09:13 AM
Labels (2)
ScoutStanley
New Contributor III

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

 

1 Solution

Accepted Solutions
JohannesLindner
MVP Frequent Contributor

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

 


Have a great day!
Johannes

View solution in original post

4 Replies
JohannesLindner
MVP Frequent Contributor

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)

 


Have a great day!
Johannes
0 Kudos
ScoutStanley
New Contributor III

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

 

0 Kudos
JohannesLindner
MVP Frequent Contributor

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

 


Have a great day!
Johannes
ScoutStanley
New Contributor III

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