Red Font for > than Value

[DavidBRX]

Greetings.

Is there a way to make the "Actual" column results RED & BOLD when the value exceeds the "30%" column in the results page (as shown)?

Thanks in advance for your valued help.

David

 

[Tubby]

Follow the same stuff as here: 

Just change the fields to your own and there is also a comment if you only want to affect a single column: 

So it will be kinda like this:

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

<script>
var isi = document.getElementById("visi[@field:yourIDfield]");
if([@field:yourfield] > [@field:yourfield2]){
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
</script>

Note: You still need to change the column position(the number) and the field names to make it work for you DataPage. Cheers!

[DavidBRX]

Oh my

Let me give this a try. How you guys know this stuff is beyond me.  It's soooooo confusing to me.

Thank you Tubby, I'll cut and paste your code and attempt to edit it as you have suggested. 

[DavidBRX]

hmm.

Here's how I edited it and it doesn't seem to work. I'm sure it's my fault.

<div id="visi[@field:impervious#]"></div>

<script>
var isi = document.getElementById("visi[@field:impervious#]");
if([@field:impervious#] > [@calcfield:1#]){
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
</script>

I go here to select the data field from this drop down.

[Tubby]

3 minutes ago, DavidBRX said:

hmm.

Here's how I edited it and it doesn't seem to work. I'm sure it's my fault.

<div id="visi[@field:impervious#]"></div>

<script>
var isi = document.getElementById("visi[@field:impervious#]");
if([@field:impervious#] > [@calcfield:1#]){
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
</script>

I go here to select the data field from this drop down.

what does it output right now? can you grab a screenshot?

[Tubby]

Oh in case you missed TellMeWhy's comment at the bottom of his reply, you will need a unique field or an autonumber of some sort for the  yourIDfield part

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

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

[DavidBRX]

Like this?

 

<div id="visi[@field:impervious#1]"></div>
<script>
var isi = document.getElementById("visi[@field:impervious#1]");
if([@field:impervious#1] > [@calcfield:1#2]){
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
</script>

[Tubby]

1 minute ago, DavidBRX said:

Like this?

 

<div id="visi[@field:impervious#1]"></div>
<script>
var isi = document.getElementById("visi[@field:impervious#1]");
if([@field:impervious#1] > [@calcfield:1#2]){
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
</script>

Not really. It needs to be another field in your table. Go to the table that you are using for your DataPage and check the  "Table Design" tab and see if you have any field that is set as "unique" (unique checkbox is checked) or a field using the Data type "Autonumber" or "Random ID" or "GUID".  The reason behind that is because the parentNode function needs to know which row is the parent, And the identifier that we should use is unique so it wont get confused with another row when changing the colors.

[DavidBRX]

OK thank you for taking the time to help me.  Let me check my table design.

[Tubby]

Or maybe you can try [@cbRecordIndex#]. I haven't really tried it but I found it in this official forum post and it is used in a similar fashion.

<div id="visi[@cbRecordIndex#]"></div>
<script>
var isi = document.getElementById("visi[@cbRecordIndex#]");
if([@field:impervious#] > [@calcfield:1#]){
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
</script>

try this and remember to change (1) to the position of the column that you are trying to change. Try 6 or 7 maybe

[DavidBRX]

OK I don't see this.  Do I create another field and assign it an auto/unique number?

[Tubby]

Just now, Tubby said:

Or maybe you can try [@cbRecordIndex#]. I haven't really tried it but I found it in this official forum post and it is used in a similar fashion.

<div id="visi[@cbRecordIndex#]"></div>
<script>
var isi = document.getElementById("visi[@cbRecordIndex#]");
if([@field:impervious#] > [@calcfield:1#]){
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.color="red";
}
</script>

try this and remember to change (1) to the position of the column that you are trying to change. Try 6 or 7 maybe

Try this first and if it doesn't work, then yes. Add a new field and assign it as Autonumber then replace the [@cbRecordIndex#] in my pasted code and the (1) to (7).

[DavidBRX]

Tried this:

<div id="visi[@cbRecordIndex#7]"></div>
<script>
var isi = document.getElementById("visi[@cdRecordIndex#7]");
if([@cbRecordIndex#7] > [@cbRecordIndex#6]){
isi.parentNode.parentNode.querySelector("td:nth-child(7)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(7)").style.color="red";
}
</script>

Added the number to the table, and still no luck. :-(

[DavidBRX]

I also have this on the footer.  Should it be in the header?

[Tubby]

20 minutes ago, DavidBRX said:

Tried this:

<div id="visi[@cbRecordIndex#7]"></div>
<script>
var isi = document.getElementById("visi[@cbRecordIndex#7]");
if([@cbRecordIndex#7] > [@cbRecordIndex#6]){
isi.parentNode.parentNode.querySelector("td:nth-child(7)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(7)").style.color="red";
}
</script>

Added the number to the table, and still no luck. :-(

dont add numbers to the field names the number I am referring to is just the thing next to td:nth-child. Let me fix that for you:
<div id="visi[@cbRecordIndex#]"></div>
<script>
var isi = document.getElementById("visi[@cdRecordIndex#]");
if([@field:impervious#] > [@calcfield:1#]){
isi.parentNode.parentNode.querySelector("td:nth-child(7)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(7)").style.color="black";
}
</script>

Also changed the color in the "else" statement to black because else will be the default in case imprevious is NOT higher than 30%

For your other question, it should be on an HTML block. Add one on your Results Page.

[DavidBRX]

I'm sorry.  I'm really not getting this. :-(

[DavidBRX]

WAIT!  We alomst have it! :-)

<div id="visi[@field:number#]"></div>
<script>
var isi = document.getElementById("visi[@field:number#]");
if([@field:impervious#] > [@calcfield:1#]){
isi.parentNode.parentNode.querySelector("td:nth-child(7)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(7)").style.color="black";
}
</script>

I just need the "actual" column in red not the 30% before it.

 

YES, we're close!!!

[DavidBRX]

OK we almost have it.  THANK YOU SOOOO MUCH!

The only thing is it's not consistent.  The objective is to FLAG/RED FONT whenever the ACTUAL COLUMN exceeds the 30% COLUMN

You can see in four cases it's not catching it. :-(

I know this is probably an entirely different issue and you've been most helpful with the original isle at hand.

[DavidBRX]

System closed on me and I lost it.

Thanks for your help anyway.  This has been a taxing but learning experience.

[DavidBRX]

Got it back, let me save it before I lose it again.  Wheeewww

Here you can see the red boxes should be red, and the blue boxes shouldn't be.  This is probably a calculation issue I imagine. The intent was a good one though. :-(

Thanks so much for your time.

David

[DavidBRX]

Wait!  I removed the # symbol from the following code and that seems to have solved it.

 

<div id="visi[@field:number#]"></div>
<script>
var isi = document.getElementById("visi[@field:number#]");
if([@field:impervious] > [@calcfield:1]){
isi.parentNode.parentNode.querySelector("td:nth-child(8)").style.color="red";
}
else{
isi.parentNode.parentNode.querySelector("td:nth-child(8)").style.color="black";
}
</script>

[Tubby]

Glad that you are able to fix it yourself. Was just reading your replies now. Check your other records. I think the problem was with the format of Caspio's number where if you reach thousands, it adds a comma (,) that is not able to be compared as numbers causing the condition to fail. While removing the # works for commas, it removes, decimal values. (# represents number format in Caspio, removing it will make the number an integer, which has no decimals.) Check if values with only decimals as difference still works. If not, it will be need some additional lines of code to workaround it

[DavidBRX]

Hello Tubby,

 

You're absolutely AMAZING!  Thank you sooooo much for your time and expertise on this.

Ironically, for some odd reason (unknown to me), I removed the # symbol wherever referenced, and this seems to have fixed it. It now calculates all the figures correctly (see attached). Of course I welcome your feedback on why this happened so I can hopefully understand what happened behind the scene when I removed the # from the code.  My brain is melting now.

[CoopperBackpack]

Hello @DavidBRX,
You may check this post where I explained the issue with formatting a field as a Number (# sign)