How to make a SAPUI5 Panel looks like a tile

[sreehari_vpillai]

Hi Folks,

These days we have seen many applications built on SAPUI5 with tile based design.

To create such controls, we can either extend the existing controls or play with CSS theming.  So, we will see how we can make a SAPUI5 Panel control looks like a standard tile in 6 simple steps by changing the CSS theme attributes.

Solution:

Step 1: Create the UI5 project and initial view (Project Name: Tile, View: Main.JS)

Step 2:  Populate the createContent function in Main.view.JS as follows, which will create a standard panel and place the same in your screen.

Now your screen will look like the below.

Step 3: Go to the index.html page where we need to do some CSS coding to adjust the theme for the panel (you can keep a separate style file to write the styles).

Writing this CSS will make the header part of the panel with white background and remove the bottom header line.

Step 4: Now, give the tile a nice border with suitable colour and shadow property

Step 5: Register “CSS hover” property to give some sort of animation while hovering the tile.

Step 6: Register a click event for the tile and enjoy

• oPanel.attachBrowserEvent("click",function(){

       alert("Tile pressed");

       });

Regards

Sreehari