Rounded Tiles in UI5
I’ve been working with OpenUI5 for a few months now and I grew tired of the sharp tiles provided by the standard library.
If you are not familiar with OpenUI5, go and check the great work they are doing on www.openui5.org
Good thing OpenUI5 allows the inheritance between components so that we can create our own based on existing ones… I order to make the launch page of the application I’m working on at the moment more attractive, I decided to create my own tile component based on the standard tile. This is how it looks:
The design is fully responsive and customisable, when creating the object the following colours parameters can be provided:
- border of the circles
- background of the circles
- icon and text colour
In order to achieve that, some JS and CSS are required… I will try to cover it all step by step.
1) The folder structure
In order to keep things organised, I created a folder “controls” in my workspace that is the container of my custom controls.
When you do something like that, don’t forget to register the resource path within your app so that the files can be found using jQuery.sap.registerResourcePath('controls', './controls');.
The folder contains 3 files:
- roundedTile.css containing the CSS rules for the control
- roundedTile.js containing the metadata of the control
- roundedTileRenderer.js containing the logic to render the control
2) The CSS file
The CSS file is not very long and contains the rules that will be applied to the different DOM elements that the roundedTileRenderer will create.
3) roundedTile.js
This file defines the extra properties of the object. Keep in mind that this object is inheriting from the StandardTile object and thus has all the properties of the parent object such as icon, title, count,… The properties added are: iconColor, bgColor and borderColor.
metadata : {
properties : {
// Icon color property with default value to standard UI5 blue
iconColor : {
type : "string",
defaultValue : "#007cc0"
},
// Background color property with default value to white
bgColor : {
type : "string",
defaultValue : "rgb(255, 255, 255)"
},
// Border color property with default value to standard UI5 blue
borderColor : {
type : "string",
defaultValue : "#007cc0"
}
}
}
4) roundedTileRenderer.js
The renderer inherits from the TileRenderer not from the StandardTileRenderer as I need to have access to the div surrounding the tile, not only the content. There’s thus a render
function as well as a _renderContent
.
The render method is the one inherited from the TileRenderer and creates the outer div.
The _renderContent is the one in charge of the content of the tile.
5) Using the control
The use of the control is pretty easy, after including the file via
jQuery.sap.require("controls.RoundedTile");
In the example bellow, I have an Array of JSON objects defining the tiles properties like:
var tiles = [{
title: "Tile 1",
icon:"Chart-Tree-Map",
iconColor:"#ffffff",
bgColor:"rgb(57, 123, 110)",
borderColor:"rgb(57, 123, 110)"
},
...
];
Then I loop on that Array and create the roundedTiles as follow:
for(var c in tiles){
var tileItem1 = new controls.RoundedTile();
tileItem1.setTitle(tiles[c]["title"]);
tileItem1.setIcon("sap-icon://"+tiles[c]["icon"]);
if(tiles[c]["iconColor"])
tileItem1.setIconColor(tiles[c]["iconColor"]);
if(tiles[c]["bgColor"])
tileItem1.setBgColor(tiles[c]["bgColor"]);
if(tiles[c]["borderColor"])
tileItem1.setBorderColor(tiles[c]["borderColor"]);
this.getView().oTilesContainer.addTile(tileItem1);
}
And there you go, your tiles will be rounded.
Note that in this first version of the control, I didn’t manage the counter yet…
I’ll keep the post updated as I will update the control…
Any questions/comments are welcome!
Jon.
EDIT:
– Here is a GitHub repository containing the code: https://github.com/dafooz/roundedTilesUI5
– Here is a JSFiddle for demo: Rounded Tile in UI5 – JSFiddle (Note that the code has been slightly modified in the fiddle in order to have all the Javascript inline)
Attach complete sources for the control, snippets of code are a little bit confusing
Sure I will attach the source 😉
Great work!
Thanks!
This is really innovative and awesome idea. It is very refreshing and fantastic change to the UI5 tile design and thanks for sharing the idea!
Thanks!
Great work Jonathan! You should put that on GitHub 😉
Thanks! I updated the thread with a link to the GitHub repository 😉
Well done. The CSS is straightforward enough. The inheritance and such that you did is the real KEY for folks to understand. Very nice! Keep blogging!
Thanks!
Hi Jonathan,
the way you written the code is amazing, i used your complete code in by creating sapui5 project in eclipse, i put your js code in view.js files.. and also i used index.html(which is created by default) where i put the link for css file.. when i run i am not getting any out..no error also.. can you please tell me where did i go wrong..
Thanks for your great code..
Hi Naveen,
I updated the thread with a link to GitHub. You can clone it, there is a complete eclipse project in it where you will find the source code 😉 and a working example. Don't forget to import it as "new SAP UI5 Application project" and run it on your local web server.
Hope it will helps,
Jon
Thank you jouret for a new concept. it is really helpful..
Thanks a lot 🙂
Super Concept Jonathan Jouret... Thank you..
Thanks a lot 🙂 .
I pushed a bit farther in this thread: Using roundedTiles as "menus" in UI5.
Have a look and let me know if you like it 🙂