Color Record Row in Table View Based on Field Value
Re: Color Record Row in Table View Based on Field Value
hi
in footer-extras.php the following code Highlight the entire coloum
$j('.Listini-Costo').each(function(){
var Costo = $j(this).text();
if(Costo => 0){
$j(this).addClass('danger');
}
})
I would like to change only the colour of the text. How?
thanks
in footer-extras.php the following code Highlight the entire coloum
$j('.Listini-Costo').each(function(){
var Costo = $j(this).text();
if(Costo => 0){
$j(this).addClass('danger');
}
})
I would like to change only the colour of the text. How?
thanks
Re: Color Record Row in Table View Based on Field Value
Hi,
customize the CSS class "danger" or take a new CSS class for it with your style
I.E. in header-extras.php
<style>
.myclass {
background: red !Important;
color: green !Important;
}
</style>
customize the CSS class "danger" or take a new CSS class for it with your style

I.E. in header-extras.php
<style>
.myclass {
background: red !Important;
color: green !Important;
}
</style>
Re: Color Record Row in Table View Based on Field Value
Hi
thanks for replay
I wrote your code in header-extras.php. Than? Should I change my code? I'm a little bit noobie
thanks for replay
I wrote your code in header-extras.php. Than? Should I change my code? I'm a little bit noobie
Re: Color Record Row in Table View Based on Field Value
Use "myclass" as the class name for your style. You can call it what you want. You have to use the same class name in your code. So instead of addClass ('danger'); > addClass ('myclass');
Re: Color Record Row in Table View Based on Field Value
thanks! step by step i understand, but only the background change. the text remains the same 

Re: Color Record Row in Table View Based on Field Value
Once again I ask of our magnanimous coders:
I have been working on this issue for my app also. I have managed to get code from this thread or another thread along the same lines working to a certain degree but wonder if anyone can help with a bit more.... I can get the rows in my table to turn Red and Green based on the criteria in a field; Safe / Unsafe are the two conditions based on input from a radio button. Obviously red for unsafe......
This works in table view, but if I am in Details view for the parent table and have child tables sowing the colored rows don't show up.
Here is the code I'm using in hooks/audit.php --- function audit_header.....
Thank you for any suggestions,
Ray
I have been working on this issue for my app also. I have managed to get code from this thread or another thread along the same lines working to a certain degree but wonder if anyone can help with a bit more.... I can get the rows in my table to turn Red and Green based on the criteria in a field; Safe / Unsafe are the two conditions based on input from a radio button. Obviously red for unsafe......
This works in table view, but if I am in Details view for the parent table and have child tables sowing the colored rows don't show up.
Here is the code I'm using in hooks/audit.php --- function audit_header.....
Code: Select all
case 'tableview+detailview':
$header="<%%HEADER%%><script>\$j(function(){
\$j('td.audit-saf_un').each(function(){
if(\$j(this).text() == 'Unsafe'){
\$j(this).parent().addClass('danger');
if(\$j(this).text() == 'Safe'){
\$j(this).parent().addClass('success');
}
}
})
})</script>";
break;
Ray
Re: Color Record Row in Table View Based on Field Value
You could try it this way in audit-saf_un.js :
But i think it works not in detail view, too...
Code: Select all
$j(function(){
$j('.audit-saf_un').each(function(){
var status = $j(this).text();
if(status == 'Safe'){
$j(this).addClass('success');
}
if(status == 'Unsafe'){
$j(this).addClass('danger');
}
})
})
Re: Color Record Row in Table View Based on Field Value
I had the same problem and thanks to the other guys the final script is this one. As you can see there's a function of "delay during load the page".
I hope it helps
I hope it helps
<script>
$j(function() {
function wait_for(data,callback,time=100) {
if($j(data).length != 0) {
callback();
return;
}
else {
setTimeout(function() {
wait_for(data,callback, time);
}, time);
}
}
wait_for('.table-striped',function() {
$j('.Agenda-Stato').each(function(){
var Stato = $j(this).text();
if(Stato == 'Attesa Azione Cliente'){
$j(this).parents('tr').addClass('warning');
}
if(Stato == 'Attesa Azione Tecnoplastic'){
$j(this).parents('tr').addClass('danger');
}
if(Stato == 'Attesa Azione Commerciale'){
$j(this).parents('tr').addClass('success');
}
})
})
})
</script>
Re: Color Record Row in Table View Based on Field Value
fixed!!!
$j('.Listini-Costo').each(function(){
var Costo = $j(this).text();
if(Costo => 0){
$j(this).children('a').css('color',"#ff3a3a")
}
})
$j('.Listini-Costo').each(function(){
var Costo = $j(this).text();
if(Costo => 0){
$j(this).children('a').css('color',"#ff3a3a")
}
})
Re: Color Record Row in Table View Based on Field Value
I have the code working as it is written in my app. the screen shots I meant to show everyone didn't come through so here they are again. As oyu can see, the color code works in table view as I have it now. I just need to figure out how to make it appear in the combination detail and table view.
Re: Color Record Row in Table View Based on Field Value
Try to use this in the footer-extras:
<script>
$j(function() {
function wait_for(data,callback,time=100) {
if($j(data).length != 0) {
callback();
return;
}
else {
setTimeout(function() {
wait_for(data,callback, time);
}, time);
}
}
wait_for('.table-striped',function() {
$j('.audit-saf_un').each(function(){
var status = $j(this).text();
if(status == 'Safe'){
$j(this).parents('tr').addClass('success');
}
if(status == 'Unsafe'){
$j(this).parents('tr').addClass('danger');
}
})
})
})
</script>
I hope it helps
<script>
$j(function() {
function wait_for(data,callback,time=100) {
if($j(data).length != 0) {
callback();
return;
}
else {
setTimeout(function() {
wait_for(data,callback, time);
}, time);
}
}
wait_for('.table-striped',function() {
$j('.audit-saf_un').each(function(){
var status = $j(this).text();
if(status == 'Safe'){
$j(this).parents('tr').addClass('success');
}
if(status == 'Unsafe'){
$j(this).parents('tr').addClass('danger');
}
})
})
})
</script>
I hope it helps

Re: Color Record Row in Table View Based on Field Value
federico,
I put your script into footer-extras and still have the correct row color in table view but not in detail+table view.
Ray
I put your script into footer-extras and still have the correct row color in table view but not in detail+table view.
Ray
Re: Color Record Row in Table View Based on Field Value
Hi federico,
I managed to get the child table row change color accordingly. Thank you!
However, if I have more than 10 child records (my limit display is 10 rows) and if I click the next set (< > button below the child table) the row color is not functioning anymore. Even if I go back to the previous set, the row colors are gone.
Any idea how we can improve the script?
Thanks.
I managed to get the child table row change color accordingly. Thank you!
However, if I have more than 10 child records (my limit display is 10 rows) and if I click the next set (< > button below the child table) the row color is not functioning anymore. Even if I go back to the previous set, the row colors are gone.
Any idea how we can improve the script?
Thanks.
Zala.
Appgini 23.16, MacOS 14.0 Windows 11 on Parallels.
Appgini 23.16, MacOS 14.0 Windows 11 on Parallels.
Re: Color Record Row in Table View Based on Field Value
zibrahim,
I use the following code in footer-extras for table view to allow scrolling through many records and keeping the header row visible. I also have the code being discussed in this thread for changing row background colors based on criteria in teh footer-extras. When I scroll through 500 records and then switch to the next page. All the colors are still there. Maybe something in that script could help you??
It still won't give me the colored rowi nt table=detail view.....
Ray
I use the following code in footer-extras for table view to allow scrolling through many records and keeping the header row visible. I also have the code being discussed in this thread for changing row background colors based on criteria in teh footer-extras. When I scroll through 500 records and then switch to the next page. All the colors are still there. Maybe something in that script could help you??
Code: Select all
<?php if ($_REQUEST['Print_x'] != 1) {
echo $_REQUEST['Print_x'];
echo <<<EOT
<style>
.table-responsive { overflow: auto; width: 100%; height: 66vh; }
.table th { background:#eef; }
</style>
<script>
\$j('table').append(\$j('thead'));
// check for IE
if (navigator.userAgent.search("NET4.0") >= 0) {
\$j('div.table-responsive').on('scroll', function() {
\$j('th', this).css('transform', 'translateY('+ this.scrollTop +'px)');
});
}
else {
if (navigator.userAgent.search("Edge") >= 0) { // check for Edge
\$j('.table-responsive').find('th').each(function() {\$j(this).css({"position": "sticky", "top": "0"})});
}
\$j('div.table-responsive').on('scroll', function() {
\$j('thead', this).css('transform', 'translateY('+ this.scrollTop +'px)');
});
}
</script>;
EOT;
} ?>
It still won't give me the colored rowi nt table=detail view.....
Ray
Re: Color Record Row in Table View Based on Field Value
Ray
are you sure about the table and column name? .TABLENAME-COLUMNNAME -> .audit-saf_un
are you sure about the table and column name? .TABLENAME-COLUMNNAME -> .audit-saf_un
Re: Color Record Row in Table View Based on Field Value
federico,
Yes, the table name is 'audit' and the field name is 'saf_un'. As mentioned earlier, the code works great at changing the row color while I'm in audit table view. So the tablename and field must be correct there. the issue when I have a project detail displayed and click on the tab below (Audit Findings). there is no row color displayed.
thank you for helping me to decipher this puzzle!!
Ray
Yes, the table name is 'audit' and the field name is 'saf_un'. As mentioned earlier, the code works great at changing the row color while I'm in audit table view. So the tablename and field must be correct there. the issue when I have a project detail displayed and click on the tab below (Audit Findings). there is no row color displayed.
thank you for helping me to decipher this puzzle!!
Ray
Re: Color Record Row in Table View Based on Field Value
Hi Ray,
I think I have found the solution for highlighting the cell (based on the value) for CHILD TABLE in PARENT TABLE detail view.
This is what I have done.
1. Put the following code in the PARENT_TABLENAME-dv.js
2. Save it and refresh your browser (force to refresh browser javascript if needed)
I hope this will help.
Stay safe.
I think I have found the solution for highlighting the cell (based on the value) for CHILD TABLE in PARENT TABLE detail view.
This is what I have done.
1. Put the following code in the PARENT_TABLENAME-dv.js
Code: Select all
// highlight child table cell according to the value
$j(function () {
setInterval(function () {
// The following script is for changing the cell color if condition matched
$j(function () {
$j(".CHILD_TABLENAME-CHILD_TABLEFIELDNAME").each(function () {
var status = $j(this).text();
if (status == "OK") {
$j(this).addClass("text-success").addClass("success");
}
if (status == "NG") {
$j(this).addClass("text-danger").addClass("danger");
}
});
});
}, 500);
});
I hope this will help.
Stay safe.
Zala.
Appgini 23.16, MacOS 14.0 Windows 11 on Parallels.
Appgini 23.16, MacOS 14.0 Windows 11 on Parallels.
Re: Color Record Row in Table View Based on Field Value
That seems to be doing the trick!!! Thank you for taking the time to look into this. You're awesome....
-
- Veteran Member
- Posts: 32
- Joined: 2021-06-12 21:01
Re: Color Record Row in Table View Based on Field Value
This isn't working for checkbox
I have status field, if check then add class success else danger,
Please help !!
I have status field, if check then add class success else danger,
Please help !!
Re: Color Record Row in Table View Based on Field Value
What are the values of your
status
field in TV? I guess the value is not `Ok` but there are icons instead.Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 23.16 Revision 1515 + all AppGini Helper tools
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
[code]...[/code]
blocks for better readabilityAppGini 23.16 Revision 1515 + all AppGini Helper tools
Re: Color Record Row in Table View Based on Field Value
If I'm right and there are icons inside the cells,var status = $j(this).text();
.text()
will not return any relevant value.Use
.html()
instead for getting the HTML value:Code: Select all
var status = $j(this).html();
console.log(status)
and check the actual values in console tab of your browser's development tools.Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 23.16 Revision 1515 + all AppGini Helper tools
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
[code]...[/code]
blocks for better readabilityAppGini 23.16 Revision 1515 + all AppGini Helper tools
Re: Color Record Row in Table View Based on Field Value
You may try this different approach:
Code: Select all
// file: hooks/TABLENAME-tv.js
function setVariationIfChecked(fieldname, variation = "success") {
jQuery(`td.${AppGini.currentTableName()}-${fieldname} i.glyphicon.glyphicon-check`).closest("tr[data-id]").addClass(variation);
}
function setVariationIfUnchecked(fieldname, variation = "danger") {
jQuery(`td.${AppGini.currentTableName()}-${fieldname} i.glyphicon.glyphicon-unchecked`).closest("tr[data-id]").addClass(variation);
}
jQuery(function() {
// if field 'is_cancelled' is checked, give the row success-background
setVariationIfChecked("is_cancelled");
// if field 'is_cancelled' is unchecked, give the row danger-background
setVariationIfUnchecked("is_cancelled");
});
- Attachments
-
- chrome_YcjfbGFTX4.png (85.19 KiB) Viewed 2701 times
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 23.16 Revision 1515 + all AppGini Helper tools
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
[code]...[/code]
blocks for better readabilityAppGini 23.16 Revision 1515 + all AppGini Helper tools
-
- Veteran Member
- Posts: 32
- Joined: 2021-06-12 21:01
Re: Color Record Row in Table View Based on Field Value
thank you sir , it works 

Re: Color Record Row in Table View Based on Field Value
Anyone want to help me highlight a row when a date field is 24 hours old?
TIA
Pat
TIA
Pat
5.98
Re: Color Record Row in Table View Based on Field Value
Hi,
sorry not the answer to your question, but does your request make sense?
Sooner or later all records will probably be older than 24 hours, thus everything will be colored. Maybe it is worth to switch and color all records that are younger than 24 hours?
Maybe you can find a solution yourself using zibrahim's reply ( posting.php?f=7&mode=reply&t=1322&sid=b ... db#pr16744 ): You essentially need jquery to calculate the time difference (seconds) for each row to the time the page is rendered. If this time is more (or less) then 24 hours call the function to color it e.g. add a CSS class.
Olaf
sorry not the answer to your question, but does your request make sense?
Sooner or later all records will probably be older than 24 hours, thus everything will be colored. Maybe it is worth to switch and color all records that are younger than 24 hours?
Maybe you can find a solution yourself using zibrahim's reply ( posting.php?f=7&mode=reply&t=1322&sid=b ... db#pr16744 ): You essentially need jquery to calculate the time difference (seconds) for each row to the time the page is rendered. If this time is more (or less) then 24 hours call the function to color it e.g. add a CSS class.
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view