TV-customization (Part 4): Add CSS-class

AppGini

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

Do you like it?