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.
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:
projects
("Projekte")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.
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.
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.
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()]); }); }); }
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:
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.
AppGiniTableViewBackgroundChanger("type_id", { "Bauabnahme": "orange", "Auslieferung": 'red', }); AppGiniTableViewBackgroundChanger("description", { "test": "lightblue", }); AppGiniTableViewBackgroundChanger("order_id", { "1": "red", "2": "yellow", "3": "green", });
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.
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.
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