Skip to Content

Starting from BI 4.2 SP4 it’s possible to use the new Fiorified Launchpad, which is a great enhancement of the current BI Launchpad.

At the begining i started by reading the very good Blog bharath.b.n

Fiorified BI Launchpad in BOE 4.2

Which goes through the details of the fiorifed Launchpad and the Settings needed to be done.

Now while having the new look but not being able to use it is as of now not possible customize the look of the new Launchpad; i started looking how can we change at least the Color and the SAP Logo i.o. to make it ready to rollout.

In my first blog i’ll share with you my findings and will give you first hints how you can do this.

This is only a workaround until we have the final solution from SAP, everyone who has alreay worked with the Fiori Launchpad knows already the UI Theme Designer, so i hope that SAP will deliver same tool in order to customize everything in the new Launchpad.

As said, my goal was only to change the blue colour to grey and the company logo.

I’ll not go through every thing, so if you want you can modify the css files as per your requirement.

Note: before starting, please make sure you make a backup of the files you’re going to change.

 

 

There are 2 css Files which i came accross which you can find in this folder:

  • Homepage.css
  • Logonpage.css

..\tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.Bing\web\com\sap\bing\css

 

Place your Company Logo in following Folder i.e. here ‘company_logo.png’:

..\tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.Bing\web\com\sap\bing\images

 

Now you have to change the following Classes:

In the Logonpage.css

Note: the width and height here correspond to the Height and Width of your Logo

.BILP-Logo
{
width: 140px !important;
height: 31px !important;
top:0.75rem !important;
bottom: 0.75rem !important;
left:1rem !important;
right: 1rem !important;
position:fixed;
background-image : url("../images/company_logo.png") !important;
}

 

Change the Background Color:

Note: Change the linear-gradient or put your own CSS to change the background.

.BILP-launchpadbackground{
background-image: linear-gradient(to bottom,#ffffff,#cccccc);
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

 

In the Homepage.css

Note: Change the Width and Height as per your Company Logo

.BILP_logo{
	padding-left: 0.5rem;
	padding-right: 45px;
	max-height: 2.5rem;
	max-width: 6rem;
	vertical-align: middle !important;
	height: 31px !important;
	width: 140px !important;
	/* position: relative; */
	top: 6px;
	margin-left:0.5rem !important;
	background-image: url("../images/company_logo.png") !important;
}

 

Note: please clear your browser cache , otherwise you’ll see no difference after doing the changes.

 

Result:

 

 

 

 

 

 

 

To report this post you need to login first.

3 Comments

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

  1. Rajendra Parameswara

    Hi Younes, Thanks for exploring this.. I will try it out on my side.

    Were you able to access Fiorified BILaunchpad using https ? i have SSL configured and Fiori launchpad doesn’t seem to open with SSL URL.. without SSL it works.

     

    (0) 
    1. Younes Hasba Post author

       

      Hi Rajendra,

       

      we didn’t configure SSL yet, but as soon as we’ll do i can update you with the Info.

       

      best regards

      Younes

      (0) 
    2. Rauf Osho

      Hi Rajendra,

       

      We have SSL enabled and Fiori Launchpad works fine with SSL enable. In order for Fiori Launchpad to work with SSL enabled. You must also enable SSL on (WACS)  Web Application Container Server. Fiori Launchpad doesn’t work without SSL been enabled on WACS.

       

       

       

      Regards,

      Rauf

       

      (0) 

Leave a Reply