Setting Colour on font depending on their status!
Re: Setting Colour on font depending on their status!
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.
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.
Re: Setting Colour on font depending on their status!
You don't have to wait. As I have written on Januar 4th (see here: viewtopic.php?f=7&t=4557#p18596) the turorial is already published:
- https://appgini.bizzworxx.de/appgini/tv ... nge-value/
- https://appgini.bizzworxx.de/appgini/tv ... placement/
- https://appgini.bizzworxx.de/appgini/tv ... css-style/
- https://appgini.bizzworxx.de/appgini/tv ... css-class/
- https://appgini.bizzworxx.de/appgini/tv ... s-classes/
- https://appgini.bizzworxx.de/appgini/tv ... s-classes/
- https://appgini.bizzworxx.de/appgini/tv ... s-classes/
- https://appgini.bizzworxx.de/appgini/tv ... asses-2-2/
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
Thanks so much.
I try immediately.
We hope well!
I try immediately.
We hope well!
Re: Setting Colour on font depending on their status!
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.
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:
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;
}
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;
}
Re: Setting Colour on font depending on their status!
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
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
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.
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.
Re: Setting Colour on font depending on their status!
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
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
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
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
Re: Setting Colour on font depending on their status!
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
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
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
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.
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.
Re: Setting Colour on font depending on their status!
That's the price for security, I'm afraid.Compared to previous versions of APPGINI, to have this change everything becomes much more complicated.
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
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
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.
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
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
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
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
Re: Setting Colour on font depending on their status!
Hello,jsetzer wrote: ↑2022-03-02 12:42By 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.
the posts for the javascript management you are referring to are in the hook section?
Thank you very much
Re: Setting Colour on font depending on their status!
Yes, if you want to change TV by executing javascript code the hooks file
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:
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.
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)
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
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
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
Usage
Parameters:
Using the following three function calls the script changes three different columns depending on different sets of conditions:
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 viewsCode: 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>
Code: Select all
// file: hooks/TABLENAME-tv.js
AppGiniTableViewBackgroundChanger('COLUMNNAME', {
"State-1": "green",
"State-2": "orange",
"State-3": "red",
});
- COLUMNAME
- Object holding states (as keys) and background-colors (as values)
- For comparison, the script converts keys and cell's values to lowercase. This makes the script case-insensitive.
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",
});
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
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.
I'll get to work right away and I'll update you as soon as I have news.
Hope it's good news.
Re: Setting Colour on font depending on their status!
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?
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?
Re: Setting Colour on font depending on their status!
(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.
(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
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
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
I then placed the script in the header-extras.php page
But the fields do not color.
Did I do something wrong?
I followed all the instructions you gave me.
Unfortunately it doesn't work.
I created the TEST-tv.js page and inserted the script
I then placed the script in the header-extras.php page
But the fields do not color.
Did I do something wrong?
Last edited by espo on 2022-03-08 14:17, edited 1 time in total.
Re: Setting Colour on font depending on their status!
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
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
Please also check brackets in
It looks like you have double brackets.
I guess there will be error messages in console.
TABLENAME-tv.js
.It looks like you have double brackets.
I guess there will be error messages in console.
- Attachments
-
- chrome_Eu4M0qjKcG.png (17.25 KiB) Viewed 3890 times
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
I had noticed the mistake and had corrected it.
This is what the browser says
This is what the browser says
Re: Setting Colour on font depending on their status!
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
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<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 readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: Setting Colour on font depending on their status!
This is the code inside the php page
This is the code inside the js 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>
Code: Select all
// file: hooks/TEST-tv.js
AppGiniTableViewBackgroundChanger('VALORE', {
"EURO": "green",
"DOLLARO": "orange",
"STERLINA": "red",
});