Wednesday, June 17, 2015

Responsive Image Grid

We are currently developing an UI5 based E-Commerce Business Suite, and therefore we needed a responsive image grid widget to present product images similar to the experience on popular web sites.

Inside UI5, you have responsive grids, lists and tables, but none of them fullfilled the needs (out-of-the-box).

The final solution uses the default sap.m.List and is able to dynamically load additional data on-the-fly. The responsive behavior is done by using CSS media queries, to calculate the amount and size of the visible tiles.

Responsive Image Grid