Skip to Content
Author's profile photo Sreehari V Pillai

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

Assigned tags

      30 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jan Penninkhof
      Jan Penninkhof

      Nice job Sreehari! Amazing what you can do with just a few lines of CSS.
      It may also be a nice idea to turn your tile into a custom control. Perhaps when you need a new challenge?

      Cheers, Jan

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Thanks Jan 🙂 I will update that part soon..

      Author's profile photo Vishnupriya Varadharajan
      Vishnupriya Varadharajan

      Excellent blog! Thanks. Can you please suggest as what control(something similar to tile) can be used to place 2 graphs in a sap ui5 page(in other terms I am looking ofr a dashboard screen where in we'll have few text and 2-3 grpahs).

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Hi Vishnupriya,

      Thanks a lot .

      You can have multiple controls ( Graphs, texts , or anything ) in a page by using layouts. For example, you can use a matrix layout to arrange your controls in it ad plce it in your screen. Check the below URL.

      SAPUI5 SDK - Demo Kit

      Sreehari V Pillai

      Author's profile photo Vishnupriya Varadharajan
      Vishnupriya Varadharajan

      Hey Thanks a lot for the quick reply!

      I am looking for a mobile dashboard and not a desktop app and hence I will not be able to use the layouts here.. That's the issue. I am able to draw graphs in a separate screen.. just want to bundle it in a single page.

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Hi,

      Layouts in mobile edition is little different, but is very much possible.

      sap.m Explored Check this and let me know if it helps .

      Sreehari

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author
      Author's profile photo Bince Mathew
      Bince Mathew

      Very informative link Sreehari 🙂

      Author's profile photo Former Member
      Former Member

      Hi Sreehari,

      Thanks for detailed explanation. I have one doubt, you have provided css attributes for 'tile-hdr' in the index.html file, but you have not mentioned id 'tile-hdr' to any control in the view.js file. like id 'tile' is given to Panel in the view.js.

      Hari

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Hi Hari,

      If you have noticed the id of the panel which I created is "tile". Basically panel is a container type control,which has two areas in it. One header part and one body part.While rendering the panel, it will create a header tag with id "tile-hdr". Check the screenshot below. You will get a clear idea.

      reply.JPG Sreehari

      Author's profile photo Former Member
      Former Member

      Oh, That's great Sreehari, Understood.

      Thanks for quick reply.

      Hari.

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      cool 😎

      Author's profile photo Former Member
      Former Member

      Thank you so much for this! Been having some difficulty formatting tiles (and making the custom styling stick), but this is a much easier alternative. Nice and simple 🙂

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Thank you 🙂

      Author's profile photo Former Member
      Former Member

      Thanks Sreehari...

      Very easy to follow for someone starting freshly on UI5.

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Thank you 🙂

      Author's profile photo Former Member
      Former Member

      Hi Sreehari,

      I have one query. Can you please explain me in this thread or on other, Please let me know.

      Thanks

      Navdeep Kumar

      Author's profile photo Michael Appleby
      Michael Appleby

      Navdeep,

      If you wish to ask a question, please create a Discussion marked as a Question.  Include a shortcut to Sreehari, if you want that member to view it.  More information is available in the Getting Started link at the top right of each SCN page.

      Regards, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member

      Ok Sure,

      Author's profile photo Former Member
      Former Member

      Hello

      I m not getting proper output..

      /wp-content/uploads/2015/02/1_639763.png

      output window is still blank

      🙁

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      New question new thread 🙂 By the way , check your console in debugger and see if you are missing any libraries or some other reason behind it.

      Sree

      Author's profile photo Former Member
      Former Member

      I m new in sapui5 Please Help

      Author's profile photo Prakash Waddar
      Prakash Waddar

      hi kartik ,

              1>   install sap ui5 tool  in eclips

                        How to install a basic development environment for SAPUI5

                 2>   SAPUI5 SDK - Demo Kit   --- start  your work by using this website..

      Author's profile photo Former Member
      Former Member

      Loved this one!   Thank you for the example code.

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      wc mate.

      Author's profile photo Former Member
      Former Member

      Hi Sreehari,

      Excellent article. Is there a way to collapse/expand the Panel on mouse hover?

      Thanks,

      Pavan.

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      thanks mate. yes you should be able to. As the panel has method "setExpanded()" , you can use the same on mouse hover . ( Yes you will need to register mouse hover event )
      SH

      Author's profile photo Former Member
      Former Member

      Thanks. I have been able to achieve the expand/collapse of the Panel on hover. But havent been able to control the smoothness/speed at which it expands/collapses. Is it possible to achieve that?

      Author's profile photo Former Member
      Former Member

      Also, is there a way to increase the height of the title without changing the height of the Panel?
       

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      1 - you can use jQuery fadeout methods to control the animated collapse and expand.
      2 - that I need to check- height of the panel is auto adjustable based on its content - please have a research there.
      SH 🙂