I have a survey that is completed to survey building conditions.
In my dashboard I would like to change color based on a negative or positive answer.
I asked this question before and thought it worked until I got more complicated. Please don't get irate, I am asking again so new people see it.
Below is a copy of my code. The null is for those questions that are not answered. I thought that may be an issue so in the test survey questions I added an answer.
Accepted Solutions
In Arcade, as soon as your expression encounters a return, it stops. So the way this is written, your FOUNDATIONSPALLING field is not going to get evaluated at all.
A note on ifs: when your subsequent conditions are related, they should be chained together with else statements. Otherwise your expression will check every condition, regardless of whether it already matched a preceding condition (unless, of course, that condition ended early with a return statment).
You might write that as:
var c = $datapoint['FOUNDATIONCRACKING']
if(c == 'Yes'){
return {textColor:red}
} else if(c == 'No'){
return {textColor:blue}
} else {
return {textcolor:black}
}
But if I'm understanding this correctly, you want each line to have its own color? The textColor:<some color> property is going to apply to the whole list item. If you want to get each line colored separately, you'll need to make use of the attributes property and pipe the values into the HTML.
Also, since we need two separate values in a single return, I am going to use Decode to create a variable for each color. I'm also using a custom function so that I don't have to write everything twice. Here's what it looks like:
var c = $datapoint['FOUNDATIONCRACKING']
var s = $datapoint['FOUNDATIONSPALLING']
function colorCode(x){
return Decode(
x,
'Yes', 'Red',
'No', 'Blue',
'Black'
)
}
return {
attributes: {
c_col: colorCode(c),
s_col: colorCode(s)
}
}
Then in my Line item template, I open up the source and edit the HTML as follows:
<p style="color:{expression/c_col}">Foundation Cracking: {FOUNDATIONCRACKING}</p>
<p style="color:{expression/s_col}">Foundation Spalling: {FOUNDATIONSPALLING}</p>
Which yields the following list:
In Arcade, as soon as your expression encounters a return, it stops. So the way this is written, your FOUNDATIONSPALLING field is not going to get evaluated at all.
A note on ifs: when your subsequent conditions are related, they should be chained together with else statements. Otherwise your expression will check every condition, regardless of whether it already matched a preceding condition (unless, of course, that condition ended early with a return statment).
You might write that as:
var c = $datapoint['FOUNDATIONCRACKING']
if(c == 'Yes'){
return {textColor:red}
} else if(c == 'No'){
return {textColor:blue}
} else {
return {textcolor:black}
}
But if I'm understanding this correctly, you want each line to have its own color? The textColor:<some color> property is going to apply to the whole list item. If you want to get each line colored separately, you'll need to make use of the attributes property and pipe the values into the HTML.
Also, since we need two separate values in a single return, I am going to use Decode to create a variable for each color. I'm also using a custom function so that I don't have to write everything twice. Here's what it looks like:
var c = $datapoint['FOUNDATIONCRACKING']
var s = $datapoint['FOUNDATIONSPALLING']
function colorCode(x){
return Decode(
x,
'Yes', 'Red',
'No', 'Blue',
'Black'
)
}
return {
attributes: {
c_col: colorCode(c),
s_col: colorCode(s)
}
}
Then in my Line item template, I open up the source and edit the HTML as follows:
<p style="color:{expression/c_col}">Foundation Cracking: {FOUNDATIONCRACKING}</p>
<p style="color:{expression/s_col}">Foundation Spalling: {FOUNDATIONSPALLING}</p>
Which yields the following list:
