Conditional Font Colors

[DAG4Debt]

I used code provided by Capsio to successfully change background color of table rows depending on the value of a field, but cannot figure out how to do the same to change the font color of text in a row as opposed to the background color. Here is the script for the background:

var isi = document.getElementById("visi[@field:UniqueFieldName]");

if('[@Yes/No FieldName]' == 'Yes'){

isi.parentNode.parentNode.style.backgroundColor = '#YesColor';

}

else{

isi.parentNode.parentNode.style.backgroundColor = '#NoColor';

}

How can I change this to change the font color? Your elp is appreciated. Thank you.

[ShWolf]

Hi,

Try to insert next code:

<!–Tabular Report JavaScript:–>
<script>
var isi = document.getElementById("visi[@field:UniqueFieldName]");

var v_tr = isi.parentNode.parentNode;
var v_tds = v_tr.getElementsByTagName('td');
for(var v_i=0;v_i<v_tds.length;v_i++)
{
    if('[@Yes/No FieldName]' == 'Yes'){
    v_tds[v_i].style.color='#FontColorForYesRows';}
else{v_tds[v_i].style.color='#FontColorForNoRows';
}
}
if('[@Yes/No FieldName]' == 'Yes'){
v_tr.style.backgroundColor = '#BackgroundColorForYesRows';}
else{
v_tr.style.backgroundColor = '#BackgroundColorForNoRows';
}

</script> 

Let me know if this helps.

[DefinitelyNot31337]

Hello,

 

You may also want to consider this solution that involves a little less JS, but with some CSS

This is just a revised version of this howto article. The JavaScript controls the condition that adds to the class to the rows in the report. The CSS controls how the elements should be styled.

 

Add this code in an HTML Block:

<div id="visi-[@field:usz]"></div>

<script>

var isi = document.getElementById("visi-[@field:usz]");

if('[@field:usz]' == 'alpha'){
 isi.parentNode.parentNode.classList.add('custom-yes')
}

else{
 isi.parentNode.parentNode.classList.add('custom-no');
}

</script>

 

Add this code block in the Header:

<style>

[class*="custom-"] * {
  color: inherit !important;
}

.custom-yes {
  color: green;
  background-color: orange !important;
}

.custom-no {
  color: red;
  background-color: #46463c !important;
}

</style>

 

The upside on this practice is that we can easily style the given elements by adding/removing/modifying properties to rulesets.

 

Hope this helps.

-DN31337!

 

 

[MaraMara]

On 8/14/2019 at 6:12 PM, DefinitelyNot31337 said:

Hello,

You may also want to consider this solution that involves a little less JS, but with some CSS

This is just a revised version of this howto article. The JavaScript controls the condition that adds to the class to the rows in the report. The CSS controls how the elements should be styled.

(...........)

 

Hello DefinitelyNot.... (or anyone that might help =)  )

 

I have used this code you provided, and I see it working

Can you explain how to adapt it so that instead of changing the row it can change only the cell?

 

In my case I need to change the color of the cells under the row "Días", (it is a Calculated Field 1) if the value displayed is > 7

no need to paint the row, only the cell

 

Thank you very much in advance!

 

[Vitalikssssss]

Hi @maramedinan,

Solution provided above will not work unless the code placed in HTML block (row element).

I have created a different snippet for highlighting some particular cell that you can try. 

Please make sure that you replace number that refer to the column number in below code. Column count starts with "1".

The following code should go into DataPage Footer.

<script>

document.addEventListener('DataPageReady', function(event){

  let arr = document.querySelectorAll('td:nth-child(4).cbResultSetCalculatedField'); //change number of the column in "nth-child(4)"  

  arr.forEach(element => {


    if (element.innerHTML > 7) { // your target value
        
        element.style.background = 'red'; // color that would be applied on cell that meets the criteria
    }

  });

});

</script>

Hope this helps.

Regards,

Vitalikssssss

[MaraMara]

1 hour ago, Vitalikssssss said:

 

Thank you very much Vitaliksssss,

it is not working for me, maybe it is because i have grouping levels? I tried several several column numbers in "nth-child( )", but if I am not wrong it is column number 14.

here is a screenshot of my datapage, maybe I am doing something wrong, or you can give another idea

 

[Vitalikssssss]

Hi @maramedinan,

It looks like for report with grouping additional <tr> added in HTML, so you need to use: nth-child(15)

let arr = document.querySelectorAll('td:nth-child(15).cbResultSetCalculatedField');

Regards,

vitalikssssss

[MaraMara]

Hi Vitalikssssss, again thank you so much,

I tried with  td:nth-child(15) and some other more, 14, 16, 17.

I checked if I could find any syntax mistake also, but it does not work for me.

Is there anything else that I can show you to help me target the issue? here is my datapage: https://c0hbt141.caspio.com/dp/854b80004fdf5d094c6b4217bcb3

 

[Vitalikssssss]

Hi @maramedinan,

I have found that the snippet of code on your Datapage has a syntax error.

You should put opening bracket "{"after (element.innerHTML > 7)

Regards,

Vitalikssssss

[MaraMara]

6 hours ago, Vitalikssssss said:

Hi @maramedinan,

I have found that the snippet of code on your Datapage has a syntax error.

You should put opening bracket "{"after (element.innerHTML > 7)

Regards,

Vitalikssssss

 

 

Yesss! Now it works.

I tried many times, and I am a bit lost, but I think that it works best if it is in a html block, anyway after trying many times now I don't really know, so I left if both in the html block and the html footer.  (such a rookie thing to do, but l will clean it later ).

It works nice, but it does something funny: on first load, on the first page you don't see the color, if you go to the second page, you see the color and if you go back to page one now you see it.

 

It would be nice to fix that bit, but so far it looks great.

 

Thank you very very much Vitaliksssssssssssssssssssssssssssssssss

[Vitalikssssss]

Hi @MaraMara,

It looks like it is specific to your page because I have tried to create a similar one and JavaScript worked fine.

Perhaps you can export the Datapage along with dependencies (no need for data), so I could take a closer look.

You can send it as PM.

Regards,

vitalikssssss

[IamNatoyThatLovesYou]

On 6/3/2012 at 11:08 AM, DAG4Debt said:

I used code provided by Capsio to successfully change background color of table rows depending on the value of a field, but cannot figure out how to do the same to change the font color of text in a row as opposed to the background color. Here is the script for the background:

 

 

var isi = document.getElementById("visi[@field:UniqueFieldName]");

if('[@Yes/No FieldName]' == 'Yes'){

isi.parentNode.parentNode.style.backgroundColor = '#YesColor';

}

else{

isi.parentNode.parentNode.style.backgroundColor = '#NoColor';

}

 

How can I change this to change the font color? Your elp is appreciated. Thank you.

Hi @DAG4Debt

The answer on this forum post is similar to your question. You can check it for reference. 

 

[Kurumi]

This new post might help as well:

 

[futurist]

 Hi,

Jus to add, you may refer to this link on how to apply CSS (such as hiding) multiple sibling elements all at once:

 

[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!