Highlight (Showcase/Idea): Tile View

Important Notice
The features shown in this "highlights" blog category are a showcase of things which can be done using AppGiniAppGini Helper LibraryPHPSQLJavascriptJQueryCSS and HTML. This definately does not mean that everything you can see here is part of our product. It took hours, sometimes days of research, trial-and-error, coding and testing. So, these showcases are not part of a 49$ library, they are not single-line copy&paste codes and they are not for sale. Just a demonstration of what can be done and what we did and do in paid projects for our customers.

In most data-centric scenarios the tabular view is very suitable. There are use cases where I would like to have a tiled view. Even better would be if the user could choose. For some time now I have been programming something like this as an extension to AppGini. This is the current state I would like to show you. Please give me feedback what you think and if you are interested in such an extension.

Card contents

In this tile view i don't want to see all columns, but only certain data. I also want to modify the display, for example bold text or insert pictures. For this I have programmed a "templates" funtionality. This is actually "only" texts templates with placeholders. Since the templates can contain HTML, I am very flexible in the presentation.

// Please note:
// this functionality is NOT part of AppGini Helper Javascript Library 
// nor Inline Detail-View plugin
// ...
var card = new AppGiniHelper.TV.Tiles.CardTemplate();
card.setPage(`<img src="%image%" class="img-responsive img-circle" /><b>%last_name%</b> %first_name% %middle_names%`);
// ...
new AppGiniHelper.TV.Tiles.Handler().setCardTemplate(card).init();

Different Card Templates

At the moment I have programmed three different tile representations.


Bootstrap panels with (optional) header and footer:


Simple tiles:


Tiles with front-page and back-page, both customizable. If the video does not start automatically, please press play button:

Switching View

Additional buttons, automatically created, for switching between table view and tile view:


The contents and formatting can be customized using a template text with placeholders. Additionally, all elements can be styled using CSS.


As always I hope you like the stuff I do and publish here. I would be pleased if you could give me feedback on this idea. What are you missing, what would you like to have? Would you be interested in such an extension? Please send me an email to appgini@bizzworxx.de. Thank you for taking the time!

Do you like it?