How to make a SAPUI5 Panel looks like a tile
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
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?
Thanks Jan 🙂 I will update that part soon..
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).
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
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.
Layouts in mobile edition is little different, but is very much possible.
sap.m Explored Check this and let me know if it helps .
Creating a reusable UI5 tile control – SAPUI5 control design on the fly
Very informative link 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.
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.
Oh, That's great Sreehari, Understood.
Thanks for quick reply.
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 🙂
Thank you 🙂
Very easy to follow for someone starting freshly on UI5.
Thank you 🙂
I have one query. Can you please explain me in this thread or on other, Please let me know.
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
I m not getting proper output..
output window is still blank
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.
I m new in sapui5 Please Help
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..
Loved this one! Thank you for the example code.
Excellent article. Is there a way to collapse/expand the Panel on mouse hover?
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 )
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?
Also, is there a way to increase the height of the title without changing the height of the Panel?
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.