How: Change "border" of table depending on value?

If you're a new user of AppGini, feel free to ask general usage questions, or look for answers here.
Post Reply
onoehring
Veteran Member
Posts: 263
Joined: 2019-05-21 22:42
Contact:

How: Change "border" of table depending on value?

Post by onoehring » 2019-08-21 12:45

Hi,

does anyone have an idea how I can accomplish this: A visual help for the user. When there is a change in the numbering I want to have a thicker line (or something similar - CSS class for that row?).
Please see the example in the image: I marked the change in the field (extra field in table): As in the first occurence 7 changes to 6, the record with the 7/1 should be marked somehow special.
I think I would need to intercept rendering of the page, check for the value and attach some CSS to that table row (tr element) - but how do I do this?

Lets disregard, that changing the sorting will mess up the view.
ec91a.png
ec91a.png (4.03 KiB) Viewed 423 times
Olaf

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 552
Joined: 2018-04-01 10:12

Re: How: Change "border" of table depending on value?

Post by pböttcher » 2019-08-21 14:00

Hi,

you can use the

hooks/TABLENAME-tv.js file and add something like

Code: Select all

$j(function(){ var old_text="";
  $j('td.TABLENAME-platz').each(function(){   // platz is the field you show in the screenshot, so I assume that is the one you look for.
    var new_text = $j(this).text();
    $compare="MAKE YOUR COMPARISON HERE";
    if ($comare) {
      $j(this).addClass('WHATEVER_CLASS_YOU_WANT_TO_ADD');  // this applies if you want to add it only the that cell
      $j(this).parent().addClass('WHATEVER_CLASS_YOU_WANT_TO_ADD');  // this applies if you want to add it only the that the complete row	
    }	
    old_text=new_text;
  })
})

onoehring
Veteran Member
Posts: 263
Joined: 2019-05-21 22:42
Contact:

Re: How: Change "border" of table depending on value?

Post by onoehring » 2019-08-21 14:17

Hi pbötcher,

that was quick. Thank you for that code and your time.

But I think I was unclear: The comparison needs to be with the previous shown record :-(
So here, if something changes from 8*F7-7/1 to 8*F7-6/3
Getting worse: I do not hold 7 (6) directly in a field in the records but only their foreign key. ....

Olaf

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 552
Joined: 2018-04-01 10:12

Re: How: Change "border" of table depending on value?

Post by pböttcher » 2019-08-21 14:37

hmm, you have the value in your table, so you can just use the value, so some kind of substring extraction (like in your case, use the string between the "-" and the "/" and compare this value.
The each(function() will go through each row, so old_text will have the text of the previous row which you compare to the text of the current row.
If they do not match, you will do your action.

onoehring
Veteran Member
Posts: 263
Joined: 2019-05-21 22:42
Contact:

Re: How: Change "border" of table depending on value?

Post by onoehring » 2019-08-21 14:47

Hi pbötcher,

thank you for your reply. I will need some time to test this. I will be reporting back.

Olaf

onoehring
Veteran Member
Posts: 263
Joined: 2019-05-21 22:42
Contact:

Re: How: Change "border" of table depending on value?

Post by onoehring » 2019-08-22 10:35

Hi pbötcher,
I was not able to get your code to work and would need your help again, please.

I noticed, that I can take a different approach. I do have a column ID_posZ which holds the height (Z coordinate). I now want to add a css class (tried this using your adjusted code below) to all TR-elements.
Example If ID_posZ holds a 1, it should add class="ebene_1" to the tr element showing the record.
How do I manage this?

I apologize already for messing up this code, but I am sure there are way simpler methods to add the css class than this (which fails).

So I ask for help again. Thank you already.

Code: Select all

$j(function(){ var old_text="";
	$j('td.TABLENAME-ID_posZ').each(function(){   // I did change TABLENAME to the tablename.
		var new_text = $j(this).text();
		var new_compare=0;
		//$compare="MAKE YOUR COMPARISON HERE";
		
		switch(new_text) {
			case 1:
			new_compare = 1;
			break;
			case 2:
			new_compare = 2;
			break;
			case 3:
			new_compare = 3;
			break;
			case 4:
			new_compare = 4;
			break;
			case 5:
			new_compare = 5;
			break;
			default:
			new_compare = FALSE;
		}
		
		var new_CSS_basename = "ebene_";
		var new_CSS_class = new_CSS_basename.concat(new_compare);
		
		if ($new_compare) {
			//      $j(this).addClass('WHATEVER_CLASS_YOU_WANT_TO_ADD');  // this applies if you want to add it only the that cell
			$j(this).parent().addClass('ebene_');  // this applies if you want to add it only the that the complete row	
		}	
		old_text=new_text;
	})
})[code]

Olaf

onoehring
Veteran Member
Posts: 263
Joined: 2019-05-21 22:42
Contact:

Re: How: Change "border" of table depending on value?

Post by onoehring » 2019-08-22 11:02

Hi,

maybe I found the solution in the Udemy course ( Section 12 - Lesson 1232 - How to highlight rows in the table base on value of some field ) I will check that and report back.

Olaf

onoehring
Veteran Member
Posts: 263
Joined: 2019-05-21 22:42
Contact:

Re: How: Change "border" of table depending on value?

Post by onoehring » 2019-08-22 11:14

Hi,

yes, the explanation from the video helped. It works when I am using this code

Code: Select all

$j(function () {
	$j('.ecomo_Container-ID_posZ').each(function(){ 
		var ebene = $j(this).text();
		
		var new_CSS_basename = "ebene_";
		var new_CSS_class = new_CSS_basename.concat(ebene);
		
		$j(this).parents('tr').addClass(new_CSS_class);
	})
});
Thanks a lot for your help, it's greatly appreciated.
Olaf

onoehring
Veteran Member
Posts: 263
Joined: 2019-05-21 22:42
Contact:

Re: How: Change "border" of table depending on value?

Post by onoehring » 2019-09-06 10:34

Hi

just remembered, that I wanted to post a screenshot of the result. Below you can see the result. I am using css classes ebene_1, ebene_2, ebene_3 and ebene_4 and ebene_5 (one could continue endlessly).
The javascript above reads the value from the column Ebene (let's translate is as height) and attaches the specific CSS class to the complete row.
As you can see this results in some stop-light effect (if like here, the list is sorted by Ebene DESC), where the lowest (1) is green and has a this border-bottom, second is yellow and the highest (here 3) is red. 4 would be white and 5 I defined a light blue.
ec95demo.png
ec95demo.png (3.66 KiB) Viewed 53 times
Olaf

Post Reply