Page 1 of 1

Field Color based on numeric value

Posted: 2019-07-27 16:52
by dharbitindy
The customizing AppGini course on Udemy has a good code example for changing a Row to a different color based on a Text value, but can anyone provide a short example for changing the color based on a Numeric value? Also, I really just want to change that one Cell's color, not the whole row. Changing the text within that Cell (Field), or the background of that field's cell would also work fine.

Attached is the Text version.

Thank you,
David

Re: Field Color based on numeric value

Posted: 2019-07-27 17:45
by kbarrett
Hi,

With a lot of help from a friend I used this code for text. I am not sure how well it will work for what you want but it might get you started. It is in the hooks folder and YourTableName.php (substitute YourTableName with your actual table name and cellname accordingly), added to the table header section
$header='';

switch($contentType){
case 'tableview':
header="<%%HEADER%%>";
ob_start();
?>

<script type="text/javascript">
$j(function() {
$j(".YourTableName-CellName").children().each(function() {
var status = $j(this).text();
var color = "";
var fontWeight = "";
switch (CellName) {
case "Text1": color="orange"; fontWeight="bold";
break;
case "Text2": color="Red"; fontWeight="bold";
break;
case "Text3": color="black"; fontWeight="bold";
break;
case "Text4": color="green"; fontWeight="bold";
break;
case "Text5": color="blue"; fontWeight="bold";
break;
}
$j(this).css("color", color);
$j(this).css("fontWeight",fontWeight);
});
});
</script>";
<?php
$new_layout = ob_get_contents();
ob_end_clean();
$header .= $new_layout;
break;

Hope that helps a bit

Re: Field Color based on numeric value

Posted: 2019-07-27 18:15
by jsetzer
In line 6 try this instead:

Code: Select all

 $j(this).addClass("text-danger");
 
Regards,
Jan

Re: Field Color based on numeric value

Posted: 2019-07-27 18:53
by dharbitindy
jsetzer wrote:
2019-07-27 18:15
In line 6 try this instead:

Code: Select all

 $j(this).addClass("text-danger");
 
Regards,
Jan
This didn't seem to work, but thank you!

Re: Field Color based on numeric value

Posted: 2019-07-27 19:03
by dharbitindy
kbarrett wrote:
2019-07-27 17:45
Hi,

With a lot of help from a friend I used this code for text. I am not sure how well it will work for what you want but it might get you started. It is in the hooks folder and YourTableName.php (substitute YourTableName with your actual table name and cellname accordingly), added to the table header section
$header='';

switch($contentType){
case 'tableview':
header="<%%HEADER%%>";
ob_start();
?>

<script type="text/javascript">
$j(function() {
$j(".YourTableName-CellName").children().each(function() {
var status = $j(this).text();
var color = "";
var fontWeight = "";
switch (CellName) {
case "Text1": color="orange"; fontWeight="bold";
break;
case "Text2": color="Red"; fontWeight="bold";
break;
case "Text3": color="black"; fontWeight="bold";
break;
case "Text4": color="green"; fontWeight="bold";
break;
case "Text5": color="blue"; fontWeight="bold";
break;
}
$j(this).css("color", color);
$j(this).css("fontWeight",fontWeight);
});
});
</script>";
<?php
$new_layout = ob_get_contents();
ob_end_clean();
$header .= $new_layout;
break;

Hope that helps a bit
Thank you, but unfortunately I couldn't make this work.

Re: Field Color based on numeric value

Posted: 2019-07-27 19:18
by dharbitindy
Jan,

This did partially work! However; when I change the value in the hooks folder, it still shows green. Screens attached. Thank you everyone for helping!

Re: Field Color based on numeric value

Posted: 2019-07-27 20:12
by jsetzer
You have changed the scenario :)

1) Use parseFloat() function to convert string from .text() return value into numeric value before comparing.

2) I think the condition should be (eff >= 98), not (eff => 98)
I guess this is your main bug.

3) Additionally change the selector from .eff-eff_percent to td.eff-eff_percent to exclude the column header.

Best,
Jan

Re: Field Color based on numeric value

Posted: 2019-07-27 20:42
by dharbitindy
You are awesome! Thank you very much Jan, works great!

Best regards,
David

Re: Field Color based on numeric value

Posted: 2019-08-03 04:01
by dharbitindy
Anyone know of a way to print the table including the colored field(s)? Out of the box, the color doesn't print. Not a big deal, but would be pretty cool.

Thanks,
David

Re: Field Color based on numeric value

Posted: 2019-08-05 21:39
by AEmpeno
would you mind share with us your final script? :)

Re: Field Color based on numeric value

Posted: 2019-08-19 03:02
by dharbitindy
My apologies AEmpeno, just saw your post. This is what I used and it works great. I'm sure that these experts above have a cleaner, better way to do this, and I'm very grateful for their help. This is in the footer-extras.php file below all of the other code. The indentations aren't showing up correctly, not sure how to correct it here. I'll post a screen shot to follow.

<script>
$j(function(){
$j('td.eff-eff_percent').each(function(){
var eff = $j(this).text();
if (parseFloat(eff) >= 98.00){
$j(this).addClass('success');
}
})
})
</script>

<script>
$j(function(){
$j('td.eff-eff_percent').each(function(){
var eff = $j(this).text();
if ((eff < 98.00) && (eff > 96.00)){
$j(this).addClass('warning');
}
})
})
</script>

<script>
$j(function(){
$j('td.eff-eff_percent').each(function(){
var eff = $j(this).text();
if (parseFloat(eff) < 96.00){
$j(this).addClass('danger');
}
})
})
</script

Re: Field Color based on numeric value

Posted: 2019-08-19 03:11
by dharbitindy
footer-extras.JPG
footer-extras.JPG (48.4 KiB) Viewed 4709 times