Advanced/conditional formatting to change text color in list

[dwold]

I am trying to assign text color based on attributes for an event_type field. For some reason, it doesn't recognize the colors that are assigned. See anything that I am missing?

var eventColor = $datapoint.event_type

if(eventColor == 'Incident Activation'){
    return {textColor:'#ADFF8C'}
} else if(eventColor == 'Discussion-Based Exercise'){
    return {textColor:'#FFC379'}
} else if(eventColor == 'Operations-Based Exercise'){
    return {textColor:'#71C1FD'}
} else {
    return {textColor:'#FD7F7F'}
}

return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'#adadad',
  selectionColor: '#fcfc86',
  selectionTextColor: '#fcfc86',
   // attributes: {
    // attribute1: '',
    // attribute2: ''
  // }
}

@jcarlson 

@JenniferAcunto 

[KenBuja · Accepted solution]

You have to set a variable to use with textColor. Also, Decode is a good replacement for if...else statements like this.

var color = Decode($datapoint.event_type, 'Incident Activation', '#ADFF8C',
                                          'Discussion-Based Exercise', '#FFC379',
                                          'Operations-Based Exercise', '#71C1FD',
                                          '#FD7F7F')
return {
  textColor: color,
  backgroundColor: '',
  separatorColor:'#adadad',
  selectionColor: '#fcfc86',
  selectionTextColor: '#fcfc86',
   // attributes: {
    // attribute1: '',
    // attribute2: ''
  // }
}

[dwold]

@KenBuja thanks for looking at this! Using decode I am still getting a similar result with them all having the same text color

[KenBuja]

I'm using the same code and am getting the different colors as expected.

Does your field use a Domain? If so, you'll have to get the DomainName to use in the Decode

var color = Decode(DomainName($datapoint, 'event_type'),

[dwold]

@KenBuja that was it. I needed to use the DomainName. Thank you for your help, much appreciated!!

[jcarlson]

Using the textColor key in advanced formatting is only useful when you want all the text to change, but it looks like you're applying different text colors to different parts of the list item template.

Include your color variable in the attributes section, then they can be referenced when you look at the template's source. Have your return object like this:

return {
  separatorColor:'#adadad',
  selectionColor: '#fcfc86',
  selectionTextColor: '#fcfc86',
  attributes: {
    color
  }
}

In a dictionary, if the key name and the variable are the same, like {color: color}, you can reference it once.

Then if you view the source on your template, find the <div> or <p> element that contains the event name (I'm assuming that's what you want colored?) and add some inline styling.

<p style="color:{expression/color}">{field/event_name}</p>