Indicator Card: Replace numeric value with icon

dwold — Wed, 12 Jul 2023 15:29:50 GMT

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?

Re: Indicator Card: Replace numeric value with icon

jcarlson — Wed, 12 Jul 2023 16:04:43 GMT

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"?>  <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:

Re: Indicator Card: Replace numeric value with icon

dwold — Wed, 12 Jul 2023 16:45:46 GMT

@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)

Re: Indicator Card: Replace numeric value with icon

jcarlson — Wed, 12 Jul 2023 17:29:29 GMT

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.

Re: Indicator Card: Replace numeric value with icon

dwold — Wed, 12 Jul 2023 17:40:21 GMT

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

Re: Indicator Card: Replace numeric value with icon

dwold — Fri, 21 Jul 2023 18:52:41 GMT

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

Re: Indicator Card: Replace numeric value with icon

jcarlson — Fri, 21 Jul 2023 18:57:15 GMT

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

topic Re: Indicator Card: Replace numeric value with icon in ArcGIS Dashboards Questions

Indicator Card: Replace numeric value with icon

Re: Indicator Card: Replace numeric value with icon

Re: Indicator Card: Replace numeric value with icon

Re: Indicator Card: Replace numeric value with icon

Re: Indicator Card: Replace numeric value with icon

Re: Indicator Card: Replace numeric value with icon

Re: Indicator Card: Replace numeric value with icon