Installation

(1/3) Copy files into hooks-directory

After purchasing a license and downloading the ZIP archive, extract the two files into hooks-directory:

YOUR_WWW_ROOT
└── YOUR_APP_ROOT
    └── hooks
        ├── AppGiniHelper.tv.tiles.min.js
        ├── AppGiniHelper.tv.tiles.css
        ├── header-extras.php                   
        ├── TABLENAME.php
        └── TABLENAME-tv.js

(2/3) Include CSS and Javascript in hooks/header-extras.php

<link rel="stylesheet" href="hooks/AppGiniHelper.tv.tiles.css" />
<script src="hooks/AppGiniHelper.tv.tiles.min.js"></script>

(3/3) Render TilesView in hooks/TABLENAME-tv.js

(per table; replace TABLENAME accordingly, replace placeholders %fieldname% accordingly)

// file: hooks/TABLENAME-tv.js

// Wait until the page was loaded
jQuery(function() {

    // Table is available now

    // create a tile 
    var tile = new AppGiniHelperTVTiles.CardTile();

    // HTML-template
    // with placeholders %fieldname1%, %fieldname2%, ...
    // %_pk% is the paceholder for the primary key column (ID)
    var html = '<h5 class="clearfix">' +
        '<span class="label label-default pull-right">id: %_pk%</span>' +
        '</h5>' +
        '<p><small>Your Field</small><br/>%fieldname%</p>';

    // attach the HTML template to the front page of the tile
    tile.front.html = html;

    // render
    new AppGiniHelperTVTiles.TilesView().render(tile);
});