Colorful App Tiles in Fiori Launchpad

Let's create app tiles with random colors on the Fiori launchpad. We usually see a tile with a single color either grey or other color in the Fiori launchpad. This blog will show you how to create a colorful tiles on the launchpad like in the below images.

In order to accomplish, we need to modify the FioriLaunchpad.html and add the background color attribute in class sapUshellTileInner.

Modify FioriLaunchpad.html

Create a copy of your FioriLaunchpad.html as a backup and modify the old one.

Add the following codes right before function main():

//Custom Codes to Refresh Page Starts Here

  function goToURL(){

              location.href='https://<Netweaver_Gateway_Server_Address>/fiori/shells/abap/Fiorilaunchpad.html';

            }

  //Custom Codes to Refresh Page Ends Here

This function is required to reload the FioriLaunchpad page when user press the "Home" button.

Search for the following codes in FioriLaunchpad.html:

sap.ui.getCore().getEventBus().subscribe("launchpad", "contentRendered",

                    function () {

                        //this setTimeout is MANDATORY to make this call an async one!

                        setTimeout(function () {

                            try {

                                jQuery.sap.require('sap.fiori.core-ext');

And add the below codes:

var colors = ["#FFCDD2","#F8BBD0","#E1BEE7","#D1C4E9","#BBDEFB","#B3E5FC","#B2DFDB","#A5D6A7","#E6EE9C","#FFF59D","#FFCC80"];

                                var cols = document.getElementsByClassName('sapUshellTileInner');

                                for(i=0; i<cols.length; i++) {

                                      var bgcolor = Math.floor(Math.random() * colors.length);

                                      var selectedcolor = colors[bgcolor];

                                      cols[i].style.backgroundColor =  selectedcolor;

                                  }

It will add the random background colors to the sapUshellTileInner class.

Launch tile

The modified codes should now look like this:

Ok, we are done with FioriLaunchpad. Let's try to refresh the page. You should see the colorful tiles. The next step that we need to do is to add JavaScript codes to the index.htmlof Fiori app that will be called by the Fiori Launchpad.

Index.html of Extended Fiori App

We will modify the index.html of the extended Fiori app "Create Sales Order".

Add the following codes as highlighted in red box as per below screenshot.

The first section is to modify the homeBtn tag and add the JavaScript function to load the Fiori Launchpad main page.

The second section is to prevent a user to click the back button. The only way to go back to the Fiori Launchpad page is to click on the "Home" button.

Create the defer.js in the root folder to remove the tag button: __button0  from the child frame of the Fiori app.

var element = document.getElementById("__button0");

 

if(element!=null) {

  $('button[id^="__button0"]').remove();

}

That's all. Now you should have a rainbow Fiori Launchpad. I have attached the modified FioriLaunchpad.html, defer.js and index.html for your reference.

Thanks for reading my blog. If you have any questions/comments, please let me know.