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

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>

Find more posts tagged with

ArcGIS Online

Accepted answers

JA7

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.

JA7

Just add the emoji in the line item template next to your field: {field/date_and_time} :alarm_clock:

All comments

Ed_

@KenBuja another question for you sir!

JA7

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:

Emojipedia (Emojis)

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:

JA7

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:

JA7

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

Ed_

yup that worked like a charm thank you so much for your time and help @JenniferAcunto 🙂

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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