In Part 1 and Part 2 of this tutorial series we have learned how to replace TV cells' values by static text or HTML content. In Part 3 we have seen that there is a problem when adding CSS-styles. For security reasons AppGini removes style attributes. This Part 4 will show you how to reach or aim, conditionally highlighting cells, anyway.
Current Code
Please note, the code shown below will return unexpected results, als mentioned in Part 3.
// file: hooks/machines.php function machines_init(&$options, $memberInfo, &$args) { $options_old = $options->QueryFieldsTV; $options_new = []; foreach ($options_old as $sql => $column) { if ($column == 'year_of_manufacture') { $new_value = "concat('<span style=\"background-color: lime;\">', 'Built: ', year_of_manufacture, '</span>')"; $options_new[$new_value] = $column; } else { $options_new[$sql] = $column; } } $options->QueryFieldsTV = $options_new; return true; }
Step 1: Try an alternative attribute
So now we know, AppGini will remove style
-attributes. But what about other attributes? Let's quickly check this by adding a class
-attribute to our span
HTML tag, instead:
$new_value = "concat('<span class=\"text-danger\">', 'Built: ', year_of_manufacture, '</span>')";
Surprisingly, well, not really, this applies Bootstrap's default text-danger
class to the span
and results in red text:

Let's just check the element:

OK, this looks fine!
So, that's the key. Now we know we can use class
-attribute on our custom <span>
.
You can use Bootstrap's default classes like text-danger
, text-warning
, text-success
, ... or create our own classes, custom styled.
Complete Code up to this point
Wow, that was a bit tricky but easy as soon as you know it.
// file: hooks/machines.php function machines_init(&$options, $memberInfo, &$args) { $options_old = $options->QueryFieldsTV; $options_new = []; foreach ($options_old as $sql => $column) { if ($column == 'year_of_manufacture') { $new_value = "concat('<span class=\"text-danger\">', 'Built: ', year_of_manufacture, '</span>')"; $options_new[$new_value] = $column; } else { $options_new[$sql] = $column; } } $options->QueryFieldsTV = $options_new; return true; }
I've promised you conditional colouring. I am going to show this later on in this series. There is some more SQL knowledge required to do so, so let's go step by step. Check our Part 5 of this series.
If you like the way I try to help you, please consider following me on Twitter, purchasing our products or donating a coffee. All of this will help me, helping you in the future.
Kind regards,
Jan