Advanced Formatting List

[BugPie]

Hello out there! Looking for some guidance and hints on how to format a list. Specifically I'm looking to evaluate 5 different fields and then color the text for that line item based on the value. Where I get hung up is trying to evaluate more than 1 field and then applying to color to only that field in the line item layout. I Don't want all text to be a color just the value from that field, if that makes sense.  

Seems like a long If then statement but I can't wrap my head around the structure. 

I have a 5 fields for completion that has an integer between 0 and 100 and null.  

In my list I have each of these five fields as well as some other fields and text. 

Hoping to color the text for the field if 0-33 = red, 34 - 66 = yellow and 67 - 99 = green, all else black. 

var comp1 = $datapoint.pc_1

var comp2 = $datapoint.pc_2

var comp3 = $datapoint.pc_3

var comp4 = $datapoint.pc_4

var comp5 = $datapoint.pc_5

[jcarlson]

To get single lines to be colored differently, you'll need to use inline styling. Since you're doing the same color scaling to each field, this would be a good spot for a custom function:

function colorize(x) {
  var col = When(
    x < 34, 'red',
    x < 67, 'yellow',
    x < 100, 'green',
    'black'
  )

  return `<span style="color:${col}">${x}</span>`
}

return {
  attributes: {
    comp1: colorize($datapoint['comp1']),
    comp2: colorize($datapoint['comp2']),
    comp3: colorize($datapoint['comp3']),
    comp4: colorize($datapoint['comp4']),
    comp5: colorize($datapoint['comp5'])
  }
}

Then in your line item template, bring the colorized text in "{expression/comp1}", etc.

[BugPie · Accepted solution]

Thank you @jcarlson I forgot about using "{expression/comp1}" as a way to call colorized text from the function. I need to take better notes from each of my projects but at least I'm getting better every time though. haha.