Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Colorful App Tiles in Fiori Launchpad (Enhanced version)

former_member193140
Active Participant
‎01-19-2015 5:35 AM

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:



<script>

  //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;

  }

                        }

  }

  timeout();

  }, 1000);

  }

  //Custom Codes to create a colourful Tiles Ends Here

  </script>

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.

Reference:

1 Comment
Labels in this area
Popular Blog Posts