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 · Accepted solution]

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}.

[dwold]

@jcarlson thank you so much for your help! does this look right:

// 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['Stable'],

    'Stabilizing', green_triangle,

    'Destabilizing', red_triangle,

    'Unchanged',blue_triangles,

)

return {

  textColor: '',

  backgroundColor: '',

  separatorColor:'',

  selectionColor: '',

  selectionTextColor: '',

   attributes: {

     attribute1: 'icon',

     attribute2: ''

   }

}

I think I'm not doing something right. Is line 16 correct: var icon = Decode($datapoint['Stable'],?

[jcarlson]

It looks good. Sorry I didn't have a full example to post, I didn't have a dashboard handy. When you define attributes, you have to refer to them by their key name, not the value. So you need to do expression/attribute1 to access the value.

Oh and Decode needs a default value to apply to anything that doesn't match. You can just add one more parameter to the function for an empty string, '', so that no icon appears if it's null.

[dwold]

@jcarlson - thanks for these tips. Much appreciated

I'm getting closer (just need to get the arrows to display 🙂). See anything that would be preventing them from appearing and the icon text displaying instead?

[jcarlson]

It sounds like you want three icons? You'd want to use the same Decode function for each separately.

[dwold]

@jcarlson Correct with 3 icons. Am I on the right track doing it this way?

I don't need single quotes for lines 46-48 do I? attribute1: 'icon',?

 

 

[jcarlson]

Looks like you're on the right track. No quotes, that would make the attribute the literal string "icon" as opposed to the SVG you defined earlier.

And you don't have to call them 'attribute1', etc. You could use the same names as the variables:

attributes: {
  icon1: icon1,
  icon2: icon2,
  icon3: icon3
}

In fact, when the attribute name matches the variable name, you can completely omit the value and just give the key itself.

attributes: {
  icon1,
  icon2,
  icon3
}

[dwold]

@jcarlson soooooo happy! Thank you for all your help with this!!! I greatly appreciate it.