Different list symbols
If the symbol is the only thing you want changed, it's not too bad. I've done this in some dashboards. So, let's start with your List. It's connected to your features, but isn't showing the symbols you want.
First of all, turn the option of showing symbols off, as this will only pull the layer symbology, so we don't want it.
Next, we click Enable on the advanced formatting section. For your expression, you'll want to first define your SVGs. You'll need to know the SVG code for the icon you want. I'd suggest looking at Material Design Icons or Font Awesome, as these have excellent SVGs for all kinds of use cases.
var assigned = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,15C7.58,15 4,16.79 4,19V21H20V19C20,16.79 16.42,15 12,15M8,9A4,4 0 0,0 12,13A4,4 0 0,0 16,9M11.5,2C11.2,2 11,2.21 11,2.5V5.5H10V3C10,3 7.75,3.86 7.75,6.75C7.75,6.75 7,6.89 7,8H17C16.95,6.89 16.25,6.75 16.25,6.75C16.25,3.86 14,3 14,3V5.5H13V2.5C13,2.21 12.81,2 12.5,2H11.5Z" />
</svg>`
var in_progress = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M13.53 22H10C9.75 22 9.54 21.82 9.5 21.58L9.13 18.93C8.5 18.68 7.96 18.34 7.44 17.94L4.95 18.95C4.73 19.03 4.46 18.95 4.34 18.73L2.34 15.27C2.21 15.05 2.27 14.78 2.46 14.63L4.57 12.97C4.53 12.65 4.5 12.33 4.5 12S4.53 11.34 4.57 11L2.46 9.37C2.27 9.22 2.21 8.95 2.34 8.73L4.34 5.27C4.46 5.05 4.73 4.96 4.95 5.05L7.44 6.05C7.96 5.66 8.5 5.32 9.13 5.07L9.5 2.42C9.54 2.18 9.75 2 10 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.78 8.95 21.73 9.22 21.54 9.37L19.43 11C19.47 11.34 19.5 11.67 19.5 12V12.19C19 12.07 18.5 12 18 12C17.08 12 16.22 12.21 15.44 12.58C15.47 12.39 15.5 12.2 15.5 12C15.5 10.07 13.93 8.5 12 8.5S8.5 10.07 8.5 12 10.07 15.5 12 15.5C12.2 15.5 12.39 15.47 12.58 15.44C12.21 16.22 12 17.08 12 18C12 19.54 12.58 20.94 13.53 22M16 15V21L21 18L16 15Z" />
</svg>`
var unassigned = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4A4,4 0 0,1 16,8C16,9.95 14.6,11.58 12.75,11.93L8.07,7.25C8.42,5.4 10.05,4 12,4M12.28,14L18.28,20L20,21.72L18.73,23L15.73,20H4V18C4,16.16 6.5,14.61 9.87,14.14L2.78,7.05L4.05,5.78L12.28,14M20,18V19.18L15.14,14.32C18,14.93 20,16.35 20,18Z" />
</svg>`
You may notice, I enclosed the HTML in "`" characters instead of normal quote marks. Mostly, this is because I'm lazy. Backtick strings respect line breaks, so I don't have to do anything besides copy and paste, where a standard string would need those breaks removed.
Anyway, I now have different variables which correspond to the SVG code. Now I just need to tie an attribute to these responses. The best option for this would be the function Decode.
var svg = Decode(
$datapoint["risk_category"],
1, assigned,
2, in_progress,
3, unassigned,
''
)Mine is a numeric field, but the 1, 2, and 3 could as easily be strings. So, this results in a single variable, svg, which will be generated for each feature in the list. To make this variable accessible to the list, we need it in our output.
Advanced formatting comes with a bunch of stuff pre-written, but if you don't need it, just delete it! Here's all you need for this:
return {
attributes: {
svg: svg
}
}
Now, we move on to the Line item template. Here, we can reference the attributes with the format {expression/svg}. Just put that in the line item template, and it will show up!
Not too difficult, but it can be a lot if you haven't worked with it before. Best of luck!
