Change The Color Of The Text Based On Criteria In If Statement

[NJGonzo]

I am trying to change the color of the text in a data page list view.  I already have a script in place in an HTML Block that changes the Background color based on criteria in an if statement. I figured it would be a simple modification of this script to change the variable from "backgroundcolor" to something else. (perhaps "foregroundcolor" or "textcolor"?) But nothing I try works. and I can't find anything online that mentions anything about this.  Any ideas would be appreciated.  Here is the script I am currently using to control my background color:

 

 

[@field:Complete]


<a id="visi[@field:Record_Number]">


<script>
var isi = document.getElementById("visi[@field:Record_Number]");

if('[@field:Firm_Deadline]' == 'Yes'){
isi.parentNode.parentNode.style.backgroundColor = '#A00101';
}


</script>

 

 

Thanks in advance!

[iren]

Hi NJGonzo,

 

If I understand correctly, you want to change the color of all values in the fields.

 

You can use following code in HTML block field:

 

<a id="visi[@field:autonumber]"></a>

<script>

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

if('[@field:text]' == 'Yes'){

var listItem = isi.parentNode.parentNode;

var list = listItem.getElementsByClassName('cbResultSetData');

for(var i = 0; i < list.length; i++){

list.style.color = '#A00101';

}

}

</script>

Enter names of your fields instead of autonumber and text.

 

Hope it helps.

[NJGonzo]

I'm not trying to change the colors of the entire list, only the specific entry that meets the criteria of the if statement.  I tried to understand your logic Iren and modified it as follows, but it didn't work. Am I missing something? This code works properly to change the background color for the specific entries that meet the criteria, but I need to change the text color and the background colors.

 

Thanks.

 

 

[@field:Complete]


<a id="visi[@field:Record_Number]">


<script>
var isi = document.getElementById("visi[@field:Record_Number]");

if('[@field:Firm_Deadline]' == 'Yes'){
isi.parentNode.parentNode.style.backgroundColor = '#A00101';

var listItem = isi.parentNode.parentNode;

var list = listItem.getElementsByClassName('cbResultSetData');

list[@field:Record_Number].style.color = '#00FFFF';}

</script>

[iren]

Hi NJGonzo,

 

You can use the next code to change the text color and background only for the specific entry based on criteria:

 

<a id="visi[@field:autonumber]"></a>

<script>

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

if('[@field:text]' == 'Yes'){

var listItem = isi.parentNode.parentNode;

listItem.style.backgroundColor = '#A00101';

var list = listItem.getElementsByClassName('cbResultSetData');

for(var i = 0; i < list.length; i++){

list[i].style.color = '#00FFFF';

}

}

</script>  

 

Hope it works.

[NJGonzo]

unfortunately that is still not working. I copied and pasted it exactly as is and only changed the autonumber and text fields. The background color changes properly but the text color is still black.  I then removed the line that affected the background thinking I could try to just do the text, but it did nothing.  I'm wondering if the 'style.color' command is the correct command. or If I understand your code correctly, it looks like you are actually using

 

  isi.parentNode.parentNode.getElementsByClassName('cbResultSetData').style.color    ???

 

but what do I know?  

 

any other ideas?

 

Thanks in advance...

[LWSChad]

Right-click on an element and choose Inspect Element.

 

Find the Style section and look for multiple "color: ***" entries.

 

You may be styling that element unknowingly from a different style that is overriding the code above.

[iren]

Hi NJGonzo,

 

Could you please provide the link to your DataPage for investigation?

[iren]

Hi NJGonzo,

 

It seems it was misunderstanding. If you use the tabular search report, you can use the following code: 

<a id="visi[@field:autonumber]"></a>
<script>
var isi = document.getElementById("visi[@field:autonumber]");


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('[@field:text]' == 'Yes')
{
     v_tds[v_i].style.color='#00FFFF';
v_tr.style.backgroundColor = '#A00101';
}
}
</script> 

Enter names of your fields instead of autonumber and text.

 

Let me know if this helps. 

[NJGonzo]

Iren,

 

Thank you for all of your help. We are almost there.  The script changes the text color but only for the text in the 1st column (in my particular case - the date due), (take a look at the link I provided you)  How do we get it to change the text for all the items across the row?

 

Thanks again!

[iren]

Hi NJGonzo,

 

Please move down the HTML block with the code. It should be placed after all DataPage elements.

[NJGonzo]

That did it. THANKS!

[TroubleShooter]

Hello,

 

In addition to this thread, you might also want to check this solution which involves a little less JavaScript, but with some CSS.

 

Hope this helps

-TS

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

Just wanted to share this updated article from Caspio, it can dynamically change the font color of the values. However, it seems that it only works on Update forms and details page. 

 

https://howto.caspio.com/tech-tips-and-articles/dynamically-changing-colors-of-values/