Skip to Content
Author's profile photo Ferry Gunawan

Colorful App Tiles in Fiori Launchpad (Enhanced version)

The earlier version that I wrote in this blog requires a reloading of the Fiori Launchpad page. With this enhanced version, the reloading of the Fiori Launchpad page and the modification of the index.html of the Fiori app are not required.


We need to create a simple thread that keep monitoring the background color attribute of sapUshellTileInner tag. If the background color attribute is not presence, it will add the attribute.

Add the following codes within the head tag of FioriLaunchpad.html:

  //Custom Codes to create a colourful Tiles Starts Here
  function timeout() {
  setTimeout(function () {
  var cols = document.getElementsByClassName('sapUshellTileInner');
  if (cols!=null) {
  for(i=0; i<cols.length; i++) {
  iscolor = cols[i].style.backgroundColor;
  if (iscolor=="") {
  var colors = ["#FFCDD2","#F8BBD0","#E1BEE7","#D1C4E9","#BBDEFB","#B3E5FC","#B2DFDB","#A5D6A7","#E6EE9C","#FFF59D","#FFCC80"];
  var bodybgarrayno = Math.floor(Math.random() * colors.length);
  var selectedcolor = colors[bodybgarrayno];
  cols[i].style.backgroundColor =  selectedcolor;
  }, 1000);
  //Custom Codes to create a colourful Tiles Ends Here

And update the html body tag with this:

<body onload="timeout();" class="sapUiBody sapUShellFullHeight" role="application">

Refresh the page. That’s all about it.

Please find the enhanced modification of FioriLaunchpad.html in the attachment.

Thanks for reading my blog and let me know if you have any comments.


Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mohammed Kaleem
      Mohammed Kaleem

      Hi Ferry ,

      Standard class sapUshellTileInner does not exist in my system.

      Any Note in this regard.