Help with Conditional Formatting Based on Cell Value in Grouped Tabluar Datapage table.

[MarkMayhrai]

Hi everyone,

I'm hoping to get some help with conditional formatting in a grouped table. I have a table with data in columns shown in the picture. I'd like to automatically change the background color of cells based on their value:

• 1: Reddish background
• 2: Yellow background
• 3: Blue background
• 4: Bright green background
• NA: Light gray background

The table is also grouped, which might be why a script I found for a similar request didn't work.

I'd appreciate any guidance on achieving this conditional formatting, especially considering the grouping in the table.

Thanks in advance!

[Volomeister]

Hi @MarkMayhrai

Could you specify which script have you used and whether the responsiveness option on your tabular report is enabled or disabled?

[MarkMayhrai]

Hi Volmeister,

Responsiveness is disabled, and the below is the code placed in the Results Page.
--- This is the code in the Header ---

<style>
.DropBox .Option {
  font-size: 20px;
  padding-bottom: 5px;
}
</style>
<style>
#target table:nth-of-type(1) td:nth-of-type(17) {display: none;}
#target table:nth-of-type(1) th:nth-of-type(17) {display: none;}

</style>

<div id="target">

---Code in the footer---

</div>

<script >
    document.addEventListener('DataPageReady', function(event) {
        const statusField= document.querySelectorAll('td:nth-child(7)'); // '5' is field number for which styles have to be applied
  element.style.cssText =  'background: #df4d55;color: #ffffff';
        statusField.forEach(element => {
         if (element.innerHTML === '1') {
                element.style.cssText =  'background: #df4d55;color: #ffffff';
           } 
           else if (element.innerHTML === '2') {
                element.style.cssText =  'background: #fcc200;color: #ffffff';
           }
        else if (element.innerHTML === '3') {
                element.style.cssText =  'background: #96ded1;color: #000000';
           }
  else if (element.innerHTML === '4') {
                element.style.cssText =  'background: #20b2aa;color: #000000';
           }  else if (element.innerHTML === 'NA') {
                element.style.cssText =  'background: #e6e6e6;color: #000000';
           }
        });

  
    });
</script>

[Volomeister]

Hi @MarkMayhrai

You can use the following code:
 

<script>
if (document.DataPageReadyHandler == undefined) {

const columnsArr = [6,7,8,9,10,11,12,13]

const paintCell = (cell, color) => {
cell.style = color
}

const colorTableCells = () => {
document.querySelectorAll('.cbResultSetDataRow').forEach(row=>{
for (let i=0;i<columnsArr.length;i++) {
let cell = row.querySelector(`td:nth-child(${columnsArr[i]})`)
if (cell==null) return
switch (cell.innerHTML.trim()) {
  case '1': {paintCell(cell, 'background: #df4d55;color: #ffffff')
  break
  }
  case '2': {paintCell(cell, 'background: #fcc200;color: #ffffff')
  break
  }  
  case '3': {paintCell(cell, 'background: #96ded1;color: #000000')
  break
  }  
  case '4': {paintCell(cell, 'background: #96ded1;color: #000000')
  break
  }
    case 'NA': {paintCell(cell, 'background: #e6e6e6;color: #000000')
  break
  }
}

}

})
}

const DataPageReadyHandler = (e) => {
 if (e.detail.appKey != '[@cbAppKey]') { return }
colorTableCells ()
}

document.addEventListener('DataPageReady', DataPageReadyHandler)
document.DataPageReadyHandler = 'Enabled'
}

</script>

This part includes a columns array where cells need to be colored, so you may need to adjust it to match your column's order:
 

const columnsArr = [6,7,8,9,10,11,12,13]