Indicator Card: Replace numeric value with icon

[dwold]

I would like to show an icon rather than and numeric value. The icon will be dependent on an attribute field: Score. I know my advanced formatting code is completely wrong. Any suggestions on how to make this happen? I've attached a screen grab of my code

Less than 33 return red halo icon

Between 33 and 67 return yellow halo icon

Over 67.1 return red halo icon

Icons:

 

@jcarlson you've helped me in the past! 🙂 Any suggestions?

[jcarlson · Accepted solution]

Oh, this should be easy enough. First, though, you're referencing the icon name as the literal string "score", not the variable score.

But secondly, that's only going to try and find an icon with that URL as the name, so that won't work. When you enable Advanced Formatting, the Icons section of your indicator settings changes:

So what you'd need to do is add three icons here and name them, maybe red, yellow, green. Then you'd need to pick the icons for each. Since these are custom, you'll need SVG. I pulled one of your images into Inkscape, and made a close approximation of them, but you may want to adjust the values.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   viewBox="0 0 159.43667 159.73098"
   version="1.1"
   id="svg5"
   xml:space="preserve"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"><defs
     id="defs2" /><g
     id="layer1"
     transform="translate(10.187083,-44.028057)"><path
       id="path11684"
       style="font-weight:bold;font-size:12.0433px;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.598887;stroke-linecap:square"
       transform="matrix(-0.85997227,0,0,-1.1628282,1.4583332e-8,1.2708333e-6)"
       d="m -13.059105,-106.54418 a 68.169762,50.670101 0 0 1 -68.169762,50.670099 68.169762,50.670101 0 0 1 -68.169763,-50.670099 68.169762,50.670101 0 0 1 68.169763,-50.6701 68.169762,50.670101 0 0 1 68.169762,50.6701 z" /><path
       style="fill:#003366;fill-opacity:1;stroke-width:0.757901"
       d="m 55.540336,131.82589 12.853993,-12.39631 0.227333,4.05945 c 0.29397,5.25125 1.525034,5.25181 1.819117,7.1e-4 l 0.227333,-4.0586 12.877905,12.39546 12.87792,12.39561 H 84.114363 71.804875 v -3.78964 -3.7895 h -2.273697 -2.273697 v 3.7895 3.78964 H 54.971905 42.686329 Z m 15.50664,-0.48876 c 0,-1.76837 -0.336879,-2.27376 -1.515798,-2.27376 -1.179005,0 -1.515798,0.50582 -1.515798,2.27376 0,1.76836 0.336878,2.27375 1.515798,2.27375 1.179005,0 1.515798,-0.50581 1.515798,-2.27375 z m -24.252814,-9.09488 v -5.30523 l -1.515798,-1.51575 c -0.833743,-0.83402 -2.500249,-1.51588 -3.703479,-1.51588 h -2.18768 l -0.333753,-2.27361 -0.333753,-2.27376 h 30.811394 30.811397 l -0.33376,2.27376 -0.33375,2.27361 H 97.4873 c -1.203159,0 -2.869792,0.682 -3.703478,1.51588 l -1.515799,1.51575 v 5.30523 5.30538 h -2.916736 -2.916708 l -0.160128,-5.48511 c -0.110825,-3.77657 -0.536789,-5.90128 -1.369254,-6.82112 l -1.208984,-1.33558 H 69.531178 55.366001 l -1.208985,1.33558 c -0.832464,0.91927 -1.258997,3.04455 -1.369253,6.82112 l -0.160128,5.48511 H 49.710913 46.79419 Z m -8.336904,-16.67372 v -1.51589 h 31.07392 31.073922 v 1.51589 1.51574 H 69.531178 38.457258 Z m 17.810657,-8.428791 c -0.833743,-0.457507 -2.484449,-1.984331 -3.668356,-3.393937 l -2.152571,-2.562893 2.148764,-0.816977 c 1.679378,-0.637952 2.693268,-0.556965 4.641453,0.372258 1.370959,0.653581 2.955298,1.189234 3.520717,1.189234 0.565349,0 5.74085,-1.70528 11.500965,-3.789495 11.002083,-3.980882 15.908962,-4.723549 16.748914,-2.534619 0.749914,1.954068 -1.920735,3.59541 -12.879497,7.915302 -10.357694,4.083039 -16.857621,5.268579 -19.860389,3.622264 z m 3.880486,-11.577207 -2.940607,-2.517284 2.107062,-0.528549 c 1.405201,-0.352366 3.721424,0.04263 6.953315,1.182131 l 4.846252,1.710963 -3.254809,1.321372 c -4.298082,1.744921 -4.310443,1.743074 -7.711213,-1.167922 z"
       id="path336" /><path
       style="color:#000000;fill:#003366;fill-opacity:1;stroke-linecap:square;-inkscape-stroke:none"
       d="m 69.53125,55.521484 c -37.638007,0 -68.2460938,30.674613 -68.2460938,68.371096 10e-8,37.69648 30.6080868,68.37304 68.2460938,68.37304 37.63801,0 68.24609,-30.67656 68.24609,-68.37304 0,-37.696483 -30.60808,-68.371096 -68.24609,-68.371096 z m 0,9.945313 c 32.25227,0 58.30078,26.093804 58.30078,58.425783 0,32.33198 -26.04851,58.42578 -58.30078,58.42578 -32.25227,0 -58.300781,-26.0938 -58.300781,-58.42578 0,-32.331979 26.048511,-58.425783 58.300781,-58.425783 z"
       id="path991" /><path
       style="color:#000000;fill:#c53028;fill-opacity:1;stroke-width:1.1681;stroke-linecap:square;-inkscape-stroke:none"
       d="m 69.531237,203.75905 c 43.965003,0 79.718353,-35.83105 79.718353,-79.86436 0,-44.033293 -35.75335,-79.866633 -79.718353,-79.866633 -43.96499,0 -79.71832,35.83334 -79.71832,79.866633 0,44.03331 35.75333,79.86436 79.71832,79.86436 z m 0,-11.61713 c -37.6739,0 -68.10119,-30.48021 -68.10119,-68.24723 0,-37.767023 30.42729,-68.247223 68.10119,-68.247223 37.673923,0 68.101223,30.4802 68.101223,68.247223 0,37.76702 -30.4273,68.24723 -68.101223,68.24723 z"
       id="path991-2" /><g
       aria-label="Transportation"
       transform="scale(0.85997227,1.1628282)"
       id="text1148"
       style="font-weight:bold;font-size:12.0433px;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans Bold';text-align:center;text-anchor:middle;fill:#003366;stroke-width:0.497856;stroke-linecap:square"><path
         d="m 43.549751,131.08457 v 6.94489 h -1.734753 v -6.94489 h -2.675635 v -1.34075 h 7.091904 v 1.34075 z"
         id="path10278" /><path
         d="m 46.537054,138.02946 v -4.86906 q 0,-0.52337 -0.01764,-0.87032 -0.01176,-0.35283 -0.0294,-0.62334 h 1.575978 q 0.01764,0.10585 0.04704,0.64686 0.0294,0.53513 0.0294,0.71154 h 0.02352 q 0.241101,-0.67037 0.429278,-0.94088 0.188176,-0.27638 0.446919,-0.40575 0.258743,-0.13526 0.646857,-0.13526 0.317548,0 0.511605,0.0882 v 1.38192 q -0.399875,-0.0882 -0.705662,-0.0882 -0.617454,0 -0.964405,0.49984 -0.34107,0.49984 -0.34107,1.48189 v 3.12255 z"
         id="path10280" /><path
         d="m 52.693955,138.14708 q -0.923241,0 -1.440726,-0.49985 -0.517486,-0.50572 -0.517486,-1.4172 0,-0.98793 0.640977,-1.50542 0.646856,-0.51748 1.870004,-0.52924 l 1.370161,-0.0235 v -0.32343 q 0,-0.62334 -0.21758,-0.92324 -0.217579,-0.30579 -0.711542,-0.30579 -0.45868,0 -0.67626,0.2117 -0.211698,0.20582 -0.264623,0.68802 l -1.722992,-0.0823 q 0.158774,-0.92912 0.846795,-1.40544 0.693901,-0.48221 1.887646,-0.48221 1.205506,0 1.858244,0.59394 0.652737,0.59393 0.652737,1.68771 v 2.31692 q 0,0.53513 0.11761,0.74094 0.123491,0.19994 0.405756,0.19994 0.188177,0 0.364592,-0.0353 v 0.89384 q -0.147013,0.0353 -0.264623,0.0647 -0.11761,0.0294 -0.235221,0.0471 -0.11761,0.0176 -0.252862,0.0294 -0.129371,0.0118 -0.305787,0.0118 -0.623335,0 -0.923241,-0.30579 -0.294026,-0.30578 -0.352831,-0.89972 h -0.03528 q -0.693901,1.25256 -2.093465,1.25256 z m 1.92293,-3.06375 -0.846795,0.0118 q -0.576291,0.0235 -0.817392,0.12937 -0.241101,0.1 -0.370472,0.31167 -0.123491,0.21169 -0.123491,0.56453 0,0.45279 0.205818,0.67625 0.211698,0.21758 0.558649,0.21758 0.388114,0 0.705662,-0.21169 0.323429,-0.2117 0.505725,-0.58218 0.182296,-0.37635 0.182296,-0.79387 z"
         id="path10282" /><path
         d="m 62.043977,138.02946 v -3.56947 q 0,-1.67595 -1.13494,-1.67595 -0.599812,0 -0.970285,0.51749 -0.364592,0.5116 -0.364592,1.31723 v 3.4107 h -1.652426 v -4.93963 q 0,-0.5116 -0.01764,-0.83503 -0.01176,-0.32931 -0.0294,-0.58806 h 1.575979 q 0.01764,0.11173 0.04704,0.59982 0.0294,0.4822 0.0294,0.6645 h 0.02352 q 0.335189,-0.72919 0.840914,-1.0585 0.505724,-0.32931 1.205506,-0.32931 1.011449,0 1.552456,0.62334 0.541008,0.62333 0.541008,1.82296 v 4.03991 z"
         id="path10284" /><path
         d="m 70.641296,136.17122 q 0,0.92324 -0.758587,1.45249 -0.752706,0.52337 -2.087584,0.52337 -1.311355,0 -2.011137,-0.41164 -0.693901,-0.41752 -0.923241,-1.29371 l 1.452488,-0.21758 q 0.123491,0.4528 0.423397,0.64097 0.305787,0.18818 1.058493,0.18818 0.693901,0 1.011449,-0.17642 0.317548,-0.17641 0.317548,-0.55277 0,-0.30578 -0.258743,-0.4822 -0.252862,-0.18229 -0.864436,-0.30578 -1.399563,-0.27639 -1.887646,-0.51161 -0.488083,-0.2411 -0.746826,-0.61745 -0.252862,-0.38224 -0.252862,-0.93501 0,-0.91148 0.699782,-1.4172 0.705662,-0.51161 1.993495,-0.51161 1.13494,0 1.822961,0.44104 0.693901,0.44104 0.864436,1.27608 l -1.464249,0.15289 q -0.07057,-0.38812 -0.346951,-0.57629 -0.276384,-0.19406 -0.876197,-0.19406 -0.588052,0 -0.882077,0.15289 -0.294026,0.14702 -0.294026,0.49985 0,0.27638 0.223459,0.44104 0.229341,0.15877 0.764468,0.26462 0.746825,0.15289 1.323116,0.31755 0.582171,0.15877 0.929122,0.38223 0.352831,0.22346 0.558649,0.57629 0.211699,0.34695 0.211699,0.89384 z"
         id="path10286" /><path
         d="m 77.997824,134.8187 q 0,1.59362 -0.640977,2.46394 -0.635095,0.86444 -1.799438,0.86444 -0.670379,0 -1.170223,-0.28815 -0.493963,-0.29403 -0.758587,-0.84091 h -0.03528 q 0.03528,0.17641 0.03528,1.07025 v 2.44041 h -1.652425 v -7.39769 q 0,-0.89972 -0.04704,-1.46425 h 1.605381 q 0.0294,0.10585 0.04704,0.41752 0.02352,0.31167 0.02352,0.61746 h 0.02352 q 0.55865,-1.17023 2.034659,-1.17023 1.111418,0 1.722992,0.85856 0.611574,0.85267 0.611574,2.42865 z m -1.722992,0 q 0,-2.14051 -1.311355,-2.14051 -0.658618,0 -1.011449,0.57629 -0.346951,0.5763 -0.346951,1.61127 0,1.02909 0.346951,1.59362 0.352831,0.55865 0.999688,0.55865 1.323116,0 1.323116,-2.19932 z"
         id="path10288" /><path
         d="m 85.377871,134.84222 q 0,1.54658 -0.858555,2.42866 -0.858556,0.8762 -2.375729,0.8762 -1.487771,0 -2.334566,-0.88208 -0.846794,-0.88208 -0.846794,-2.42278 0,-1.53481 0.846794,-2.41101 0.846795,-0.88208 2.369849,-0.88208 1.558337,0 2.375729,0.85268 0.823272,0.84679 0.823272,2.44041 z m -1.728872,0 q 0,-1.13494 -0.370472,-1.64654 -0.370473,-0.51161 -1.076135,-0.51161 -1.505413,0 -1.505413,2.15815 0,1.06438 0.364593,1.62303 0.370472,0.55277 1.064373,0.55277 1.523054,0 1.523054,-2.1758 z"
         id="path10290" /><path
         d="m 86.689225,138.02946 v -4.86906 q 0,-0.52337 -0.01764,-0.87032 -0.01176,-0.35283 -0.0294,-0.62334 h 1.575978 q 0.01764,0.10585 0.04704,0.64686 0.0294,0.53513 0.0294,0.71154 h 0.02352 q 0.241101,-0.67037 0.429278,-0.94088 0.188177,-0.27638 0.446919,-0.40575 0.258743,-0.13526 0.646857,-0.13526 0.317548,0 0.511605,0.0882 v 1.38192 q -0.399875,-0.0882 -0.705662,-0.0882 -0.617454,0 -0.964405,0.49984 -0.34107,0.49984 -0.34107,1.48189 v 3.12255 z"
         id="path10292" /><path
         d="m 93.004903,138.13531 q -0.729184,0 -1.123178,-0.39399 -0.393995,-0.39988 -0.393995,-1.20551 v -3.75177 h -0.805631 v -1.1173 h 0.887958 l 0.517486,-1.49365 h 1.034971 v 1.49365 h 1.205506 v 1.1173 h -1.205506 v 3.30485 q 0,0.46456 0.176415,0.68802 0.176416,0.21758 0.546888,0.21758 0.194057,0 0.552769,-0.0823 v 1.02321 q -0.611574,0.19993 -1.393683,0.19993 z"
         id="path10294" /><path
         d="m 96.856643,138.14708 q -0.923242,0 -1.440727,-0.49985 -0.517486,-0.50572 -0.517486,-1.4172 0,-0.98793 0.640977,-1.50542 0.646857,-0.51748 1.870004,-0.52924 l 1.370161,-0.0235 v -0.32343 q 0,-0.62334 -0.217579,-0.92324 -0.217579,-0.30579 -0.711543,-0.30579 -0.45868,0 -0.676259,0.2117 -0.211699,0.20582 -0.264624,0.68802 l -1.722991,-0.0823 q 0.158774,-0.92912 0.846794,-1.40544 0.693901,-0.48221 1.887646,-0.48221 1.205506,0 1.858244,0.59394 0.65274,0.59393 0.65274,1.68771 v 2.31692 q 0,0.53513 0.11761,0.74094 0.12349,0.19994 0.40575,0.19994 0.18818,0 0.3646,-0.0353 v 0.89384 q -0.14702,0.0353 -0.26463,0.0647 -0.11761,0.0294 -0.23522,0.0471 -0.11761,0.0176 -0.25286,0.0294 -0.12937,0.0118 -0.30579,0.0118 -0.623333,0 -0.923239,-0.30579 -0.294026,-0.30578 -0.352831,-0.89972 h -0.03528 q -0.693901,1.25256 -2.093464,1.25256 z m 1.922929,-3.06375 -0.846795,0.0118 q -0.57629,0.0235 -0.817392,0.12937 -0.241101,0.1 -0.370472,0.31167 -0.123491,0.21169 -0.123491,0.56453 0,0.45279 0.205818,0.67625 0.211699,0.21758 0.558649,0.21758 0.388114,0 0.705662,-0.21169 0.323429,-0.2117 0.505725,-0.58218 0.182296,-0.37635 0.182296,-0.79387 z"
         id="path10296" /><path
         d="m 103.71332,138.13531 q -0.72918,0 -1.12318,-0.39399 -0.39399,-0.39988 -0.39399,-1.20551 v -3.75177 h -0.80563 v -1.1173 h 0.88796 l 0.51748,-1.49365 h 1.03497 v 1.49365 h 1.20551 v 1.1173 h -1.20551 v 3.30485 q 0,0.46456 0.17642,0.68802 0.17641,0.21758 0.54689,0.21758 0.19405,0 0.55277,-0.0823 v 1.02321 q -0.61158,0.19993 -1.39369,0.19993 z"
         id="path10298" /><path
         d="m 106.09493,130.52004 v -1.21726 h 1.65243 v 1.21726 z m 0,7.50942 v -6.36272 h 1.65243 v 6.36272 z"
         id="path10300" /><path
         d="m 115.48612,134.84222 q 0,1.54658 -0.85855,2.42866 -0.85856,0.8762 -2.37573,0.8762 -1.48777,0 -2.33457,-0.88208 -0.84679,-0.88208 -0.84679,-2.42278 0,-1.53481 0.84679,-2.41101 0.8468,-0.88208 2.36985,-0.88208 1.55834,0 2.37573,0.85268 0.82327,0.84679 0.82327,2.44041 z m -1.72887,0 q 0,-1.13494 -0.37047,-1.64654 -0.37048,-0.51161 -1.07614,-0.51161 -1.50541,0 -1.50541,2.15815 0,1.06438 0.36459,1.62303 0.37047,0.55277 1.06437,0.55277 1.52306,0 1.52306,-2.1758 z"
         id="path10302" /><path
         d="m 120.91972,138.02946 v -3.56947 q 0,-1.67595 -1.13494,-1.67595 -0.59981,0 -0.97028,0.51749 -0.3646,0.5116 -0.3646,1.31723 v 3.4107 h -1.65242 v -4.93963 q 0,-0.5116 -0.0176,-0.83503 -0.0118,-0.32931 -0.0294,-0.58806 h 1.57598 q 0.0176,0.11173 0.047,0.59982 0.0294,0.4822 0.0294,0.6645 h 0.0235 q 0.33519,-0.72919 0.84092,-1.0585 0.50572,-0.32931 1.2055,-0.32931 1.01145,0 1.55246,0.62334 0.54101,0.62333 0.54101,1.82296 v 4.03991 z"
         id="path10304" /></g></g></svg>

Here's the Arcade (using sample data and a basic Decode for testing; swap in your expression):

var icon = Decode(
  $datapoint['theminute'] % 3,
  0, 'red',
  1, 'yellow',
  2, 'green',
  'error'
)


return {
  iconName: icon,
  middleText: '',
  middleTextMaxSize: 'x-large'
}

And the result:

[dwold]

@jcarlson thank you so much for your help. I was able to replicate the icons with color halos. In my Arcade I have this but I know it is wrong

Being at a beginner level, how would I create that Arcade expression to show green if the attribute in the Score field is less than 33, yellow between 34-67 and red 68 and above? I don't understand what the % 3 is doing...apologies for my very little knowledge with Arcade (trying to learn  through some classes)

[jcarlson · Accepted solution]

For reference, "%" is "modulo", or "remainder divide". It was my way of taking a numeric field and making sure it returned one of three values for testing. Not relevant for your situation.

For your case, I'd use when:

var s = $datapoint['Score']

var icon = When(
  s < 33, 'green',
  s < 67, 'yellow',
  'red'
)

 Since the conditions evaluate in order, there's no need to code the full range in the second condition. Anything that makes it past "s < 33" is implicitly >= 33. And leaving red as the default value will catch anything else. The only thing this won't catch are null values, though. You could amend it like so:

var s = $datapoint['Score']

var icon = When(
  IsEmpty(s), 'error',
  s < 33, 'green',
  s < 67, 'yellow',
  'red'
)

return {
  iconName: icon,
  middleText: Iif(IsEmpty(s), 'No Score', ''),
  middleTextMaxSize: 'x-large'
}

 If your score field always has values, no worries, but this will give you a text output if you encounter a null.

[dwold]

@jcarlson great! thank you for your help, much appreciated!!!

[dwold]

@jcarlson do you see anything in my expression that is preventing the icon from displaying?

[jcarlson]

You have your iconName as the literal string "icon". Just omit the single quotes, that should do it!