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

In former version of SAPUI5, there have been a special widget for this which is currently be flagged as deprecated.

If you need a widget that is able to dynamically load mass data with included functionality for loading additional data (see properties growingThreshold and growingScrollToLoad), the sap.m.List (sap.m.ListBase) will do quite a good job for you.

By default, lists are organized vertically only and are not easily combineable with the responsive grid. You have to add some special CSS code to your widget to be able to let the list items be inline.

To demonstrate how to do this, i created the following small demo.

Open the following demo in a new browser screen and resize the window, to see the result.

This is only the beginning of what is possible. The final solution uses an additional CSS style, to switch between a large and a small list without rerendering the view. For switching between different sizes, you only have to toggle/change the current list class

Besides the image grid, we also have a table view on the product items. This is done by replacing the list through a table (replacing the fragment or simple show/hide widgets).

For simulating different devices and screen size you can use google chromes device simulator from inside the browser (F12 Developer Tools). See different results by changing the aspect ratio from portrait to landscape (maybe on iPad).

Now you are able to offer an user experience known from the big players.

No comments:

Post a Comment

Thank you for your comment!

The comment area is not intended to be used for promoting sites!
Please do not use such links or your comment will be deleted.


Note: Only a member of this blog may post a comment.