Page 1 of 1
Table View Highlight
Posted: 2022-11-21 21:32
by utony
Hello AG family, I need some assistance!
I am tying to change the color of a row in my table based on a column status.
The table is named: Move_Log
and the column that needs to control the colors is called: Status
The three status are:
MC
WU
Scheduled
I would like the rows in the table to be highlighted the following color based on how the Status is set.
MC=success
WU=danger
Scheduled=primary
I need the following, a quick code solution, example, and directions where to put the code.
Thank you in advance.
Re: Table View Highlight
Posted: 2022-11-21 21:41
by patsd102
hi,
Have a play with this
Code: Select all
<script>
$j(function(){
$j('.TABLE-NAME-FIELD').each(function(){
var QRZ = $j(this).text();
if(FIELD == 'NAME TO BE COLORED'){
$j(this).parents('tr').addClass('info');
}
})
})
</script>
insert it in the footer-extras file
Re: Table View Highlight
Posted: 2022-11-22 08:07
by utony
Cool, I will work on that right now and see what happens.
Re: Table View Highlight
Posted: 2022-11-22 10:32
by utony
doesn't work
Re: Table View Highlight
Posted: 2022-11-22 11:00
by utony
<script>
$j(function(){
$j('.Move_Log-Status').each(function(){
var Status = $j(this).text();
if(FIELD == 'MC'){
$j(this).parents('tr').addClass('danger');
}
})
})
</script>
any help please?
Re: Table View Highlight
Posted: 2022-11-22 11:11
by jsetzer
There should be an error message in console, telling FIELD is undefined. Try Status instead of FIELD.
Re: Table View Highlight
Posted: 2022-11-22 11:46
by utony
You are amazing!!! That did it thank you!
Re: Table View Highlight
Posted: 2022-11-22 15:00
by utony
Additional ask....
If I want make field highlighted say yellow fill with red text, would you be able to assist me on that as well ???
Re: Table View Highlight
Posted: 2022-11-22 16:16
by onoehring
Hi utony,
as you are adding the CSS class danger to the field, just define a CSS to your liking (yellow with red text).
This should work.
You may want to add !important to color definitions in the class as well.
Olaf
Re: Table View Highlight
Posted: 2022-11-22 20:57
by utony
Olaf, anyway you can provide a code example and tell me where to put it? I am a bit of a beginner and not as advanced as you. any thanks in advance for your time.
Re: Table View Highlight
Posted: 2022-11-23 01:35
by jsetzer
There are certain default classes with predefined color settings in your selected theme:
- success
- info
- warning
- danger
Code: Select all
if(Status == 'MC'){
$j(this).parents('tr').addClass('warning');
}
It is recommended to use those because users are used to those colors and should immediately understand the meaning.
---
Anyway, if you need different custom color combinations, you can define your own CSS classes with color styles:
In header-extras.php:
Code: Select all
<style>
.custom-warning {
background-color: yellow !important;
color: red !important;
}
</style>
You can create multiple here with different class names.
Inside your javascript file:
Code: Select all
if(Status == 'MC'){
$j(this).parents('tr').addClass('custom-warning');
}
Re: Table View Highlight
Posted: 2022-11-23 11:09
by utony
Fanatic! Works like a charm!!!
Last question:
Now this option highlights the whole row, what if I just want to highlight the single field.
For my table is called
"Move_Log"
The field I want to highlight yellow with red text is "Off_1"
Condition:
If Off_1 is = "Open Slot" (show field background yellow with red text) displaying "Open Slot"
If Off_1 is = "N/A" (show field only as background black with black text"
Can you help me bring this home???
Thank you -JS-
Re: Table View Highlight
Posted: 2022-11-23 11:21
by jsetzer
Replace that one line by the following:
Code: Select all
$j(this).closest('td').addClass('custom-warning');
Note the difference at
.closest('td') instead of
.parents('tr')
Everything you need is on this page.
Re: Table View Highlight
Posted: 2022-11-23 11:40
by utony
I'll give it shot thanks!