Skip to Content
Author's profile photo Jonathan Jouret

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:

roundedTile

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)

Assigned Tags

      16 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Maksim Rashchynski
      Maksim Rashchynski

      Attach complete sources for the control, snippets of code are a little bit confusing

      Author's profile photo Jonathan Jouret
      Jonathan Jouret
      Blog Post Author

      Sure I will attach the source 😉

      Author's profile photo Former Member
      Former Member

      Great work!

      Author's profile photo Jonathan Jouret
      Jonathan Jouret
      Blog Post Author

      Thanks!

      Author's profile photo Abhishek Modi
      Abhishek Modi

      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!

      Author's profile photo Jonathan Jouret
      Jonathan Jouret
      Blog Post Author

      Thanks!

      Author's profile photo Former Member
      Former Member

      Great work Jonathan! You should put that on GitHub 😉

      Author's profile photo Jonathan Jouret
      Jonathan Jouret
      Blog Post Author

      Thanks! I updated the thread with a link to the GitHub repository 😉

      Author's profile photo Christopher Solomon
      Christopher Solomon

      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!

      Author's profile photo Jonathan Jouret
      Jonathan Jouret
      Blog Post Author

      Thanks!

      Author's profile photo Former Member
      Former Member

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

      Author's profile photo Jonathan Jouret
      Jonathan Jouret
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      Thank you jouret for a new concept. it is really helpful..

      Author's profile photo Jonathan Jouret
      Jonathan Jouret
      Blog Post Author

      Thanks a lot 🙂

      Author's profile photo Guru Raj
      Guru Raj

      Super Concept Jonathan Jouret... Thank you..

      Author's profile photo Jonathan Jouret
      Jonathan Jouret
      Blog Post Author

      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 🙂