Arcade Assign Attributes in List Individual Colors based on IIF

[Ed_]

So i have three attributes in the list, "severity", "probability" and date. I would like to show severity in red when its value is "Severe" and probability red as well when its value is "Likely". Second, i wouldn't like the date to have any color change. 

I know i have to use HTML source formatting in conjunction with Arcade for this purpose. How can I do this?

Bonus question: How can i please add a calendar icon next to the date? Please note that the date is in the second line

Current output:

Thank you 🙂

Current Arcade:

/ Condition Color the Attributes
var colorS = IIF($datapoint.severity == "Severe", "#ff0000", '')
var colorP = IIF($datapoint.probability == "Likely", "#ff0000", '')


return {
  textColor: colorS,
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  // attributes: {
    // attribute1: '',
    // attribute2: ''
  // }
}

Current HTML source:

<p>
    <strong>{field/severity}, {field/probability}</strong><br>
    {field/date_and_time}
</p>

[Ed_]

@KenBuja another question for you sir!

[JenniferAcunto]

You will want to return all three arcade variables as attributes, and then plug those attributes directly into the HTML of the Line Item Template. Scroll down to the Arcade Attributes section of this blog post for a step by step explanation. 

As far as a clock icon, the easiest thing would be to use a clock emoji :alarm_clock:. Emojis are great because they are essentially just text and you can add them just like you would any other text in the list. Otherwise, you would need to use an SVG code and some HTML. 

Icon Repositories:

Iconmonstr 

Iconoir 

Phosphor

Emojipedia (Emojis)

[Ed_]

Good morning Jennifer, hope all is well and thank you for the quick response so I try doing what you did in the blog, but as you can see i am still not there. Can you please help further with this?

Also, how and where exactly should i put the emoji text in the Arcade expression and HTML?

Arcade expression:

/ Condition Color the Attributes
var colorS = IIF($datapoint.how_severe_could_the_injury_to == "Severe", "#ff0000", '')
var colorP = IIF($datapoint.what_is_the_probability_that_in == "Likely", "#ff0000", '')


return {
  textColor: colorS,
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  attributes: {
    attribute1: '',
    attribute2: ''
  // }
}
}

HTML code:

<p>
    <strong>{field/how_severe_could_the_injury_to}, {field/what_is_the_probability_that_in}</strong><br>
    {field/date_and_time}
</p>
<p>
    &nbsp;
</p>
<p>
    <span style="color:{expression/attribute1};"><i><span style="box-sizing:border-box;"></span></i></span><span style="background-color:rgb(255,255,255);color:#ff0000;font-size:16px;"><span style="box-sizing:border-box;font-family:&quot;Avenir Next W01&quot;, &quot;Avenir Next W00&quot;, &quot;Avenir Next&quot;, Avenir, &quot;Helvetica Neue&quot;, sans-serif;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:300;letter-spacing:normal;orphans:2;text-align:left;text-decoration-color:initial;text-decoration-style:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;">&nbsp;</span></span>
</p>

[Ed_]

@JenniferAcunto I also tried the following but it's still the same

<p><span style="color:{expression/attribute1}"> </span> {how_severe_could_the_injury_to}</p>
<p><span style="color:{expression/attribute2}"> </span> {what_is_the_probability_that_in}</p>

Current output:

[JenniferAcunto]

You need to tell the return statement what each of those attributes are.

return {
textColor: colorS,
backgroundColor: '',
separatorColor:'',
selectionColor: '',
selectionTextColor: '',
attributes: {
attribute1: colorS,
attribute2: colorP
// }
}
}

[Ed_]

Hi Jennifer, thank you so I did that but now the output is showing the hexcode in red

// Condition Color the Attributes
var colorS = IIF($datapoint.how_severe_could_the_injury_to == "Severe", "#ff0000", '')
var colorP = IIF($datapoint.what_is_the_probability_that_in == "Likely", "#ff0000", '')


return {
  textColor: colorS,
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  attributes: {
    attribute1: colorS,
    attribute2: colorP
  // }
}
}

HTML:

<p>
    <strong>{field/how_severe_could_the_injury_to}, {field/what_is_the_probability_that_in}</strong><br>
    {field/date_and_time}
</p>
<p>
    &nbsp;

<p><span style="color:{expression/attribute1}"> </span> {how_severe_could_the_injury_to}</p>
<p><span style="color:{expression/attribute2}"> </span> {what_is_the_probability_that_in}</p>

Current output:

[JenniferAcunto]

<p>
    <span style="color:{expression/attribute1};">{how_severe_could_the_injury_to}</span>, <span style="color:{exoressuib.attribute2};">{what_is_the_probability_that_in}</span>
</p>

[Ed_]

Hi Jen, thank you for the quick response but it's still not working

<p>
    <span style="color:{expression/attribute1};"><strong>{how_severe_could_the_injury_to}</strong></span>, <span style="color:{expression/attribute2};"><strong>{what_is_the_probability_that_in}</strong></span>
</p>

[JenniferAcunto · Accepted solution]

Just add your fields to the line template w/o the arcade fields. Then use the rich text editor to add generic color to your fonts, then open the source field and swap out the hex code for your arcade attribute in the HTML.