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:

/wp-content/uploads/2015/01/a1_631170.jpg

/wp-content/uploads/2015/01/b_631135.jpg

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:

/wp-content/uploads/2015/01/f_631169.jpg

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

/wp-content/uploads/2015/01/c_631163.jpg

And the last step is to upload the PNG image files to the Netweaver Gateway:
/wp-content/uploads/2015/01/d_631164.jpg

/wp-content/uploads/2015/01/e_631165.jpg

Final result:

/wp-content/uploads/2015/01/h_631171.jpg

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

References:

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply