Version & Updates
Since 2022.12
Changelog
AppGini Helper TilesView Javascript Library is a separate product and not part of AppGini Helper Javascript Library
AppGini Helper TilesView Javascript Library¶
This library allows us to toggle Table View display between default table and customizable Tiles View:
Preview¶
See it in action¶
UI-Details¶
- There are additional buttons at the top right corner of table view allowing you to toggle between Default Table View and Tiles View
- The selected view mode will be stored in Local Storage and restored, the next time user opens this page
Installation¶
General Instruction¶
In your hooks/TABLENAME-tv.js hooks file...
- Create a
Tileas a template.
There are two differentTile-types: - Card-Tile
(single sided cards) - Flipcard-Tile
(double sided cards) - Define the
Tile'sHTMLcode(s) for front-side (and perhaps for back-side of Flipcard-Tiles).
The HTML-code can contain placeholders which will be replaced by each row's data at runtime, for example%fieldname%is such a placeholder. - Initialize as new
TilesView-object and let itrender()all tiles based on theHTML-template per side, filled with data of each single row
Single Side Cards (CardTile)¶
Flipcards (FlipcardTile)¶
HTML-template¶
- Simple cards only have a front side, whereas ...
- Flipcards have a front- and a back-side.
- For each side you can configure a
HTML-template having placeholders which will be filled by row's data at runtime.