Skip to Content

Some weeks ago I asked on Twitter and on OpenUI5 Slack channel if someone needed an external JS library wrapped in a custom-lib. One of the first replays was talking about Masonry, a stunning library to create cascading grid layout.

And here we are, this is the first of a series of on-demand openui5 custom library 😉

What is Masonry?

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

Final result first

If you want to checkout the current demo (I’m planning to add more user case) you can check it out here: https://stermi.github.io/openui5-masonry/test/demo/

Usage

Configure manifest.json

Add the library to sap.ui5 dependencies list and configure the resourceRoots to point where you uploaded the custom library.

"sap.ui5": {
    ...
	"dependencies": {
		"minUI5Version": "1.30.0",
		"libs": {
    		...
			"it.designfuture.masonry": {}
		}
	},
	"resourceRoots": {
		"it.designfuture.masonry": "./resources/it/designfuture/masonry/"
	}
}

Add the custom control inside an XML View

Add the library to sap.ui5 dependencies list and configure the resourceRoots to point where you uploaded the custom library.

xmlns:df="it.designfuture.masonry"

And than you can simply add the MasonryLayout custom control

<df:MasonryLayout id="grid-layout" width="100%" height="1080px"

    waitImageLoaded="false"
    fitWidth="true"
    resize="true"
    columnWidth=".openui5-masonry-grid-sizer"

    layoutComplete="onLayoutComplete"
    removeComplete="onRemoveComplete"
    imageLoadedAlways="onImageLoadedAlways"
    imageLoadedDone="onImageLoadedDone"
    imageLoadedFail="onImageLoadedFail"
    imageLoadedProgress="onImageLoadedProgress">
    <df:content>
        <Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
        <Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
        <Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
        <Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
        <Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
        <Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
        <Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
        <Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
        <Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
    </df:content>
</df:MasonryLayout>

Documentation

Build

If you would like to extend and customize the control, you can easily do that but re-building the code with just a simple Grunt command:

npm install
grunt build

Links

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Chris Paine

    Hi,

     Unfortunately it seems the lib suffers from same issues I have invoking masonry in UI5… The very first time the demo opens it doesn’t work because the UI elements haven’t fully loaded/informed the Dom of their sizes. Seems this is due to the amount of time it takes to load the UI5 controls. As when cached it works just fine.

    Try clearing your cache and throttling your connection speed, you may find same result…

    Cheers,

    Chris

    (0) 
    1. Emanuele Ricci Post author

      I’ve played with it a lot of times. Many times the real effort is to understand when you need to reload the layout and how to correctly apply CSS.

      The demo shows the worst case scenario: images. That’s why I also needed to add the imagesLoaded plugin.

      Each time an image is loaded it triggers a progress event on which I’m also recalling masonry re-layout. Right now I’m handling all internally but I don’t know if it should be a developer option or not. I would like to provide an out-of-the-box-working library but maybe it just becomes too overcomplicated.

      (0) 

Leave a Reply