Custom pages in AppGini are just awesome, and I'm using them a lot. There is one backdraw you might have seen: Custom Pages don't have a (browser-) title by default. That may be irritating for users, when saving custom pages as bookmarks or when sharing links. I am showing a simple PHP one-liner which defines the title of the custom page.

Problem

When loading standard AppGini pages like Table Views or Detail Views there is a specific browser title which is a concatenation of App-Title + Page-Title:

That's fine for example when saving this page as bookmark.

But when creating custom pages, there is no default page title, so the browser title is incomplete:

Every custom page will have the identical page title, which is just the App's title.

Let's have a look at the code for a standard (almost empty) custom page:

<?php 
// file: testpage.php
include("lib.php");
include("header.php");
echo '<h1>Custom Page</h1>';
include("footer.php");

This just gives a custom page with a <h1>-title but no specific browser-title.

Reason

You will see in included header.php there is a concatenation of APP_TITLE + Pipe-character | plus $x->TableTitle:

<title><?php echo APP_TITLE . (isset($x->TableTitle) ? ' | ' . $x->TableTitle : ''); ?></title>

$x is defined in Table Views, Detail Views and perhaps some other pages but not in Custom Pages.

Solution

So, let us quickly change this by defining some dummy $x variable and setting the TableTitle. Check out the following code, especially line 4:

<?php 
// file: testpage.php
include("lib.php");
$x = (object)["TableTitle" => "This is my Custom Page"];
include("header.php");
echo '<h1>Custom Page</h1>';
include("footer.php");

This line 4 declares a variable named $x as a (standard-) object and sets the value of the property TableTitle to some sample-text.

And this is the (wanted) output:

It is important to declare $x->TableTitle before including header.php.

That's it. Now, saved bookmark for or shared links to Custom Pages will have a specific, customizable title.

For security reasons AppGini filters out CSS styles if injected into HTML code using PHP hook function. In this article you will find an easy-to-use, depencdency-free javascript fuction for changing background-color of table view cells depending on cell's value.

Common function

Place the following function in <script>...</script> tags in hooks/header-extras.php, for example, so you can re-use it in any table view later on.

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()]);
    });
  });
}

Usage

For a specific table view, create a javascript hooks file named /hooks/TABLENAME-tv.js, if not already exists. In there call the function shown above.

AppGiniTableViewBackgroundChanger("COLUMNNAME", {
  "State1": "red",
  "State2": "yellow",
  "State3": "green",
});

Parameters:

1. column name (string)
2. object having states (as keys) and background-colors (as values).

The example above will find all cells of column COLUMNNAME and will set the background-color depending on the cell's text. If, for example, cell's text equals "State1", the background-color will be red. The comparison is case-insensitive, which means, also "state1" and "STATE1" would match and coloured red.

Example

AppGiniTableViewBackgroundChanger("type_id", {
  "Bauabnahme": "orange",
  "Auslieferung": 'red',
});

AppGiniTableViewBackgroundChanger("description", {
  "test": "lightblue",
});

AppGiniTableViewBackgroundChanger("order_id", {
  "1": "red",
  "2": "yellow",
  "3": "green",
});

Output

Now we know how to use an inline-SQL command case-when for dynamically evaluating and returning string values depending on database table values. It's time to put it all together.

Code

Let's return to our PHP editor and clean up the code a bit. I have copied our case-when command of Part 7 and using it now for building our replacement string in PHP, see Lines 9-15.

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

    foreach ($options_old as $sql => $column) {

        if ($column == 'year_of_manufacture') {
            $css_class = "(case
                year(now()) - year_of_manufacture
                when 0 then 'label label-success'
                when 1 then 'label label-warning'
                when 2 then 'label label-warning'
                else 'label label-danger'
                end)";

            $parts = [
                "'<span class=\"'",
                $css_class,
                "'\">'", 
                "year_of_manufacture",
                "'</span>'",
            ];
			
            $new_value = "concat(" . implode(", ", $parts) . ")";
            $options_new[$new_value] = $column;
        } else {
            $options_new[$sql] = $column;
        }
    }
    $options->QueryFieldsTV = $options_new;
    return true;
}

That's it, let's save and see the results:

And let's check the generated HTML of one of those elements:

Look good. You now have all required bricks for building your own customizations.

Teaser / Preview

If all of this is too complicated for you because you need to know several techniques (HTML, CSS, SQL, PHP), stay tuned, I consider publishing an easy-to-use PHP library. This library will make it much easier, have a short look, the code below produces exactly the same output with less code and is more readable:

// file: hooks/machines.php
function machines_init(&$options, $memberInfo, &$args)
{
    $table_highlighter = AppGiniHelperTVHighlighter::create("machines", $options);
    $column_highlighter = $table_highlighter->getColumnHighlighter("year_of_manufacture");
    $column_highlighter
        ->if("year_of_manufacture <= year(now())-3")->then("label label-danger")
        ->if("year_of_manufacture <= year(now())-1")->then("label label-warning")
        ->else("label label-success");

    $table_highlighter->apply();
    return true;
}

And that's the output of the Highlighter-code above:

If you are interested in such an easy-to-use library, please contact me so I will see if there is enough demand.

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