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/
federico
Veteran Member
Posts: 74
Joined: 2020-10-29 14:52

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

Post by federico » 2021-03-04 22:55

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

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

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

Post by SkayyHH » 2021-03-05 00:21

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>

federico
Veteran Member
Posts: 74
Joined: 2020-10-29 14:52

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

Post by federico » 2021-03-05 08:58

Hi
thanks for replay
I wrote your code in header-extras.php. Than? Should I change my code? I'm a little bit noobie

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

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

Post by SkayyHH » 2021-03-05 18:28

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

federico
Veteran Member
Posts: 74
Joined: 2020-10-29 14:52

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

Post by federico » 2021-03-05 21:07

thanks! step by step i understand, but only the background change. the text remains the same :shock:

rpierce
Veteran Member
Posts: 258
Joined: 2018-11-26 13:55
Location: Washington State

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

Post by rpierce » 2021-03-06 05:07

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.
projects-detail.JPG
audit1.JPG
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;
Thank you for any suggestions,
Ray

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

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

Post by SkayyHH » 2021-03-06 10:13

You could try it this way in audit-saf_un.js :

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');
			}			
		})
})
But i think it works not in detail view, too...

federico
Veteran Member
Posts: 74
Joined: 2020-10-29 14:52

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

Post by federico » 2021-03-06 11:23

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

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

federico
Veteran Member
Posts: 74
Joined: 2020-10-29 14:52

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

Post by federico » 2021-03-06 13:58

fixed!!!
$j('.Listini-Costo').each(function(){
var Costo = $j(this).text();
if(Costo => 0){
$j(this).children('a').css('color',"#ff3a3a")
}
})

rpierce
Veteran Member
Posts: 258
Joined: 2018-11-26 13:55
Location: Washington State

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

Post by rpierce » 2021-03-06 16:44

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.
audit1.JPG
audit1.JPG (60.31 KiB) Viewed 7310 times
projects-detail.JPG
projects-detail.JPG (121.04 KiB) Viewed 7310 times

federico
Veteran Member
Posts: 74
Joined: 2020-10-29 14:52

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

Post by federico » 2021-03-06 18:40

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

rpierce
Veteran Member
Posts: 258
Joined: 2018-11-26 13:55
Location: Washington State

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

Post by rpierce » 2021-03-06 20:48

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

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 » 2021-03-07 01:14

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

rpierce
Veteran Member
Posts: 258
Joined: 2018-11-26 13:55
Location: Washington State

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

Post by rpierce » 2021-03-07 04:59

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

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

federico
Veteran Member
Posts: 74
Joined: 2020-10-29 14:52

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

Post by federico » 2021-03-07 11:03

Ray
are you sure about the table and column name? .TABLENAME-COLUMNNAME -> .audit-saf_un

rpierce
Veteran Member
Posts: 258
Joined: 2018-11-26 13:55
Location: Washington State

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

Post by rpierce » 2021-03-07 19:39

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
audit1.JPG
Code works good here
audit1.JPG (60.31 KiB) Viewed 7252 times
projects-detail.JPG
If I click the Audit findings tab I want to see colored rows.
projects-detail.JPG (121.04 KiB) Viewed 7252 times

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 » 2021-03-08 08:29

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

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);
});
2. Save it and refresh your browser (force to refresh browser javascript if needed)

I hope this will help.

Stay safe.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

rpierce
Veteran Member
Posts: 258
Joined: 2018-11-26 13:55
Location: Washington State

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

Post by rpierce » 2021-03-08 15:55

That seems to be doing the trick!!! Thank you for taking the time to look into this. You're awesome....

zkarwinkar
Veteran Member
Posts: 32
Joined: 2021-06-12 21:01

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

Post by zkarwinkar » 2023-01-22 08:33

This isn't working for checkbox

I have status field, if check then add class success else danger,

Please help !!

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

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

Post by jsetzer » 2023-01-22 09:14

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 [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

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

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

Post by jsetzer » 2023-01-22 13:02

var status = $j(this).text();
If I'm right and there are icons inside the cells, .text() will not return any relevant value.

Use .html() instead for getting the HTML value:

Code: Select all

var status = $j(this).html();
Then 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 [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

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

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

Post by jsetzer » 2023-01-22 13:21

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
chrome_YcjfbGFTX4.png (85.19 KiB) Viewed 3382 times
Kind regards,
<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 readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

zkarwinkar
Veteran Member
Posts: 32
Joined: 2021-06-12 21:01

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

Post by zkarwinkar » 2023-01-23 19:28

thank you sir , it works :)

patsd102
Veteran Member
Posts: 142
Joined: 2013-01-15 19:59

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

Post by patsd102 » 2023-01-26 18:00

Anyone want to help me highlight a row when a date field is 24 hours old?

TIA

Pat
23.17

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1165
Joined: 2019-05-21 22:42
Location: Germany
Contact:

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

Post by onoehring » 2023-02-28 18:31

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

Post Reply