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
User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
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 5874 times
Olaf

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

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

Post by pbottcher » 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;
  })
})
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

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

Post by pbottcher » 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.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
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

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
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

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
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

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
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

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
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 5504 times
Olaf

mysh_eireannach
Veteran Member
Posts: 35
Joined: 2016-02-16 22:31

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

Post by mysh_eireannach » 2020-06-15 00:09

Hi,

I watched the Udemy course ( Section 12 - Lesson 1232 - How to highlight rows in the table base on value of some field )

And created Script, tested, all work well! Thanks for hint.

Code: Select all

<script>
     $j(function(){
		 $j('.projects-project_status').each(function(){
			 var project_status = $j(this).text();
			 if (project_status == 'Text 1'){
                   $j(this).parents('tr').addClass('success');
            }		
			 if (project_status == 'Text 2'){
                   $j(this).parents('tr').addClass('warning');
            }		
			if (project_status == 'Text 3'){
                   $j(this).parents('tr').addClass('danger');
            }		
	    })
	 })	 
	 
</script>
But, if I don't want highlight full row, could I highlight only one Cell?

Or could I color text in Row, or even in the cell?

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

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

Post by onoehring » 2020-06-15 05:40

Hi,

just copy and pasted your code (with adjustments) but I did not test anything.
Try something like the code below, where I removed .parents('tr'), as we do not want to add to parents, but to self

Code: Select all

<script>
     $j(function(){
		 $j('.projects-project_status').each(function(){
			 var project_status = $j(this).text();
			 if (project_status == 'Text 1'){
                   $j(this).addClass('success');
            }		
			 if (project_status == 'Text 2'){
                   $j(this).addClass('warning');
            }		
			if (project_status == 'Text 3'){
                   $j(this).addClass('danger');
            }		
	    })
	 })	 	 
</script>
Olaf

mysh_eireannach
Veteran Member
Posts: 35
Joined: 2016-02-16 22:31

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

Post by mysh_eireannach » 2020-06-15 07:51

Hi Olaf,

Your code adjustment work perfect!

Thanks.

I tried applied same rules for child-table, but for some reason didn't work.

Should I do further code adjustments for child-table code, or just wrong hook/footer-extras.php file for my code?

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

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

Post by onoehring » 2020-06-15 09:41

Hi,

what do you mean by child table? Do you mean the details view?
I am not sure where you placed your code but in hook/footer-extras.php it would create such a behavior for _all_ tables. If you want specific tables only, you might want to place the code in hooks/tablename-tv.js or hooks/tablename-dv.js

Olaf

mysh_eireannach
Veteran Member
Posts: 35
Joined: 2016-02-16 22:31

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

Post by mysh_eireannach » 2020-06-15 10:35

Hi Olaf,

Thanks again!

I find that, If I add my script to file templates/children-tablename.php I got successful result.

Screenshot 2020-06-15 at 11.29.44.png
Screenshot 2020-06-15 at 11.29.44.png (203.26 KiB) Viewed 4698 times

But if I add my script to hooks/tablename-tv.js or children-tablename-tv.js no result at all.

Because templates/children-table name.php rewritable file, I need hint, where I should save my script in hooks?

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

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

Post by onoehring » 2020-06-15 13:26

Hi,

please check out my post here viewtopic.php?f=4&t=3114&p=10463&hilit=root+copy#p10463
But: You might want to read a little more in the forum. I suggest finding the spot where to place your code (maybe I was wrong when I suggested the -tv.js / -dv.js files in the hooks folder - but I believe that this is the right spot).
When you place code in these files, remember, that you must not use

Code: Select all

<script>
     $j(function(){
		 $j('.projects-project_status').each(function(){
			 var project_status = $j(this).text();
			 if (project_status == 'Text 1'){
                   $j(this).addClass('success');
            }		
			 if (project_status == 'Text 2'){
                   $j(this).addClass('warning');
            }		
			if (project_status == 'Text 3'){
                   $j(this).addClass('danger');
            }		
	    })
	 })	 	 
</script>
but simply drop the <script> and </script> lines and use this:

Code: Select all

     $j(function(){
		 $j('.projects-project_status').each(function(){
			 var project_status = $j(this).text();
			 if (project_status == 'Text 1'){
                   $j(this).addClass('success');
            }		
			 if (project_status == 'Text 2'){
                   $j(this).addClass('warning');
            }		
			if (project_status == 'Text 3'){
                   $j(this).addClass('danger');
            }		
	    })
	 })	 	 
Olaf

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

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

Post by pbottcher » 2020-06-15 17:51

Hi,
But if I add my script to hooks/tablename-tv.js or children-tablename-tv.js no result at all.

Because templates/children-table name.php rewritable file, I need hint, where I should save my script in hooks?
This happens because you code is executed too early. The child tables are not loaded yet and hence cannot be updated.
Check that the child tables are loaded and then execute the code.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

mysh_eireannach
Veteran Member
Posts: 35
Joined: 2016-02-16 22:31

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

Post by mysh_eireannach » 2020-06-15 22:17

Hi Olaf,

Thanks for help, but as mention Pböttcher below, if I place code into hooks/tablename-dv.js code is executed too early, before children-tablename.php loaded.
As you recommend, if place code into hooks/tablename-tv.js all work well as normal table view, but not as children-table in some othe detail view tables.

I played around, and temporary plese code into templates/children-tablename.php but need find long term solution using hooks option.

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

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

Post by onoehring » 2020-06-18 13:23

Hi,

you can also use some code to wait. Something like this maybe

Code: Select all

	<script>
	//set image again once document is ready
	$(function() {
		YOUR CODE HERE
	});
	</script>
or longer

Code: Select all

<script>
	$(document).ready(function () {
		YOUR CODE HERE
	});
	</script>
Olaf

Post Reply