Conditionally set cell back ground color

[SteveMott]

Hi

I am trying to set the background color of a cell based on the value returned by a calculated field.

Not sure what the javascript/css should be to achieve the background color change.

 

Thanks

Steve

 

[CoopperBackpack]

Hello @SteveMott,

Please add this script into the Footer section (don`t forget to disable the HTML editor on the Advanced tab before pasting):

<script>
if(typeof colorHandler == 'undefined') {

    function colorHandler() {
        const coloredField = document.querySelectorAll('td:nth-child(1)'); // 1 is the field order number that needed to be colored
        const conditionField = document.querySelectorAll('td:nth-child(9)'); // 9 is the field order number that stores condition
     
        conditionField.forEach((cell, index) => {
           if (cell.innerHTML === '1') {
                coloredField[index].style.backgroundColor = '#3EB489'; //change the color code if needed
           }       
        });

  document.removeEventListener('DataPageReady', colorHandler);
}
document.addEventListener('DataPageReady', colorHandler);
  
}
</script>

Feel free to update this thread if you have further questions. 

[SteveMott]

Hi CoopperBackpak

 

That's great. Many thanks.

 

Steve

[SteveMott]

Hi CoopperBackpak

 

I've put your code in and the coloring occurs in cell 2 of the wrong row.

In the attached image the last column indicates the result of calculated field 3 (value is 0 or 1). The change to the background appears in cell 1,  4 rows up

Can't figure it from the code!

Thanks

Steve

[SteveMott]

Sorry

Line 1 should read:

I've put your code in and the coloring occurs in cell 1 of the wrong row.

[CoopperBackpack]

Hello @SteveMott, 

could you please check if you have this option enabled on this Report?

Interactive Options -> Interactive sorting -> By dropdown list

[SteveMott]

Hi

Here is my current configuration:

 

Steve

[CoopperBackpack]

@SteveMott, thank you.

It looks strange
Could you test this code instead?

<script>
document.addEventListener('DataPageReady', colorHandler);

    function colorHandler(event) {
        const coloredField = document.querySelectorAll('.cbResultSetDataRow td:nth-child(1)'); 
        const conditionField = document.querySelectorAll('.cbResultSetDataRow td:nth-child(9)'); 

        conditionField.forEach((cell, index) => {
           if (cell.innerHTML === '1') {
                coloredField[index].style.backgroundColor = '#3EB489'; 
           }       
        });

  document.removeEventListener('DataPageReady', colorHandler);
}
</script>

 

[SteveMott]

Thanks CoopperBackpack, that did the trick!!!

Happy New Year

Steve