topic EB List Icon Advanced Formatting not accepting color in ArcGIS Dashboards Questions

EB List Icon Advanced Formatting not accepting color

amarcz_cc — Mon, 28 Oct 2024 16:01:38 GMT

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: '' // } }

Re: EB List Icon Advanced Formatting not accepting color

JeffreyThompson2 — Mon, 28 Oct 2024 16:16:09 GMT

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-an-experience/ba-p/1543917

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-images-and-text/ba-p/1412359

Re: EB List Icon Advanced Formatting not accepting color

amarcz_cc — Mon, 28 Oct 2024 17:14:32 GMT

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

Re: EB List Icon Advanced Formatting not accepting color

JenniferAcunto — Tue, 29 Oct 2024 12:18:10 GMT

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>

Re: EB List Icon Advanced Formatting not accepting color

amarcz_cc — Wed, 30 Oct 2024 20:33:44 GMT

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