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)
- SAP Managed Tags:
16 Comments
