Highlight (Showcase/Idea): Tile View

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.

Panel-Template

Bootstrap panels with (optional) header and footer:

Card-Template

Simple tiles:

Flipcard-Template

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:

Customizing

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

Feedback

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?