Tiles are the way of providing multiple features that are separated logically.

First of open the cloud 9 editor from here .

Step 1:- Create a basic framework like as mentioned in the image :-

Now add to the third party library

<script id="sap-ui-bootstrap" type="text/javascript" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table" />

Now let us create four tiles with the title,info & icon(which we have picked from the URL Here )as the properties:-

var oT1 = new sap.m.StandardTile({

title: "Dinosaur",

info:"Mountain",

icon:"sap-icon//sapui5"

})

var oT2 = new sap.m.StandardTile({

title: "Elephant",

info:"Forest",

icon:"sap-icon//general-leave-request"

})

var oT3 = new sap.m.StandardTile({

title: "Whale",

info:"Sea",

icon:"sap-icon//map-2"

})

var oT4 = new sap.m.StandardTile({

title: "Duck",

info:"Water",

icon:"sap-icon//travel-expense"

})

Step2:- Let us now create a tile container and put all of the above tiles inside it.

var oTileContainer = new sap.m.TileContainer({

tiles:[

oT1,

oT2,

oT3,

oT4

]

})

Now let us add the tiles to the Page :-

var page = new sap.m.Page({

title: "Simple Tiles",
content: [
oTileContainer
]

});

Yee!! Now we can able to see the output as below with the four tiles which we create just now.

That’s all for now. Stay tuned for more posts 🙂