Skip to content

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

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)

Flipcards (FlipcardTile)

HTML-template

See also