Floating Toolbar in Table View using CSS

A feature of our AppGini Helper Javascript Library that has been available for a long time is additional buttons in table views. Too many buttons can disrupt clarity. In this article I show how the Button Toolbar is only visible when the mouse cursor is over a line. In one project I added several buttons to a table view over time. The first column became wider and wider, which eventually became too much for me: Standard TV-Toolbar using our Helper’s addLink()-features: Want to know more about TV-toolbars? See our docs here So I had the idea that the toolbar should …

Tip: Put unimportant things in the background

A great feature are the so-called badges, which show the number of records in child tables already in the headers of the tabs. However, the badges with value 0 are colored identically with badges that have a larger value. The eye can’t immediately detect if there are records or not. With a little CSS+Javascript trick I move unimportant information into the background. Problem This is the initial situation: all badges look identical. There is no distinction between 0 and >0: Final Result And this is how it looks with the small change: All badges with value 0 are discreetly moved …

Quickie: Fix Button-Height-Bug of Lock-Button in Detail View (DV)

Perhaps you have already seen that the height of the “Lock”-button in the Detail View is smaller than the height of the “Save”-button next to it. With a little CSS trick, which I show here, you can fix the display-bug. Problem Reason This is not related to AppGini but to the Bootstrap CSS framework. The reason is that buttons without text are obviously displayed smaller than buttons with text. We can simply check this by adding any text to the button in development tools of our browser. Solution Unfortunately, we cannot simply change the AppGini generated code itself. Maybe BigProf …

Tip: Adding your custom CSS to an AppGini project

Sometimes people ask me where to put CSS rules in AppGini projects. On this page I describe the options and tell you how I usually do it. Option 1: hooks/header-extras.php One way is to insert the CSS code in the already existing hooks/header-extras.php file. Since this is a .php file (not a .css file), however, we have to tell the browser that the inserted code is style information. We do this via the <style>-tag: Option 2: hooks/header-extras.css For larger projects, I got used to writing my CSS specifications in a separate .css file. In addition to the additional .css file …

Custom Nav-Links: Find TableGroup-index by table name

You probably know the possibility of adding your own links to the menus. A small disadvantage is that you have to give the target menu as a number (index of the menu). However, the number varies depending on user rights. Wouldn’t it be nice to have the index determined automatically? Here I show a small PHP function for this. Custom Menu Items According to the specs you can add custom nav-links by adding array items to the $navLinks array in hooks/links-navmenu.php. The setting ‘table_group’ => 1 causes the new menu entry to be inserted in the second menu, which is …

Quickie: More space for content in Custom Pages

Custom pages are a great way to add any content to your app. If you have ever created your own custom pages, you may have noticed that quite a lot of space is wasted to the left and to the right of the actual content: Do you see the useless margins? In this case, the content is even too wide for the content-container and a scrollbar appears at the bottom. That doesn’t have to be! With a simple trick you can widen the usable area. Just place that script in your custom page: This gives you smaller margins on the …

Idea: Inject Child-Records into Table View

This idea came into my mind when I wanted to show additional information for records right inside the table view: The toggle-button opens a panel below the record, showing all configured subtables. This renders sub-tables for all configured tables right inside the table view just below each recod: I can realize this by configuring Children-Records in my AppGini project as usual… …and by adding a few lines of code to my hooks/TABLENAME-tv.js… See it in action This has to be tested more accurately. I consider adding it to some future version of AppGini Helper Javascript Library if there is more …

Upcoming: Hide Fields in Detail View

We all know the toggle button in Table View which allows users to hide/show columns according to their needs. Wouldn’t it be fine to have such a button in Detail View? Well, stay tuned, I am going to introduce a new feature of upcoming version of our AppGini Helper Javascript Library. You all know the possibility of hiding columns in the Table View. The selection is saved in the browser of the respective user. This saves us developers a lot of work, because we don’t have to code different views of the table for different groups, but the users can …

Quickie: Set (missing) page Title in Custom Pages

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 …

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