Quickie: Changing background-color of table view cells depending on content

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. 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. Parameters: column name (string) object having states (as keys) and background-colors (as values). …

TV-customization (Part 8): Conditionally assigning CSS classes (2/2)

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. 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 / …

TV-customization (Part 7): Conditionally assigning CSS classes

In Part 6 we have learned how to add custom CSS classes and assign them to TV cell values. But up to now we have assigned exactly one CSS class. In this part we are going to bring some more flexibility into it. Before we can apply different CSS-classes depending on the cell value we need to know how to evaluate the database and return different strings depending on conditions per row. Some SQL basics Let’s have a look at the database table first. As mentioned before I am using Adminer as database workbench. Target First of all, I’d like …

TV-customization (Part 6): Custom CSS classes

In Part 5 of this Series (Part 1, Part 2, Part 3, Part 4) we have seen different built-in CSS classes, provided by Bootstrap framework. Today I am going to create my own custom CSS class and attach it to TV cell values. Current Code Please note the small change in line 7. I am attaching my-custom-class-1 to the cell-value. Next we have to define the style for that class, named my-custom-class-1. Defining custom CSS class There are different places for defining custom CSS classes, for example: Standard hookhooks/header-extras.phpPlace your styles inside a <style>…</style> tag of hooks/header-extras.phpNote: When doing it …

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

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. 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 …

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

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. Step 1: Try an alternative attribute So now we know, AppGini will remove style-attributes. But what about other attributes? Let’s quickly check …

TV-customization (Part 3): Add CSS style

In Part 1 and Part 2 of our tutorial series we have learned how to replace values of TV cells. Now I am going to add some HTML and CSS but see the security related issues. Current Code Let’s start with code from Tutorial Part 2: Step 1: Replace static text by HTML tag Now we know how to concatenate strings. Let’s replace the value by a HTML tag. This is what I want right now: <span>Built: 2019</span> So we have to concatenate several static strings <span>, Built: , then a field value year_of_manufacture, then another static string </span>. You can …

TV-customization (Part 2): More complex value replacement

In Part 1 we have replaced the values of year_of_manufacture by static text “Test”. In this Part 2 I am going to replace the values by a concatenated string, containing static string AND table data. Current Code Let’s start with code from Tutorial Part 1: Target of Part 2 I’d like to replace the database values (currenly 2019, 2020, 2021) by concatenated values like Built: 2019 etc.. This means he have to combine (concat) a static string “Built: ” (note the blank) with the values of a field. Step 1: SQL theory first Let’s check the database records first. I …

TV-customization (Part 1): Change Value

There are many requests on AppGini forum for customizing Table View columns to your own needs. Especially many of you would like to change the table-cell-style depending on certain values, for example highlight a cell in red under certain conditions. Well, there has been a change recently: AppGini now removes custom style-attributes for security reasons. In this tutorial I am going to show how to reach the goal anyway. I will start with this Part 1 where I am going to show how to just replace values. If you are interested, just search the internet for “Cross Site Scripting (XSS) …

Upcoming: Calculated fields on client side

Sometimes there is need for automatically calculating values based on other values. Yes, we can use calculated fields (SQL) on serverside to do so. In some cases I’d like to calculate and show already on client side in Detail View. Next version of our AppGini Helper Javascript Library will have simple functions for auto-calculating values of fields based on values of other fields while editing. Please note The features shown here will be part of next version of AppGiniHelper Javascript Library, not current version. Next version will be published in 2022. Check out this sample project: Field full_name … having …