Change Icon in List based on Date Conditional

[ZacharyStanley]

Hello,

I've got a list element in a dashboard that I would like to add a custom icon to if a certain data threshold has been passed. In this example it is 90 days.  Currently, I have a simple DateDiff statement that displays highlighted text when the condition is met. Ideally I would like to add a custom icon instead. Wondering folks have ideas or code samples they would be able to share in order to achieve this. Code sample below and screen shots attached. Thanks!

var co = IIF($datapoint.MaintenanceIssue == 'Cleanout', "Cleanout Needed", "");
var cb = IIF($datapoint.MaintenanceIssue == 'CBMarker', "CB Marker Needed", "");
var id = IIF($datapoint.MaintenanceIssue == 'IllicitDischarge', "Illicit Discharge", "");
var sd = IIF($datapoint.MaintenanceIssue == 'OtherIssues', "Other Issues", "");
var other= IIF($datapoint.MaintenanceIssue == 'StructuralDamage', "Structural Damage", "");

var mdt = $datapoint.MaintenanceRequired
var maintDay = ''
if ((DateDiff(Today(), mdt, 'days') >= 90)){
    maintDay = 'Maintenance Overdue'
} else {
    maintDay= ''
}

return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
   attributes: {
     co: co,
     cb: cb,
     id: id,
     sd: sd,
     other: other,
     maintDay: maintDay
   }
}

[JenniferAcunto · Accepted solution]

The easiest method would to use emojis or HTML symbols as you can just  copy/paste and add them as you would dynamic text. If that doesn't meet your needs, you can use SVGs by inserting the SVG path code. If you go the SVG route, I would recommend putting it in a table to help constrain the size. 

In this quick and dirty example, I am using all 3. The pizza is an emoji, the star an HTML icon, and the bullseye is an SVG. As you can see, leaving the SVG to its own devices makes it extremely large. 

var et = When($datapoint.EVENT_TYPE == 'Riots/Protests', '🍕',
              $datapoint.EVENT_TYPE == 'Violence against civilians', '✤',
              '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 2 124 124"> <g fill="#b92d05">  <path d="m64 44.801c-10.801 0-19.199 8.8008-19.199 19.199s8.8008 19.199 19.199 19.199c10.801 0 19.199-8.8008 19.199-19.199s-8.3984-19.199-19.199-19.199zm0 22.801c-1.6016 0-2.8008-1.1992-2.8008-2.8008v-1.6016c0-1.6016 1.1992-2.8008 2.8008-2.8008s2.8008 1.1992 2.8008 2.8008v1.6016c0 1.5977-1.1992 2.8008-2.8008 2.8008z"></path>  <path d="m64 24c-22 0-40 18-40 40s18 40 40 40 40-18 40-40-18-40-40-40zm0 65.199c-14 0-25.199-11.199-25.199-25.199s11.199-25.199 25.199-25.199 25.199 11.199 25.199 25.199-11.199 25.199-25.199 25.199z"></path>  <path d="m64 2c-34.398 0-62 27.602-62 62s27.602 62 62 62 62-27.602 62-62-27.602-62-62-62zm0 108c-25.199 0-46-20.801-46-46s20.801-46 46-46 46 20.398 46 46c0 25.199-20.801 46-46 46z"></path> </g></svg>'

)


return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  attributes: {
    et: et
  }
}

Emojis

HTML Icons

[ZacharyStanley]

Thanks for the quick reply @JenniferAcunto . I'm not clear on how your getting the HTML symbols from the site you referenced. I'd like to use this  warning sign .

Thanks!

[JenniferAcunto]

Just highlight the symbol you want and copy it and then paste it into your expression. Just like you would copy/paste some text from one window to another. ⚠

You can also format it like text as well....

Bold, Italic, Red, Blue: ⚠⚠⚠⚠

[ZacharyStanley]

Exactly what I need! Thanks again!