AppGini Helper TilesView Javascript Library ¶

This library allows us to toggle Table View display between default table and customizable Tiles View :

Preview ¶

Customizable Tiles View	Default Table View

See it in action ¶

Video

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 ¶

See installation details here

General Instruction ¶

In your hooks/TABLENAME-tv.js hooks file...

1. Create a Tile as a template.
   There are two different Tile -types:
2. Card-Tile
   (single sided cards)
3. Flipcard-Tile
   ( double sided cards)
4. Define the Tile 's HTML code(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.
5. Initialize as new TilesView -object and let it render() all tiles based on the HTML -template per side, filled with data of each single row

Single Side Cards ( CardTile ) ¶

• CardTile

Flipcards ( FlipcardTile ) ¶

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

See also ¶

• Changelog
• Installation
• Card Tiles
• Flipcard Tiles
• HTML and placeholders
• Reload