Different list symbols

Question

I'm working on a dashboard to track work order requests. My supervisor would like to have different symbols to denote whether a particular work order has been assigned, unassigned, or is in progress. There are no options to change the symbols in a list unless you use the advanced formatting, and I'm not that up to speed on how to do that. The advanced formatting documentation explains that this can be done, but it doesn't go into any detail with the lists.

Can someone point me in the right direction or provide a snippet of code that will set an svg icon that's conditional on a particular variable in the list?

ZenMasterZeke · Answer

Awesome Josh, once again. I was just searching for this exact thing. 😀

jcarlson · Answer

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 = `` var in_progress = `` var unassigned = `` 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!