I just found out an easy way to update the app tiles background color in Fiori Launchpad main page. 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.