Change Background Color on certain condition

[Alexray]

Hi everyone,

I wish to share JavaScript that can help you to highlight some records based on the condition.
 First you need to do for that is to paste the code into the Header:

<script>
const backgroundColor = '#ff000094'
const numberOfColumnForCondition = '5';
const condition = 'High';

document.addEventListener('DataPageReady', function(event) {
let lines = document.querySelectorAll('tr[data-cb-name="data"]');
for (let line of lines) {
  if (line.querySelector('td:nth-child(' + numberOfColumnForCondition + ')').innerText == condition) {
    line.style.backgroundColor = backgroundColor;
  }
}
})
</script>

Also you need to adjust first 3 lines of the code:
 1) const backgroundColor = '#ff000094'
 This constant is used for setting the color of the background.
 2) const numberOfColumnForCondition = '5';
 The number 5 is the number of the column where we are going to check the condition.
 3) const condition = 'High';
 High is the value of our condition.

So, in our example, we are going to highlight fields (rows) where the value in the 5th column equals 'High'.

[WimCasp]

Hi Alexray,

 

It is very nice solution, but it doesn't work in case if my result table have a sticky header with freezed columns. May you check this case and modify your code?

[Alexray]

Hello @WimCasp,

It works with 'Sticky header', but it does not work if you also enable 'Freeze the first'.
When 'Freeze the first' enabled, there is an event listener that removes styles added with that script.

[Scarey]

Fantastic, work well but suppose i want to change only the text color of High, not the background, what could be the code ?

 

tks

[Alexray]

Hi @Scarey,

You just need to change backgroundColor to Color. Try that code:

<script>
const color = '#ff000094'
const numberOfColumnForCondition = '5';
const condition = 'High';

document.addEventListener('DataPageReady', function(event) {
let lines = document.querySelectorAll('tr[data-cb-name="data"]');
for (let line of lines) {
  if (line.querySelector('td:nth-child(' + numberOfColumnForCondition + ')').innerText == condition) {
    line.style.color = color;
  }
}
})
</script>

The color is still red if you need another color, simply change HEX code '#ff000094' to whatever you need.

 

Let me know if it works properly.

[Ashfak1672]

Below is the code written once I came across similar kind of problem. Hope this will help you. You may write it in footer and this will change the color of target cells of result page based on conditions:

 

<script language="javascript" type="text/javascript">
var tbl = document.getElementsByTagName('table')[0];
var rows = tbl.getElementsByTagName('tr');
for (var row=1; row<rows.length;row++)
{
var cels = rows[row].getElementsByTagName('td');

if(cels[2].innerHTML=='P'){
cels[2].style.backgroundColor = '#ABEBC6';
}
else if(cels[2].innerHTML=='M'){
cels[2].style.backgroundColor = '#145A32';
}
else if(cels[2].innerHTML=='C'){
cels[2].style.backgroundColor = '#FDEDEC ';
}

if(cels[6].innerHTML==4){
cels[6].style.backgroundColor = '#D4EFDF';
}
else if(cels[6].innerHTML==3){
cels[6].style.backgroundColor = '#82E0AA';
}
else if(cels[6].innerHTML>4 && cels[6].innerHTML<8){
cels[6].style.backgroundColor = '#F7F386';
}

else if(cels[6].innerHTML>=8){
cels[6].style.backgroundColor = '#E5CA8D';
}

if(cels[13].innerHTML==0){
cels[13].style.backgroundColor = '#ED0F71';
}
else if(cels[13].innerHTML>55){
cels[13].style.backgroundColor = '#F8CFE1';
}

if(cels[21].innerHTML==1){
cels[21].style.backgroundColor = '#D4CBCF';
}

if(cels[23].innerHTML==0){
cels[23].style.backgroundColor = '#D4CBCF';
}

cels[26].style.color='red';
cels[26].style.fontWeight ='bold';

cels[27].style.color='blue';
cels[27].style.fontWeight ='bold';

cels[28].style.color='green';
cels[28].style.fontWeight ='bold';

if(cels[29].innerHTML==1){
cels[29].style.backgroundColor = '#F5B041';
}

if(cels[30].innerHTML>0){
cels[30].style.backgroundColor = '#F1C40F';
}

}
</script>

[kotireddy]

I have a LWC  record page with 8 fields , in that there is a field name " product" , i want to highlight with background color for product field  data starts with  "soaps-" . can you plz help to write a java script and html code 

[CoopperBackpack]

Hello @kotireddy,

Please test this code in the DataPage Footer (disable the HTML editor before pasting the code).
 

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

function colorHandler() {

  let lines = document.querySelectorAll("td:nth-child(5)");  // 5 is the colummn order number

  lines.forEach(line => {
    if(line.innerText.startsWith('soaps-')){
    line.parentElement.style.backgroundColor = '#d9c1c9';  // #d9c1c9 is the color code
    }
  })

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

This code works on Tabular Report DataPage. Please pay attention to the comment in the code: change the column number and color code. 
This is the example of the DataPage with this code applied:

[Corpcatalog]

From first example how would I add a change in colour to another different row based on another column? 

ie

if column 5 is yes then row is yellow

if column 6 is yes then row is green

[IamNatoyThatLovesYou]

Hi, just want to add information that you can also check the HowTo article that Casio has that changes the record based on the value. You may check it here.

[Kurumi]

Hello - Just wanted to share another way to dynamically change the color of the calculated value/field when a condition is met using CSS.

You can insert this in the Header:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

</style>

If you have more conditions or other fields, you can use this:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Inactive"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Active"])  {
  color: #29be25;
}
</style>

Hope it helps!

[RuisiHansamu]

This forum post is similar to this and it helped me out as well: 

 

[DavidBRX]

Works flawlessly.  Thank you!

What if we have multiple conditions same column

Say column #2

1. Yes
2. No
3. Pending

Can I change the colors in the same column based on condition?

[DrSimi]

hi @DavidBRX,

 

One quick way to  do that using the  original code from the author in this post is to simply add more variables with the values to check for and  duplicate the IF statements. 

Like this:

<script>
const numberOfColumnForCondition = '5';
const condition = 'High';
const condition2 = 'Medium';
const condition3 = 'Low';

document.addEventListener('DataPageReady', function(event) {
let lines = document.querySelectorAll('tr[data-cb-name="data"]');
for (let line of lines) {
  if (line.querySelector('td:nth-child(' + numberOfColumnForCondition + ')').innerText == condition) {
    line.style.backgroundColor = "green";
  }
  if (line.querySelector('td:nth-child(' + numberOfColumnForCondition + ')').innerText == condition2) {
    line.style.backgroundColor = "yellow";
  }
  if (line.querySelector('td:nth-child(' + numberOfColumnForCondition + ')').innerText == condition3) {
    line.style.backgroundColor = "red";
  }
}
})
</script>