Skip to Content
Author's profile photo Ferry Gunawan

Change Dynamically Background Image of Fiori Launchpad

I would like to share a simple trick to change the background image of Fiori Launchpad dynamically.

Firstly, let’s take a look a html tag and CSS in Fiori Launchpad for the background image:



We need to update the class sapMAppBG sapMGlobalBackgroundImage and add the style=”background-image: url(<path_to_image>); /wp-content/uploads/2015/01/a2_631178.jpg

Let’s add the JavaScript codes in the FioriLaunchpad.html

Execute transaction SE80  and go to /UI2/USHELL to modify the FioriLaunchpad.html:


Add below JavaScript codes highlighted in red box after the line “‘sap.fiori.core-ext’);”


And the last step is to upload the PNG image files to the Netweaver Gateway:


Final result:


You can find the modified FioriLaunchpad.html in the attachement.


Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.