Skip to Content

How to make a SAPUI5 Panel looks like a tile

Hi Folks,

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

Tile.JPG

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)

PRCR1.png

PRCR2.png

PRHR.png

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.

Code.png

Now your screen will look like the below.

/wp-content/uploads/2014/03/out1_421238.png

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).

CSS1.png

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

CSSout1.png

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

CSS2.png

CSSout2.png

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

/wp-content/uploads/2014/03/hover_421246.png

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

  • oPanel.attachBrowserEvent(“click”,function(){

       alert(“Tile pressed”);

       });

/wp-content/uploads/2014/03/final_421247.png

Regards

Sreehari

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