List widget: changing fields to icons in a list?

dwold

I'd like to change fields in a list from text to icons. Can this be done in the list widget?

Stabilizing = up arrow (green)

Destabilizing = down arrow (red)

Unchanged = neutral arrows (blue)

Dashboard list widget:

Goal is to get it to look like this:

@jcarlson 

@JohannesLindner 

@FriederikeAlschner 

@DavidNyenhuis1 

 

 

jcarlson

Of course!

Enable advanced formatting, and put something like this in the expression builder:

// svg code for your icons
var green_triangle = `<svg height="30" width="30">
  <polygon points="15,0 30,30 0,30" style="fill:lime;" />
</svg>`

var red_triangle = `<svg height="30" width="30">
  <polygon points="15,30 0,0 30,0" style="fill:coral;" />
</svg>`

var blue_triangles = `<svg height="30" width="30">
  <polygon points="0,15 14,27 14,3" style="fill:mediumblue;" />
  <polygon points="16,27 30,15 16,3" style="fill:mediumblue;" />
</svg>`

// set icon var by attribute
var icon = Decode($datapoint['your_attribute'],
    'stabilizing', green_triangle,
    'destabilizing', red_triangle,
    blue_triangles
)

 

And down in the return section, make sure you include icon in the attributes object. Then in your list item template, just call {expression/icon}.