Skip to Content

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.


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”);





To report this post you need to login first.


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

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

      1. Former Member

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

        1. Sreehari V Pillai 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

          1. Former Member

            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.

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


    1. Sreehari V Pillai 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

  3. 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 🙂

        1. Michael Appleby


          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

    1. Sreehari V Pillai 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.


    1. Sreehari V Pillai 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 )

      1. 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?

        1. Sreehari V Pillai 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 🙂


Leave a Reply