Table View Highlight

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
utony
Veteran Member
Posts: 93
Joined: 2020-04-03 18:37

Table View Highlight

Post by utony » 2022-11-21 21:32

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.

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

Re: Table View Highlight

Post by patsd102 » 2022-11-21 21:41

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
23.17

utony
Veteran Member
Posts: 93
Joined: 2020-04-03 18:37

Re: Table View Highlight

Post by utony » 2022-11-22 08:07

Cool, I will work on that right now and see what happens.

utony
Veteran Member
Posts: 93
Joined: 2020-04-03 18:37

Re: Table View Highlight

Post by utony » 2022-11-22 10:32

doesn't work

utony
Veteran Member
Posts: 93
Joined: 2020-04-03 18:37

Re: Table View Highlight

Post by utony » 2022-11-22 11:00

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

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

Re: Table View Highlight

Post by jsetzer » 2022-11-22 11:11

There should be an error message in console, telling FIELD is undefined. Try Status instead of FIELD.
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

utony
Veteran Member
Posts: 93
Joined: 2020-04-03 18:37

Re: Table View Highlight

Post by utony » 2022-11-22 11:46

You are amazing!!! That did it thank you!

utony
Veteran Member
Posts: 93
Joined: 2020-04-03 18:37

Re: Table View Highlight

Post by utony » 2022-11-22 15:00

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

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

Re: Table View Highlight

Post by onoehring » 2022-11-22 16:16

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

utony
Veteran Member
Posts: 93
Joined: 2020-04-03 18:37

Re: Table View Highlight

Post by utony » 2022-11-22 20:57

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.

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

Re: Table View Highlight

Post by jsetzer » 2022-11-23 01:35

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

utony
Veteran Member
Posts: 93
Joined: 2020-04-03 18:37

Re: Table View Highlight

Post by utony » 2022-11-23 11:09

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-

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

Re: Table View Highlight

Post by jsetzer » 2022-11-23 11:21

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

utony
Veteran Member
Posts: 93
Joined: 2020-04-03 18:37

Re: Table View Highlight

Post by utony » 2022-11-23 11:40

I'll give it shot thanks!

Post Reply