Changing colors in a list based on survey answer

RobertBorchert

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.

But here are the results.  The first 2 yes answers are red. The first No answer should be blue (in the final result they will be black).  Then it changes everything back to red for the next Yes answer. 

 

 

 

 

jcarlson

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: