Arcade expression to change text color based on date

3688
10
Jump to solution
06-24-2020 07:18 AM
AndrewSD
New Contributor III

I need an arcade expression that changes the text color based on age. So if if the age is 5 days or less its green text, between 6-10 days its yellow and 11-15 days is red. I am not that experienced with arcade and I tried to find examples of what I wanted and I tired to make it but could not get it to work. 

var val = $datapoint.Age;

var textColor ="green";
if (val <= 5);
result='green'

var textColor ="yellow";
if (val <= 10);
results='yellow'

var textColor ="red";
if (val >= 13);
results='red'

return results;

I am not sure how to made the range value of between 6-10 days. 

Thank you for any help!

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

Here's what you need for your revised values:

var val = $datapoint.Age;

if (val <= 5) {
  results='green'
} else if (val <= 10) {
  results='yellow'
} else {
  results='red'
}
return results;‍‍‍‍‍‍‍‍‍‍

This if..else statement evaluates val and set the results variable for the first time the condition is true. So for a value of 6, the first if statement (val <= 5) isn't true, so it then tests it for the next condition (val <= 10). It meets that condition, so results is set to "yellow".

View solution in original post

10 Replies
KenBuja
MVP Esteemed Contributor

You want to use if...else to test val for various values:

var val = $datapoint.Age;

if (val <= 5) {
  results='green'
} else if (val <= 10) {
  results='yellow'
} else if (val >= 13) {
  results='red'
} else {
  //what happens for values between 10 and 13?
}
return results;
0 Kudos
AndrewSD
New Contributor III

Thank you!! I was trying to make it a range so less than 5 days is green, between 6-10 days is yellow and and that 13 should have been an 11 so anything older than 11 is red. I just don't know how to show the range greater than 6 and less than 10. 

Thank you!!

0 Kudos
KenBuja
MVP Esteemed Contributor

Here's what you need for your revised values:

var val = $datapoint.Age;

if (val <= 5) {
  results='green'
} else if (val <= 10) {
  results='yellow'
} else {
  results='red'
}
return results;‍‍‍‍‍‍‍‍‍‍

This if..else statement evaluates val and set the results variable for the first time the condition is true. So for a value of 6, the first if statement (val <= 5) isn't true, so it then tests it for the next condition (val <= 10). It meets that condition, so results is set to "yellow".

AndrewSD
New Contributor III

Thank you!!

0 Kudos
KenBuja
MVP Esteemed Contributor

If this has answered your question, please click the "Mark Correct" button

0 Kudos
AndrewSD
New Contributor III

I am trying to take advantage of Arcade in Dashboard Beta and one thing I wanted to do was get the date difference between creation date and now. I used the DateDiff(now, feature.date, 'day') but it doesn't apply this to the Age field and show up on my list. Any ideas?

Thank you!

0 Kudos
KenBuja
MVP Esteemed Contributor

Isn't the age field just a number and not a date?

0 Kudos
AndrewSD
New Contributor III

I created a field called age in my feature layer on a webmap and calculated that by using the datediff function but it is static. I was hoping that in the Dashboard setting I could create a arcade expression that would update my list widget (based on the feature layer) to reflect how old a request was.  So from day to day it would say its 1 day old, 2 day old, etc. and then once passed 5 day would turn yellow to mark urgency to take care of that request. 

Thank you!

0 Kudos