Setting Colour on font depending on their status!

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-01-10 13:47

Hi all guys, thank you so much for the help so far.
While I will study how to solve the problem and waiting for the JSETZER tutorial.
For the moment I have downgraded APPGINI to version 5.90 because it doesn't remove XSS.

Thanks again to everyone and I hope to solve this problem soon in order to use the latest version of APPGINI.

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

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-01-10 15:17

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

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-01-17 10:03

Thanks so much.
I try immediately.

We hope well! ;-)

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-02-23 12:51

Hello everybody,
I would like to ask you to better understand how to use the code to color the fields suggested by JSETZER.

I have tried using this code and up to this point I have no problems.

Code: Select all

function TEST_init(&$options, $memberInfo, &$args)
{
    $options_old = $options->QueryFieldsTV;
    $options_new = [];

    foreach ($options_old as $sql => $column) {
        if ($column == 'STATO') {
            $new_value = "concat('<span class=\"text-success\">', 'Colore: ', STATO, '</span>')";
            $options_new[$new_value] = $column;
        } else {
            $options_new[$sql] = $column;
        }
    }
    $options->QueryFieldsTV = $options_new;
    return true;
}
I would like to understand how I can color the different fields.
Only one field is colored with this code.

The previous code I used was this:

Code: Select all

function TEST_init(&$options, $memberInfo, &$args){
// modify the status field of the table view query to display 'no' invoices in bold red
	$ar=array_flip($options->QueryFieldsTV);
	$ar['STATO']="CASE 
			WHEN `TEST`.`STATO`='BIANCO' then '<b style=\"color: black;\">BIANCO</b>' 	
			WHEN `TEST`.`STATO`='ROSSO' then '<b style=\"color: red;\">ROSSO</b>'					
			WHEN `TEST`.`STATO`='VERDE' then '<b style=\"color: green;\">VERDE</b>'
			ELSE `TEST`.`STATO`
			END";
	$options->QueryFieldsTV=array_flip($ar);
	return TRUE;
	}

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

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-02-23 13:02

Check the rendered HTML in your dev-tools. As mentioned in the Tutorial Series, AppGini removes styles for security reasons. Exactly that was the initial reason for me for writing this tutorial series. I'm using CSS classes instead of CSS styles, because those will not be removed. You should consider using classes, too.
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

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-02-24 11:27

Hello and thanks for the reply.
I am also looking at and trying out the CSS classes from your tutorial.
I can't create a class that can fit what I need.
Could you suggest me an example to be able to give a color to each state?
How did I do with the previous code?

Thank you so much for your help, and for your patience.

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

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-02-24 11:54

Code: Select all

.test {
background-color: lime !important;
}
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

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-03-01 09:31

I apologize in advance.
But I don't have the knowledge to understand.
I'm trying to use the code you created in your tutorial, but I can color an entry.
In my project I have several states created in APPGINI in the Options List.

Each state on the TV must have a different color.
Which code should I use in order to have a different color for each state?

Thanks

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

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-03-01 12:46

In Part 7 of the Tutorial Series you can see how to return a string depending on SQL conditions.

If, for example, your query returns strings like 'state-a', 'state-b', 'state-c' then you will have to create CSS classes .state-a, .state-b and .state-c.

Example

Code: Select all

<style>
.state-a {
  color: lime !important;
  background-color: black !important;
  /* add more styling here */
}

/* add more styles here */
</style>
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

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-03-02 10:35

To understand well.
In order to have different colors for each state, will it be necessary to change the SQL conditions as well?

Compared to previous versions of APPGINI, to have this change everything becomes much more complicated.

I'll try.

Thank you very much for helping.

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

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-03-02 12:35

Compared to previous versions of APPGINI, to have this change everything becomes much more complicated.
That's the price for security, I'm afraid.

Personally speaking, I'm really happy AppGini cares for all those things and we don't have to implement all security related protection on our own. I can focus on developing business related apps. I don't have to spend too much time in watching hacker news, doing research and coding protection against new vulnerabilities by myself.
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: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-03-02 12:42

By the way and just for information:
if changing styles on server side (PHP) by using CSS classes as shown in the Tutorial Series is too complicated for some of you, it is also (and still) possible to use javascript (client side) for replacing strings inside table cells by HTML. If I remember right, there are a few how-to's here in the forum.
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

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-03-07 08:58

First of all, thank you again for the help and time you have dedicated to the tutorials.
I agree with you when you say that it is important to have raised the level of security, however, for those like me who are not specialized it is a little complicated to modify the hooks compared to previous versions.

Kind Regards,
Giulio

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-03-07 09:31

jsetzer wrote:
2022-03-02 12:42
By the way and just for information:
if changing styles on server side (PHP) by using CSS classes as shown in the Tutorial Series is too complicated for some of you, it is also (and still) possible to use javascript (client side) for replacing strings inside table cells by HTML. If I remember right, there are a few how-to's here in the forum.
Hello,
the posts for the javascript management you are referring to are in the hook section?

Thank you very much

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

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-03-07 12:03

Yes, if you want to change TV by executing javascript code the hooks file hooks/TABLENAME-tv.js is a good place for your code.

Using this forum's search function and seaching for "change table view" returns many results, for example this one:

viewtopic.php?t=4559#p18538

There are many ways to do so in javascript. This is one way:

Pseudo code:
  • wait for document ready
  • iterate through all table cells which belong to the column holding your states by using jQuery's .each() method.
  • get each cell's text by using .text() method.
  • use switch (or if) for getting each cell's state depending on the cell's text.
  • change each cell's CSS class (or style directly) by using .addClass()-method (or .css()-method)
Please check the search results. I'm pretty sure there are many examples.

Maybe the next days I will find time to post a working, bullet-proof, efficient, hooks-only javascript solution, but I cannot promise. Other members who also know the solution may be faster than me.
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: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-03-07 12:42

OK, it was easier as expected, here is a quick and dirty approach:

Reusable function

If you put the following script in a central place (for example in hooks/header-extras.php) you can re-use it in different table views

Code: Select all

<!-- file: hooks/header-extras.php -->

<script>
function AppGiniTableViewBackgroundChanger(cn, options) {
  jQuery(function() {
    const options_lc = Object.fromEntries(Object.entries(options).map(([key, val]) => [key.toLowerCase(), val]));
    jQuery(`tr[data-id] > td.${AppGini.currentTableName()}-${cn}`).each(function(i, e) {
      jQuery(e).css('background-color', options_lc[jQuery(e).text().trim().toLowerCase()]);
    });
  });
}
</script>
Usage

Code: Select all

// file: hooks/TABLENAME-tv.js

AppGiniTableViewBackgroundChanger('COLUMNNAME', {
  "State-1": "green",
  "State-2": "orange",
  "State-3": "red",
});
Parameters:
  1. COLUMNAME
  2. Object holding states (as keys) and background-colors (as values)
Notes:
  • For comparison, the script converts keys and cell's values to lowercase. This makes the script case-insensitive.
Example

Using the following three function calls the script changes three different columns depending on different sets of conditions:

Code: Select all

AppGiniTableViewBackgroundChanger("description", {  
  "test": "lightblue",
});
AppGiniTableViewBackgroundChanger("type_id", {
  "Bauabnahme": "orange",
  "Auslieferung": "red",
});
AppGiniTableViewBackgroundChanger("order_id", {
    "1": "red",
    "2": "yellow",
    "3": "green",
});
chrome_UpprsfRw0Q.png
chrome_UpprsfRw0Q.png (13.66 KiB) Viewed 3860 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

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-03-08 09:02

Thank you very much.
I'll get to work right away and I'll update you as soon as I have news.

Hope it's good news.

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-03-08 12:13

Hi, one question.

the file inside the hook folder
hooks / TABLENAME-tv.js

I have to create it, because it doesn't exist.
It's correct?

and I insert the script in the PHP header-extras.php page (my page is empty)

Everything is correct?

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

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-03-08 12:35

(1) yes, create the file hooks/TABLENAME-tv.js, if not exists. Replace TABLENAME by the exact name of your table. Case-sensitive at least on Linux. Put the code without any further <script> tags because we are already in a javascript file.
(2) yes, put the common function in hooks/header-extras.php. don't forget the <script> tag inside that php file.
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

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-03-08 14:09

Hi jsetzer,

I followed all the instructions you gave me.
Unfortunately it doesn't work.

I created the TEST-tv.js page and inserted the script

Image

I then placed the script in the header-extras.php page

Image

But the fields do not color.

Image

Did I do something wrong?
Last edited by espo on 2022-03-08 14:17, edited 1 time in total.

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

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-03-08 14:12

Please check if there are any (red) errors 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: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-03-08 14:17

Please also check brackets in TABLENAME-tv.js.
It looks like you have double brackets.

I guess there will be error messages in console.
Attachments
chrome_Eu4M0qjKcG.png
chrome_Eu4M0qjKcG.png (17.25 KiB) Viewed 3837 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

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-03-08 14:37

I had noticed the mistake and had corrected it.

This is what the browser says

Image

Image

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

Re: Setting Colour on font depending on their status!

Post by jsetzer » 2022-03-08 14:57

If you attach both files the next minutes I will have a quick look:
  • hooks/header-extras.php
  • hooks/TEST-tv.js
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

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: Setting Colour on font depending on their status!

Post by espo » 2022-03-09 09:04

This is the code inside the php page

Code: Select all

<!-- file: hooks/header-extras.php -->

<script>
function AppGiniTableViewBackgroundChanger(cn, options) {
  jQuery(function() {
    const options_lc = Object.fromEntries(Object.entries(options).map(([key, val]) => [key.toLowerCase(), val]));
    jQuery(`tr[data-id] > td.${AppGini.currentTableName()}-${cn}`).each(function(i, e) {
      jQuery(e).css('background-color', options_lc[jQuery(e).text().trim().toLowerCase()]);
    });
  });
}
</script>
This is the code inside the js page

Code: Select all

// file: hooks/TEST-tv.js

AppGiniTableViewBackgroundChanger('VALORE', {
  "EURO": "green",
  "DOLLARO": "orange",
  "STERLINA": "red",
  });

Post Reply