Color Record Row in Table View Based on Field Value

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Kire5
Posts: 7
Joined: 2014-07-27 13:07

Color Record Row in Table View Based on Field Value

Post by Kire5 » 2014-08-27 02:13

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!

udayvatturi
AppGini Super Hero
AppGini Super Hero
Posts: 85
Joined: 2014-06-14 03:08
Location: India
Contact:

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

Post by udayvatturi » 2014-08-27 18:16

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.

Kire5
Posts: 7
Joined: 2014-07-27 13:07

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

Post by Kire5 » 2014-08-27 23:36

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!

casjazz
Posts: 5
Joined: 2014-09-21 14:11

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

Post by casjazz » 2014-09-21 14:23

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;





}

Kire5
Posts: 7
Joined: 2014-07-27 13:07

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

Post by Kire5 » 2014-09-21 14:42

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!

dadablaze
Posts: 2
Joined: 2015-08-22 12:33

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

Post by dadablaze » 2015-08-22 12:36

The above code does not work for me. Please if some body can help in changing table row background base on a field value

dadablaze
Posts: 2
Joined: 2015-08-22 12:33

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

Post by dadablaze » 2015-08-22 13:02

Hello all,
Casjazz solution doesn't seem to work for me. can anybody help please

User avatar
a.gneady
Site Admin
Posts: 1281
Joined: 2012-09-27 14:46
Contact:

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

Post by a.gneady » 2015-10-28 18:52

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.
:idea: AppGini plugins to add more power to your apps:
  • DataTalk is an innovative AppGini plugin based on ChatGPT that allows you to interact with your AppGini database using natural language questions, without writing any SQL. Check the demo video
  • Mass Update plugin: Update multiple records at once and improve your workflow efficiency.
  • Check our other plugins and get a generous discount of up to 30% when buying 2 or more plugins.

Nicolas
Veteran Member
Posts: 43
Joined: 2015-12-08 08:08
Location: Barcelona
Contact:

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

Post by Nicolas » 2016-10-12 11:32

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

Noha Eshra
Moderator
Posts: 82
Joined: 2013-11-11 19:21

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

Post by Noha Eshra » 2016-10-13 12:34

If this page is available online, please provide your URL to inspect it.

Nicolas
Veteran Member
Posts: 43
Joined: 2015-12-08 08:08
Location: Barcelona
Contact:

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

Post by Nicolas » 2016-10-14 21:56

The app is online, but the access is restricted.... maybe I can send a PM with a temporary user?
Thank you
Nicolas

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

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

Post by DevGiu » 2016-10-17 08:27

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.
/Giuseppe
Professional Outsourcing Services

Alisson
Veteran Member
Posts: 81
Joined: 2017-02-25 20:32

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

Post by Alisson » 2017-02-27 01:51

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.

Alisson
Veteran Member
Posts: 81
Joined: 2017-02-25 20:32

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

Post by Alisson » 2017-02-27 04:09

Ok, I figure it out the else if problem, next the OVERDUE...

xbox2007
Veteran Member
Posts: 129
Joined: 2016-12-16 16:49

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

Post by xbox2007 » 2017-03-09 05:51

i use same code but not working

SkayyHH
Veteran Member
Posts: 425
Joined: 2015-04-27 21:18

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

Post by SkayyHH » 2020-11-17 00:21

it doesn't work for me either. does someone have it going?

Thanks much!

User avatar
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

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

Post by zibrahim » 2020-11-17 01:19

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.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

SkayyHH
Veteran Member
Posts: 425
Joined: 2015-04-27 21:18

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

Post by SkayyHH » 2020-11-17 06:46

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 !!

User avatar
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

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

Post by zibrahim » 2020-11-17 08:53

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.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

SkayyHH
Veteran Member
Posts: 425
Joined: 2015-04-27 21:18

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

Post by SkayyHH » 2020-11-17 11:10

Perfect. Thanks you so much!

SkayyHH
Veteran Member
Posts: 425
Joined: 2015-04-27 21:18

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

Post by SkayyHH » 2020-11-17 23:50

Hi,

have you ever processed a date with it?

So a highlight if a date is older than today?

Many greetings, Kai

Alisson
Veteran Member
Posts: 81
Joined: 2017-02-25 20:32

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

Post by Alisson » 2020-11-20 01:38

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');
  });
});

SkayyHH
Veteran Member
Posts: 425
Joined: 2015-04-27 21:18

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

Post by SkayyHH » 2020-11-20 09:08

This works perfect. Thank you so much, Alisson!!!

Kai

SkayyHH
Veteran Member
Posts: 425
Joined: 2015-04-27 21:18

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

Post by SkayyHH » 2020-11-20 09:23

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.

jbaldree
Posts: 8
Joined: 2020-07-23 06:44

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

Post by jbaldree » 2021-02-02 06:46

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>";

Post Reply