Hello all,
I'm trying to display multiple images in the dashboard list to correlate with a field in the layer. For example, I have a field ' Threat', this will have three different options for the end users to select 'Low, 'Medium' and 'High'. I have a custom field using arcade expression to then get the correct image:
if ($feature.threat == 'Low') {
return 'IMAGE URL'
}
else if ($feature.threat == 'Medium') {
return 'IMAGE URL'
}
else if ($feature.threat == 'High') {
return 'IMAGE URL'
}
I've then tried to use the custom field in Dashboard list using both of the below HTML image tags:
<p>Test 1</p>
<p><img src="{expression/expr0}" /></p>
<p>Test 2</p>
<p><img alt="" src="{expression/expr0}" /></p>
The above gets me the below output. If I use the actual image URL it works, but this doesn't work overall due to the different features having different values.
Any help with this would be really appreciate 🙂
Solved! Go to Solution.
That is not the correct Return statement for a list. You need to use the default one provided when you open Advanced formatting. You might want to check out Dashboards That Pop: Arcade for a rundown on the various Advanced formatting options available in ArcGIS Dashboards.
The latest Dashboard update has changed how it handles HTML, I would recommend that you return the HTML you want in your Arcade statement, so that Dashboards doesn't alter it.
var month = $datapoint.MONTH_NAME
var img = When(month == 'May', '<p><img src="https://images.unsplash.com/photo-1556764900-61987c92731d" /></p>',
month == 'June', '<p><img src="https://images.unsplash.com/photo-1559881231-1010b6f3a96a" /></p>',
'<p><img src="https://images.unsplash.com/photo-1435527173128-983b87201f4d" /></p>')
return {
textColor: '',
backgroundColor: '',
separatorColor:'',
selectionColor: '',
selectionTextColor: '',
attributes: {
img:img
}
}
That is not the correct Return statement for a list. You need to use the default one provided when you open Advanced formatting. You might want to check out Dashboards That Pop: Arcade for a rundown on the various Advanced formatting options available in ArcGIS Dashboards.
The latest Dashboard update has changed how it handles HTML, I would recommend that you return the HTML you want in your Arcade statement, so that Dashboards doesn't alter it.
var month = $datapoint.MONTH_NAME
var img = When(month == 'May', '<p><img src="https://images.unsplash.com/photo-1556764900-61987c92731d" /></p>',
month == 'June', '<p><img src="https://images.unsplash.com/photo-1559881231-1010b6f3a96a" /></p>',
'<p><img src="https://images.unsplash.com/photo-1435527173128-983b87201f4d" /></p>')
return {
textColor: '',
backgroundColor: '',
separatorColor:'',
selectionColor: '',
selectionTextColor: '',
attributes: {
img:img
}
}
Hey Jen,
That works perfectly thank you! I just have one more question: using the attribute for the image works when im trying to load one image in, but if i try load a second image in I get the error: 'Unable to parse script. Check your syntax'. Is it possible to have multiple images this way?
You are missing a comma after your first attribute.
attributes: {
threat_img:threat_img,
logistics_img:logistics_img
}
I can't believe I missed that one...really appreciate the assitance! I've marked you original reply as the solution.
I do have one more question though,is it possible to realign the picture to be horizontal instead of vertical? A way I've found is to create a table and to put the expression in each column/row - obviously this is finiky and not ideal. I did try using a HTML/CSS method I found here (How To Align Images Side By Side (w3schools.com)) but the 'Source' added the HTML <p></p> tags aroiund the CSS element. My hope is to have something like the below (happy for the table if its the easiest/only way)