Field Color based on numeric value

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
dharbitindy
Veteran Member
Posts: 32
Joined: 2019-05-26 18:38

Field Color based on numeric value

Post by dharbitindy » 2019-07-27 16:52

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
Attachments
footer-extras-php.JPG
footer-extras-php.JPG (21.5 KiB) Viewed 502 times

kbarrett
Veteran Member
Posts: 50
Joined: 2019-02-24 16:35
Location: Calgary Alberta

Re: Field Color based on numeric value

Post by kbarrett » 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

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 257
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Field Color based on numeric value

Post by jsetzer » 2019-07-27 18:15

In line 6 try this instead:

Code: Select all

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

dharbitindy
Veteran Member
Posts: 32
Joined: 2019-05-26 18:38

Re: Field Color based on numeric value

Post by dharbitindy » 2019-07-27 18:53

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!

dharbitindy
Veteran Member
Posts: 32
Joined: 2019-05-26 18:38

Re: Field Color based on numeric value

Post by dharbitindy » 2019-07-27 19:03

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.

dharbitindy
Veteran Member
Posts: 32
Joined: 2019-05-26 18:38

Re: Field Color based on numeric value

Post by dharbitindy » 2019-07-27 19:18

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!
Attachments
EffTable.JPG
EffTable.JPG (42.34 KiB) Viewed 491 times
footer-extras-php.JPG
footer-extras-php.JPG (20.58 KiB) Viewed 491 times

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 257
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Field Color based on numeric value

Post by jsetzer » 2019-07-27 20:12

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

dharbitindy
Veteran Member
Posts: 32
Joined: 2019-05-26 18:38

Re: Field Color based on numeric value

Post by dharbitindy » 2019-07-27 20:42

You are awesome! Thank you very much Jan, works great!

Best regards,
David

dharbitindy
Veteran Member
Posts: 32
Joined: 2019-05-26 18:38

Re: Field Color based on numeric value

Post by dharbitindy » 2019-08-03 04:01

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

AEmpeno
Veteran Member
Posts: 50
Joined: 2018-01-04 18:48

Re: Field Color based on numeric value

Post by AEmpeno » 2019-08-05 21:39

would you mind share with us your final script? :)

dharbitindy
Veteran Member
Posts: 32
Joined: 2019-05-26 18:38

Re: Field Color based on numeric value

Post by dharbitindy » 2019-08-19 03:02

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

dharbitindy
Veteran Member
Posts: 32
Joined: 2019-05-26 18:38

Re: Field Color based on numeric value

Post by dharbitindy » 2019-08-19 03:11

footer-extras.JPG
footer-extras.JPG (48.4 KiB) Viewed 357 times

Post Reply