Conditional text color change in table widget

lmott

@KenBuja i've seen you help others in similar situations.

I want to update some of the text formatting in my table. Before switching to advanced formatting, the table displayed "Yes" when the cell value was 1 and "No" when the value was 2. Now, I’d like to highlight the problematic cells — for example, by changing the text or background color. Specifically, if the cell shows "Yes" (or has a value of 1), I want it to be highlighted in red.

So far, everything I’ve tried either produces errors or only changes the text color of the entire column, not just the individual cells. How can I apply conditional formatting to only those specific cells?

 

kenbuja

There are a couple of ways to do that. You can put a simple IIf function in the backgroundColor property to change it if it's a certain value.

return {
  cells: {
    Portfolio_1: {
      displayText : Text($datapoint.Portfolio_1),
      textColor: '',
      backgroundColor: iif($datapoint.Portfolio_1 == 1, "#ff0000",""),
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

which will give you this

If you want to apply that logic to several columns, a better way would be to use a function that determines whether the cell should have a red background color, using the value of the $datapoints of the various columns.

function bgColor(input) {
  if (input == 1) return "#ff0000"
}

return {
  cells: {
    Portfolio_1: {
      displayText : Text($datapoint.Portfolio_1),
      textColor: '',
      backgroundColor: bgColor($datapoint.Portfolio_1),
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    Portfolio_2: {
      displayText : Text($datapoint.Portfolio_2),
      textColor: '',
      backgroundColor: bgColor($datapoint.Portfolio_2),
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    Portfolio_3: {
      displayText : Text($datapoint.Portfolio_3),
      textColor: '',
      backgroundColor: bgColor($datapoint.Portfolio_3),
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    Portfolio_4: {
      displayText : Text($datapoint.Portfolio_4),
      textColor: '',
      backgroundColor: bgColor($datapoint.Portfolio_4),
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
    Portfolio_5: {
      displayText : Text($datapoint.Portfolio_5),
      textColor: '',
      backgroundColor: bgColor($datapoint.Portfolio_5),
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
		
  }
}

which results in this