EB List Icon Advanced Formatting not accepting color

[Amarz]

Hello,

I am attempting to color the 'symbol / icon' on my List to correspond to a specific color, yet the iconColor variable is not accepting the color value of 'icon_color'.

var icon_color = decode($datapoint.projtype,
  'Facilities', '#AB6629',
  'Maintenance', '#A73599',
  'Parks', '#30A625',
  'Street Improvements', '#314AA7',
  'Traffic Signals', '#813643',
  'Transportation', '#728238',
  'Other', '#828282', 'white',
);

return {
  textColor: '',
  //backgroundColor: icon_color,
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  iconColor: icon_color,
  //attributes: {
        // attribute2: ''
   // }
}

[JeffreyThompson2]

Where are you trying to enter this code? Are you on Developer Edition?

Regardless, Experience Builder does not support Arcade except through options in the webmap. There is a method for getting different images/colors in a List Widget mentioned in this post.

 https://community.esri.com/t5/experience-builder-tips-and-tricks/using-a-table-to-update-and-control...

This one covers the specifics in more detail. It's more focused on the images, but the images could just be colored squares.

https://community.esri.com/t5/experience-builder-tips-and-tricks/create-a-map-tips-widget-with-image...

[Amarz]

Apologies, this was meant for the Dashboards page, not ExB.

[JenniferAcunto · Accepted solution]

The icons in the list come directly from your layer symbology. You can't change them using Arcade. You can however, turn off the icons and recreate them using Advanced Formatting and HTML.

var icon_color = decode($datapoint.INCIDENT_TYPE,
  'Snow', '#AB6629',
  'Hail', '#A73599',
  'Flood', '#30A625',
  'Flash Flood', '#314AA7',
  'Other', '#828282', 'white',
);

var icon = Concatenate('<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="' + icon_color + '" viewBox="0 0 256 256"><path d="M224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48Z"></path></svg>')


return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  attributes: {
    icon: icon
  }
}

In the line item template, click the source button and add the HTML.

<div style="align-items:center;display:flex;">
    <p>
        {expression/icon}
    </p>
    <p>
        {field/INCIDENT_TYPE}
    </p>
</div>

[Amarz]

Thanks Jen! I appreciate the in-depth assistance! I was so close.