nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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:

Finde mehr Beiträge mit dem Tag

Accepted answers

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

All comments

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?

Arrow arcade.txt

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 thank you so much for your help! does this look right:

// svg code for your icons

var green_triangle = `<svg height="30" width="30">

</svg>`

var red_triangle = `<svg height="30" width="30">

</svg>`

var blue_triangles = `<svg height="30" width="30">

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

Dashboard Expression.png

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.