TV-customization (Part 5): Built-in CSS classes

AppGini

In Part 4 we have seen that we can not customize cell style directly, any longer, but we can add CSS classes. Today I am going to show a few built-in classes, provided by Bootstrap framework, which you can use out of the box.

Current PHP Code

First of all, let's modify the code a little bit. This will make it easier to change the CSS class names without touching too much of the inner PHP code.

// file: hooks/machines.php
function machines_init(&$options, $memberInfo, &$args)
{

    $options_old = $options->QueryFieldsTV;
    $options_new = [];

    $css_class = 'text-danger';

    foreach ($options_old as $sql => $column) {
        if ($column == 'year_of_manufacture') {
            $new_value = "concat('<span class=\"{$css_class}\">', 'Built: ', year_of_manufacture, '</span>')";
            $options_new[$new_value] = $column;
        } else {
            $options_new[$sql] = $column;
        }
    }
    $options->QueryFieldsTV = $options_new;
    return true;
}

See the extra-variable $css_class in line 8. This is the place you can use different CSS class names as shown below.

Different Text-Colors

Let's try with different CSS-classes:

text-success

text-warning

text-danger

text-info

Label-Styles

label label-success

label label-warning

label label-danger

label label-info

What’s next?

In upcoming Part 6 of this series I am going to create and attach custom CSS classes.

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?