Images in Dashboard List

MichaelFowler1

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 🙂

 

JA7

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
  }
}