Skip to content

Flipcard tile

Flipcard Tile

Flipcards have a front -side and a back -side, which can be configured separately.

  • FlipcardTile
  • front
    • html
  • back
    • html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
// file: hooks/TABLENAME-tv.js

jQuery(function() {

    var tile = new AppGiniHelperTVTiles.FlipcardTile()

    // define the HTML code for the front side of the flipcards
    tile.front.html = '<h5>' +
        '<span class="label label-default pull-right">' + 'id: %_pk%' + '</span>' +
        '<img width="16" src="resources/table_icons/folder_page.png" />' +
        '%reference.caption%: %reference%' +
        '</h5>' +
        '<p><small>Typ</small> %type_id.value%</p>';

    // helper function .build([array of fieldnames]) 
    // for building HTML for given fields
    tile.back.html += tile.back.build(["reference", "location_id", "node_id", "employee_id"]);

    // finally render the Tile View
    new AppGiniHelperTVTiles.TilesView().render(tile);

});

TODO: screenshots

See also