Page 1 of 3

Color Record Row in Table View Based on Field Value

Posted: 2014-08-27 02:13
by Kire5
Hey everyone,

I've been banging around at this for a few days now and am turning to this ever helpful community once again for assistance =)

Say I have a table called "Table" with a field called "Field"... Id like to change the background color of the row for any records where the value of "Field" = x.
For instance, for any records in which "Field" = "Important", let's turn the background for that row (in table view) red. Can that be done? I'd settle for turning the text of the entire row red but I'd much rather be able to change the background color of the row itself if possible.

Even if this necessitates editing files beyond hooks, I'd really like to have this functionality. This thread appears to be on the right path: http://forums.appgini.com/phpbb/viewtopic.php?f=8&t=577 but not quite what I'm trying to accomplish.

Any nudge in the right direction would be immensely appreciated!

Re: Color Record Row in Table View Based on Field Value

Posted: 2014-08-27 18:16
by udayvatturi
I am not sure but i think magic hooks will get your work done, but you may need to write a complex logic. If i get time i will try to give you one.

Re: Color Record Row in Table View Based on Field Value

Posted: 2014-08-27 23:36
by Kire5
Thank you... If anyone else has any pointers, example code, etc that'd be great. In the meantime I'm going to keep at it. I'll post the solution once I get it sorted if I happen upon it first. Thanks!

Re: Color Record Row in Table View Based on Field Value

Posted: 2014-09-21 14:23
by casjazz
Hello Kire5
I needed it for my solution, and made it by modifying header.php, i'm not that good to explain in english, but here is what I inserted before </head>
Hope you find it useful.


if($x->TableTitle == 'Lektioner')
{
$css_title ='lektioner';
// I need to change the color depending on value of `lektioner`.`kategori`
$res=sql("SELECT `lektioner`.`id`, `lektioner`.`kategori` ".
"FROM $x->QueryFrom $x->QueryWhere "
, $eo);

if (mysqli_num_rows($res))
{
// setting 4 colors
$gul='#ffff00';
$roed='#f4cccc';
$blaa='#cfe2f3';
$groen='#d9ead3';


$kategori_css .='<style> '."\n";




while ($row = mysqli_fetch_row($res))
{

switch($row[1]){
case '1':
$kategori_color = $gul;
break;

case '2':
$kategori_color = $roed;
break;

case '3':
$kategori_color = $blaa;
break;

case '4':
$kategori_color = $groen;
break;

}

// write css to give all cells in that row the same color depending on value of lektioner`.`kategori`
$kategori_css .= '#'.$css_title.'-lektioner_antal-'.$row[0].', #'.$css_title.'-kategori-'.$row[0].', #'.$css_title.'-reg-'.$row[0].' {background-color: '.$kategori_color.';}'."\n";
}

$kategori_css .='</style> '."\n";


}

echo $kategori_css;





}

Re: Color Record Row in Table View Based on Field Value

Posted: 2014-09-21 14:42
by Kire5
Hey casjazz,

Your post is perfectly understandable and greatly appreciated! =)
I will give this a try in a bit and report back. Regardless thank you so much for the effort!

Re: Color Record Row in Table View Based on Field Value

Posted: 2015-08-22 12:36
by dadablaze
The above code does not work for me. Please if some body can help in changing table row background base on a field value

Re: Color Record Row in Table View Based on Field Value

Posted: 2015-08-22 13:02
by dadablaze
Hello all,
Casjazz solution doesn't seem to work for me. can anybody help please

Re: Color Record Row in Table View Based on Field Value

Posted: 2015-10-28 18:52
by a.gneady
I know this is too late, but I'm posting a solution here in case some one stumbles upon this thread:

In the tablename_dv hook function, add the following code directly after case 'tableview' and before break;:

Code: Select all

$header="<%%HEADER%%><script>\$j(function(){
	\$j('td.tablename-fieldname').each(function(){
	  if(\$j(this).text() == 'Important'){
		\$j(this).parent().addClass('danger');
	  }
	})
})</script>";
Change tablename in the above code to the actual table name, and fieldname to the actual field name.

Re: Color Record Row in Table View Based on Field Value

Posted: 2016-10-12 11:32
by Nicolas
Dear A.Gneady
I've tried the above code and no result on the row colour on my app.
Using actual appgini 5.50 and the code is... table name is Cursos and field to look for CurEstado
case 'tableview':
$header="<%%HEADER%%><script>$j(function(){
$j('td.Cursos-CurEstado').each(function(){
if($j(this).text() == 'Otros'){
$j(this).parent().addClass('danger');
}
})
})</script>";
break;
Any hint??
Thank you
Nicolas

Re: Color Record Row in Table View Based on Field Value

Posted: 2016-10-13 12:34
by Noha Eshra
If this page is available online, please provide your URL to inspect it.

Re: Color Record Row in Table View Based on Field Value

Posted: 2016-10-14 21:56
by Nicolas
The app is online, but the access is restricted.... maybe I can send a PM with a temporary user?
Thank you
Nicolas

Re: Color Record Row in Table View Based on Field Value

Posted: 2016-10-17 08:27
by DevGiu
Nicolas wrote:The app is online, but the access is restricted.... maybe I can send a PM with a temporary user?
Thank you
Nicolas
Send a Support Request with the data and point in the text to this thread.

Re: Color Record Row in Table View Based on Field Value

Posted: 2017-02-27 01:51
by Alisson
I'm trying to edit without any lock a.gneady Code above to work with my table, it works great the way it is, but I need two modifications.
First I need to add a "else if" condition, in my case if value is COMPLETED .addClass('sucess'), if is IN PROGRESS .addClass('warning'). I believe all I have to do is add a else if condition, but it's not working.

Second, in another column, using the same code I would like column TIME DUE to blink if the current time is over the time value in the column.


I also need to make some changes in the status value so every time value changes to COMPLETED an email or text message (Twilio) is sent to the user who posted the row, I just started coding so this is way out of my league, if anyone can please tell me if someone here in the forum that I can pay to do this for me I'll appreciate.

Thanks.

Re: Color Record Row in Table View Based on Field Value

Posted: 2017-02-27 04:09
by Alisson
Ok, I figure it out the else if problem, next the OVERDUE...

Re: Color Record Row in Table View Based on Field Value

Posted: 2017-03-09 05:51
by xbox2007
i use same code but not working

Re: Color Record Row in Table View Based on Field Value

Posted: 2020-11-17 00:21
by SkayyHH
it doesn't work for me either. does someone have it going?

Thanks much!

Re: Color Record Row in Table View Based on Field Value

Posted: 2020-11-17 01:19
by zibrahim
Hi there,
I am using this code for my projects.
As mentioned also in the code, code location file is in hooks/footer-extras.php
Change the TABLENAME and FIELDNAME accordingly.

Code: Select all

<!-- Highlight row with bootstrap variation classes if meet the criteria  -->
<!-- code location : hooks/footer-extras.php -->
<script>
	$j(function(){
		$j('.TABLENAME-FIELDNAME').each(function(){
			var status = $j(this).text();
            if(status == 'Important'){
				$j(this).parents('tr').addClass('danger');
            }
			if(status == 'Approved'){
				$j(this).parents('tr').addClass('success');
			}			
		})
	})
</script>
Good luck and stay safe.

Re: Color Record Row in Table View Based on Field Value

Posted: 2020-11-17 06:46
by SkayyHH
Hi,

thanks much for the code. It works perfectly :-)

Do you know why it doesn't work in the table name.js file?

And do you perhaps remember how I can only mark the relevant field in the table and not the whole row?

Thank you again !!

Re: Color Record Row in Table View Based on Field Value

Posted: 2020-11-17 08:53
by zibrahim
Hello there,
I'm glad it helped.
Actually, you can also apply it in individual tablename-tv.js (tv :table view.... not dv :detail view).
I have tested it and produced similar result.
To answer your second question, if you just want the field background, just remove the .parents('tr') part like this.

Code: Select all

$j(function(){
    $j('.TABLENAME-FIELDNAME').each(function(){
        var status = $j(this).text();
        if(status == 'Important'){
            $j(this).addClass('danger');
        }
        if(status == 'Approved'){
            $j(this).addClass('success');
        }			
    })
})
(no <script> tag needed if you put it in .js (javascript) file, but if you put it in .php file, remember to put the <script> tag)

Good luck and stay safe.

Re: Color Record Row in Table View Based on Field Value

Posted: 2020-11-17 11:10
by SkayyHH
Perfect. Thanks you so much!

Re: Color Record Row in Table View Based on Field Value

Posted: 2020-11-17 23:50
by SkayyHH
Hi,

have you ever processed a date with it?

So a highlight if a date is older than today?

Many greetings, Kai

Re: Color Record Row in Table View Based on Field Value

Posted: 2020-11-20 01:38
by Alisson
This code works for me for dates older than today, just change "tablename-date".

Code: Select all

jQuery(document).ready(function() {
  var tbody = $j('tbody');
  tbody.find('tr').each(function(){
    var dateTD = $j($(this).querySelector('.tablename-date'));
    var date = dateTD.text();
    var today = new Date(Date.now()).toLocaleString().split(',')[0]
  
    if (date < today)
    dateTD.addClass('danger');
  });
});

Re: Color Record Row in Table View Based on Field Value

Posted: 2020-11-20 09:08
by SkayyHH
This works perfect. Thank you so much, Alisson!!!

Kai

Re: Color Record Row in Table View Based on Field Value

Posted: 2020-11-20 09:23
by SkayyHH
One more question :-)

I have to highlight a field when it's someone's birthday. How do I get the comparison "data = today" only in relation to the month and day? Do you know that too?

thank you very much.

Re: Color Record Row in Table View Based on Field Value

Posted: 2021-02-02 06:46
by jbaldree
This works to color one field in the table, but I need to color three and can not figure out how to do that. I also need to color: students.ell and students.504

function students_header($contentType, $memberInfo, &$args) {
$header='';

switch($contentType) {
case 'tableview':
$header="<%%HEADER%%><script>\$j(function(){
\$j('td.students-ese').each(function(){
if(\$j(this).text() == 'Yes'){
\$j(this).parent().addClass('warning');
}
})
})</script>";