Skip to Content
Author's profile photo Younes Hasba

Customize the Fiorified BI Launchpad in BOE 4.2

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.

Also please delete the tomcat cache under tomcat/work Folder

 

 

Result:

 

 

 

 

 

 

 

Assigned Tags

      37 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Rajendra Parameswara
      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.

       

      Author's profile photo Younes Hasba
      Younes Hasba
      Blog 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

      Author's profile photo Rauf Osho
      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

       

      Author's profile photo Fahad Ajaib
      Fahad Ajaib

      Hi Younes,

      First of all i must say it’s a nice article on Customizing the new BI Launchpad. I need to also customize the Home Page of new Fiorified Launchpad. At the moment I see all the available documents on my Home Page which is not desired. I just want to see few selected documents every time I login to BI Launchpad, how can I achieve this. Or how can I make My Favorite as the default filter instead of Show All on Home Page, in this case I can add relevant documents to My Favorites.

      Thanks and best regards

      Fahad

      Author's profile photo Bharath B N
      Bharath B N

      Hi Fahab,

      Setting Filters in My home tab is not available in BOE 4.2 SP04.

      This feature will be available from BOE 4.2 SP05.

      More Info : https://blogs.sap.com/2017/11/06/sap-bi-4.2-sp05-whats-new-in-fiori-bi-launchpad/

      -

      Bharath

       

       

      Author's profile photo Parameshwar Vannekala
      Parameshwar Vannekala

      Hi Bharat,

       

      We are using BO4.2 SP5, we have few queries as we are new to SAP BOE

      1. Can we use BI workspace in Fiorified BI LaunchPad as we used to do in the traditional BI LaunchPad?
      2. I want to customize few things apart from branding and theming  , like when  user clicks on Folders tab he should be able to directly open a folder in "Public folders" instead of default "My Folders" is it possible?
      3. when i open  different reports , its shown as a list in Fiorified BI launchpad  can we make this reports open  in individual tabs like before so that navigation is easy for the user ?

      Waiting for some useful inputs

      Thank you

      Author's profile photo Bharath B N
      Bharath B N

      Hi Parameshwar Vannekala ,

       

      1. Can we use BI workspace  - Not available in SP05. This is planned for SP07.
      2. Land to specific Folder - Not possible.
      3. reports open  in individual tabs - No. this opens in same and gives options to switch in top dropdown .

       

      -

      Bharath

       

      Author's profile photo Moulay Salah IDRISSI
      Moulay Salah IDRISSI

      Hi gurus.

      Indeed, I can't see any difference. I am sure of deleting the cache... and even when I try to change the image using F12 on chrome, it's not working. Many thanks for your advice and help 🙂 🙂

      Author's profile photo Bharath B N
      Bharath B N

      did you changed the image or copied the image in

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

      ?

       

       

      Author's profile photo Bharath B N
      Bharath B N

      https://www.youtube.com/watch?v=NAGnxxV5eoQ

      Author's profile photo Moulay Salah IDRISSI
      Moulay Salah IDRISSI

      Bharath,

      you are not using the same folder !! That's weird. And even the folder you are using I can't find it on my server !

      Can you help with that please?

      Thanks

      Author's profile photo Bharath B N
      Bharath B N

      What is the webserver you are using ?

      Author's profile photo Bharath B N
      Bharath B N

      Folder location is based on the product installed location.

      Please share the path of installed location.

      I will help you for next steps.

       

      Author's profile photo Moulay Salah IDRISSI
      Moulay Salah IDRISSI

      Many thanks Bharath.

      1. my .css file is not getting updated. I tried everything even renaming the homepage.css file. It's still getting an old version !!
      2. We are using Tomecat

      Many thanks for your help!

      Author's profile photo Moulay Salah IDRISSI
      Moulay Salah IDRISSI

      Bharath,

      indeed I found solution myself. The correct path for me is "....\work\Catalina\localhost\BOE\eclipse\plugins\webpath.Bing\web\com\sap\bing\css"

      Thanks!

      Author's profile photo Bharath B N
      Bharath B N

      Great. !!!

      what was the exact issue then ?

      Author's profile photo Bharath B N
      Bharath B N

      Please update same in below path also "...../webapps/BOE/eclipse\plugins\webpath.Bing\web\com\sap\bing\css”.

       

      Author's profile photo Moulay Salah IDRISSI
      Moulay Salah IDRISSI

      Bharath,

      if using "/webapps/BOE/eclipse\plugins\webpath.Bing\web\com\sap\bing\css" nothing is getting updated. I had to use "….\work\Catalina\localhost\BOE\eclipse\plugins\webpath.Bing\web\com\sap\bing\css" instead

      Thanks!

      Author's profile photo Bharath B N
      Bharath B N

      for the reflection from webapps changes server needs to be restarted.

      Please delete the work folder before restart.

      Author's profile photo Moulay Salah IDRISSI
      Moulay Salah IDRISSI

      Thanks Bharath for your reply and sorry for my late answer. I just came back from holidays 🙂

      Indeed I tried both: use an existing different image and then use a new image I copied under folder. But none of the solutions is working. I will give it a try again and let you updated.

      Many thanks

      Author's profile photo Younes Hasba
      Younes Hasba
      Blog Post Author

      Hi,

      as i mentioned in the blog:

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

       

      2nd when using "\work\..." Folder this is a Tomcat Cache if deleted all your changes are then gone.

       

      regards

      Younes

       

      Author's profile photo Mario Panzenboeck
      Mario Panzenboeck

      Hello, I´m using 4.2 SP5 and cannot find the webpath.BING folder in my installation. So I think SAP changed the name of the folder to the following: \tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.FioriBI\web\com\sap\fioribi\css

      There´s also a subfolder for installed languages: webpath.FioriBI_lang.de and webpath.FioriBI_lang.en.

       

      Didn´t try to change some settings in the css files but I will and post a short update here!

      Author's profile photo Bharath B N
      Bharath B N

      yes. You are right.

      But no need to change in _lang subfolders.

      -

      Bharath

       

       

      Author's profile photo Younes Hasba
      Younes Hasba
      Blog Post Author

       

      Hi Mario,

       

      we just update also to SP5 and we replaces the CSS and Img in the Folders you've mentioned

      and this is working fine!

      \tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.FioriBI\web\com\sap\fioribi\css

      \tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.FioriBI\web\com\sap\fioribi\images

       

      regards

      Younes

       

      Author's profile photo Mario Panzenboeck
      Mario Panzenboeck

      I changed several values and also the Image like described above without success. I also installed google chrome browser and browed the fiori Launchpad in private mode (because of Caching) without success.

      Finally I deleted the Catalina folder (in the folder "work") and then the changes were visible.

      Just in case someone is facing the same problem. It didn´t help to restart the Tomcat Server only...

      Author's profile photo Younes Hasba
      Younes Hasba
      Blog Post Author

       

      Thanks Mario,

      i forgot to mention this in the Post, i updated the Hint in the Blog

      Author's profile photo Former Member
      Former Member

      Younes Hasba 

      What about versioning and BI updates? After all you edited standard files and after BOBJ update they will be refresh to the stock versions, won't they? I don't know how to solve this situation. Could you please advise?

      Author's profile photo Bharath B N
      Bharath B N
      1. Please take back up of files which you changed in 4.2 SP04 before upgrade.
      2. once you upgrade BOE to new version – take backup of files before changing any files.
      3. This blog talks about 4.2 SP04 and in SP05 file paths are changed but names are same.
        • Homepage.css
        • Logonpage.css

       

      -

      Bharath

       

      Author's profile photo Younes Hasba
      Younes Hasba
      Blog Post Author

       

      Thanks Bharath,

      Exactly this is how we've done this.

       

      Author's profile photo Rajdeep Marathe
      Rajdeep Marathe

      Hi,

      To change the SAP logo on the Fiori Launchpad login screen and the logo after logging in the Fioried BI Launchpad do the below:

      2 files need to be replaced.

      sap_55x27.png

      SAP_logo.png

       

      Tomcat Webapps

      C:\SAP BusinessObjects\tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.BILogon\web\com\sap\bong\images

      C:\SAP BusinessObjects\tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.BILogon\web\com\sap\bilogon\images

      C:\SAP BusinessObjects\tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.FioriBI\web\com\sap\fioribi\images

      Tomcat Cache

       

      C:\SAP BusinessObjects\tomcat\work\Catalina\localhost\BOE\eclipse\plugins\webpath.FioriBI\web\com\sap\fioribi\images

      C:\SAP BusinessObjects\tomcat\work\Catalina\localhost\BOE\eclipse\plugins\webpath.BILogon\web\com\sap\bong\images

      C:\SAP BusinessObjects\tomcat\work\Catalina\localhost\BOE\eclipse\plugins\webpath.BILogon\web\com\sap\bilogon\images

      Regards,
      Rajdeep

      Author's profile photo Jürgen Möller
      Jürgen Möller

      Is it possible to change the Icons for the Tile View too? I want to change the Icon for Hyperlink with the Icon for Analysis Workbook, because my hyperlinks refer to Analysis Workbooks.

      Regards, Jürgen

      Author's profile photo Bharath B N
      Bharath B N

      No.

      Not possible to change the Icons of Tile in Fiorified BI Launchpad.

       

      -

      Bharath

       

      Author's profile photo Dorthe Hammer
      Dorthe Hammer

      Is it possible to change the name of the Fiorified BI Launchpad landing page? LoB would like another name than BI Launchpad on the Home page.

      Author's profile photo Patrice Gobaut
      Patrice Gobaut

      Hello,

       

      In 4.x, we could be using workspace and SDK to customize completely the landing page. Having an image and depending on where you click on the image you get different link.

      With SP7, I understand that we will have more options to customize.

      Would we be able from an image to have area defined and when clicking landing in a dedicated category ?

      Thanks,

      Regards,

      Patrice

      Author's profile photo Sridhar Kanchanapalli
      Sridhar Kanchanapalli

      We have a requirement to customize BO 4.2 Fiori Launchpad - Logo and Background Color change. Is there any option to customize using UI Theme Designer just like portals?

      Author's profile photo Denis Konovalov
      Denis Konovalov

      4.2 Sp7 comes with theme designer webapp that you can deploy and use for this purpose.
      You cannot use theme designer from portals.

      Author's profile photo Ravikumar Dasaraju
      Ravikumar Dasaraju

      shall we disable(Invisible to end users) Schedule,Inbox & Recycle Bin in Fiorified BI Lanchpad on BO 4.2 SP07.

      if possible please let us know the solution.