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 🙂

[JenniferAcunto · Accepted 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
  }
}

[MichaelFowler1]

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?

[JenniferAcunto]

You are missing a comma after your first attribute.

attributes: {
threat_img:threat_img,
logistics_img:logistics_img
}

[MichaelFowler1]

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)