Skip to Content
Author's profile photo Masayuki Sekihara

How to setup your company logo in SAP Fiori launchpad

You can set your company logo in SAP Fiori launchpad.

Standard delivery:

/wp-content/uploads/2014/05/logo15_454092.png

Replacing with your company logo.

/wp-content/uploads/2014/05/logo14_454093.png

There is logo property and you can change it by Theme Designer.

Prerequisites:

Steps:

1. Start UI Theme Designer on Frontend server (Gateway server)

     Transaction: /UI5/THEME_DESIGNER

     or

     URL: https://<host>.<domain>:<port>/sap/bc/theming/theme-designer?sap-client=<client>

2. Copy theme and give a name

/wp-content/uploads/2014/05/logo1_454107.png

/wp-content/uploads/2014/05/logo2_454108.png

3. Add a test app. Specify the URL for SAP Fiori launchpad.

     Link to Application: https://<host>.<domain>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html?sap-client=<client>

     Name of Application: any name

     *Note: Please make sure you use same http protocol with Theme Designer. http or https.

/wp-content/uploads/2014/05/logo3_454109.png

/wp-content/uploads/2014/05/logo4_454110.png

/wp-content/uploads/2014/05/logo5_454111.png

4. Specify your company logo.

/wp-content/uploads/2014/05/logo6_454112.png

/wp-content/uploads/2014/05/logo7_454113.png/wp-content/uploads/2014/05/logo8_454114.png

You can also change other properties to apply your company brand colors.

5. Build  your theme

/wp-content/uploads/2014/05/logo9_454115.png

/wp-content/uploads/2014/05/logo10_454116.png

/wp-content/uploads/2014/05/logo11_454117.png

Your theme was generated and your company log was uploaded to the frontend server.

6. Find the theme parameter

Transaction: /UI5/THEME_TOOL

/wp-content/uploads/2014/05/logo12_454118.png

/wp-content/uploads/2014/05/logo13_454120.png

Your theme parameter is “sap-theme=masa@https://<host>.<domain>:<port>/sap/public/bc/thems/~client-<client>”

*Note: “~client-<client>” specify the client with “-“, not “=”.

7. Test SAP Fiori launchpad with theme parameter.

Setting a Custom Theme via URL Parameter

URL: https://<host>.<domain>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html?sap-client=<client>&sap-theme=masa@https://<host>.<domain>:<port>/sap/public/bc/themes/~client-<client>

/wp-content/uploads/2014/05/logo14_454093.png

Please also take a look How to set a theme parameter to SAP Fiori launchpad.

For example, users just call https://<host>.<domain>:<port>/fiori

Assigned tags

      37 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Ralph Kerschbaumer
      Ralph Kerschbaumer

      Hi Masa,

      thanks for sharing this good info.

      Could it be that only TIF format is allowed as logo? I tried .gif, .jpg and .tif and only TIF can be displayed.

      Regards

      Ralph

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      Any MIME type should be OK, if browser supports those. If you have an issue, please create a new discussion. Start a discussion

      Author's profile photo Former Member
      Former Member

      Hi Masa - you've been very helpful with fiori. It looks pretty great. I am having a problem with getting the logo to display and I hope you can help me. I went through the pre-requisites and tried to install OSS note 1957334 - Corrections for SAP NetWeaver UI Add-On 1.0 SP08, but it looks like it is not released yet. I was able to install the second OSS note but SNOTE won't download this one and I can't display it. Can you help? Thanks.

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      The note is in update status now. You can find contents in Re: Fiori Launchpad Admin Page Problem - "Select a tile template" page - only News Tile visible. or try it tomorrow. It is the central information note for SP08 and you have to download the notes listed in the central note.

      Author's profile photo Former Member
      Former Member

      Thank you Masa. The note is now available for downloading. Looks like a very useful note. I notice that it is not applicable for Netweaver 7.4. Is there a similar note to support 7.4?

      thanks,

      -Rolb

      Author's profile photo Former Member
      Former Member

      Hi Masa,

      thank you for that guide. We should have latest SP on GW 7.4 and tried all notes mentonied in the guides.

      In our Theme Designer we facing a problem with your guide. We also choose blue crystal as base for the custom theme. When doing this, the following errors occurs (i replaced host and port the following console output)

      GET https://host:port/sap/public/bc/themes/~client-001/.theme-repository-options.json 404 (Not found) sap-ui-core.js:27

      2014-07-02 15:32:51 registerResourcePath ('i18n', './i18n/') - sap.ui.ModuleSystem sap-ui-core.js:80

      HEAD https://host:port/demokit/index.html 404 (Not found) sap-ui-core.js:27
      HEAD https://host:port/sap/public/bc/ui5_ui5/demokit/ 404 (NOT FOUND) sap-ui-core.js:27
      GET https://host:port/sap/bc/theming/themes/~client-001/Portal/testsuite.json 403 (Forbidden)

      The main problem occurs when we add an application or launch UI5 Application Previews / Mobile Apps / Explored. Then a popup show that host:port/sap/public/bc/themes/~client-001/UI5/sap/ui/layout/themes/sap_bluecrystal/library.css could not be loaded.

      Same error happens when i tried to replace the logo or save this theme.

      Have you an idea?

      Thank you very much

      Kai

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      Please post questions in discussion. Start a discussion.

      Author's profile photo Former Member
      Former Member

      Hi Masa,

      thank you very much for this detailed How-To.

      Worked like a charm for me!

      Regards,

      Thomas

      Author's profile photo Former Member
      Former Member

      Hello Masayuki,

      I have done everything according to your guide but the logo is broken. When I check revies I see that new theme works great but then I upload it to the system, open in browser and image is broken. I checked the code of element, image doesn't exist there. I tryed many times and with different pics (even in different types). Only 1 attempt was successful...  Then I did the same steps with the same image and result was negative. Is it common?

      Regards,

      Vachik.

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      Please post questions in discussion. Start a discussion.

      Author's profile photo Scott Seaman
      Scott Seaman

      If I save my theme with Logo of: @sapUiGlobalLogoDefault

      it saves just fine.

      As soon as I change it to:<uploaded image>

      I get this error:  cannot read property 'absoluteUrl' of null

      I cannot delete the uploaded image either, get the error:

      Uncaught TypeError: Cannot assign to read only property 'id' of xxxlogo.bmp

      Can you help, what have I done wrong?

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      Please post questions in discussion. Start a discussion.

      Author's profile photo Sanjay Aswani
      Sanjay Aswani

      Hi Masa,

      Thanks for sharing. I am following the steps guided by you. When I am changing the image for logo, the preview is showing correct. But as soon as I build my theme the image is not displayed not even the SAP logo. Can you suggest me some solution.

      Thanks & Regards

      Sanjay

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      Please check the SAPUI5 library version.

      SAP Fiori - UI Add-on SP12 notes list, SAPUI5 library 1.28.11

      Author's profile photo PRASAD GVK
      PRASAD GVK

      Hello Masayuki Sekihara,

      Thanks a lot for the blog. It was really helpful.

      I just want to hide the SAP logo and don't want to display any logo.

      Can you please let me know if there is any other way to do it?

      Thank you.

      Best regards,

      Prasad

      Author's profile photo Former Member
      Former Member

      Hi Prasad,

      you could try to just replace the logo with a transparent GIF or PNG.

      You could also set the size of the logo to 0 using CSS:

      .sapUshellShellHeadBegin>.sapUshellShellIco>img {
         max-height: 0px;  
         max-width: 0px; }
      Author's profile photo PRASAD GVK
      PRASAD GVK

      Hello Thomas,

      Thanks for the reply.

      We are working on SPS09 and could not find library.css file.

      We were able to find the image path in MIME repository  "sap/public/bc/ui5/libraries/com.sap.ui5.core/meta-inf/resources/sap/ui/core/mimes/logo

      /sap_50x26.png"   but could not find "library.css" file to make the changes in  ".sapUshellShellIco" class.

      Can you please let us know the path to this library.

      Thank you.

      Best regards,

      Prasad

      Author's profile photo Former Member
      Former Member

      Hi prasad,

      i have changed my company logo with the path "

      sap/public/bc/ui5/libraries/com.sap.ui5.core/meta-inf/resources/sap/ui/core/mimes/logo

      /sap_50x26.png" but it not loaded in my fiori launchpad

      i tried theme designed also but its not loaded my sap ui5 library version 1.28.5 and UI add-ons SP12

      kind regards,

      Rajesh Neelakantam

      Author's profile photo Former Member
      Former Member

      Hi Masa,

      Thanks for the awesome blog. It was so straight-forward and really helpful. I have this another requirement where I need to hide the "Contact Support" option when user clicks on the drop-down adjacent to the logged in username. Any thoughts on this ? I have also posted a question, here is the link - Disable/ Hide the "Contact Support" option on FIORI launchpad

      /wp-content/uploads/2015/10/image001_806555.png

      Regards,

      Shruti

      Author's profile photo Sridhar Kanchanapalli
      Sridhar Kanchanapalli

      Shruti,

      From Developers Tools (F12), you can findout ID and hide them like from Theme CSS.

      EndUserFeedbackBtn, #userPreferencesButton{

          display:none;

      }

      Author's profile photo Oliver Bär
      Oliver Bär

      Hi Sridhar,

      I was searching so long for a solution on how to hide the "Preferences"-Button because there is no option, but with your hint I added the CSS as custom CSS in my Theme and it works like a charm 🙂

      Thank you so much.

      BR, Oliver

      P.S. I think it's not possible to hide the "Preferences"-Button using the "PersonalizationOff.json".

      Author's profile photo Joseph Chinnabathini
      Joseph Chinnabathini

      Hi Shruti,

      You should go to Se80 - BSP Application - /UI2/USHELL - Page Fragments - shells - abap - cfg - sap - PersonalizationOff.json

      Check below code and put false for contact support.

      "renderers": {

               "fiori2" : {

                   "componentData": {

                       "config": {

                           "enablePersonalization": false,

                           "enableTagFiltering": false,

                           "enableSetTheme": false,

                           "enableAccessibility": true,

                           "enableSendFeedback": false

                       }

                   }

               }

           }

      }

      Hope this helps,

      Joseph

      Author's profile photo Ivan Mirisola
      Ivan Mirisola

      Hi Masa,

      Just to point that the last URL on item 7 (Test SAP Fiori launchpad with theme parameter) has a typo:

      It reads:

      URL: https://<host>.<domain>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html?sap-client=<client>&sap-theme=masa@https://<host>.<domain>:<port>/sap/public/bc/thems/~client-<client>


      But should be:


      URL: https://<host>.<domain>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html?sap-client=<client>&sap-theme=masa@https://<host>.<domain>:<port>/sap/public/bc/themes/~client-<client>


      There's a missing 'e' letter on the "..../bc/themes/~...".


      Regards,

      Ivan

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      Thanks. I have updated the doc.

      Author's profile photo Faddy Learner
      Faddy Learner

      Can anyone please respond to the below link where I have mentioned the issue while editing theme

      Issue while saving standard theme to custom

      Regards,

      Faddy

      Author's profile photo Abhishek Gupta
      Abhishek Gupta

      How do you transport themes between clients on the same environment?

      i did the following in my dev client 130:

      1. Created a simple custom theme [ changed SAP logo with my company logo].

      2. Made config changes in /UI2/NWBC_CFG_CUST

      3. Invalidated theme via THEME TOOL tcode.

      My theme works fine in client 130 in FLP but i am unable to import the theme in my test client 100 and release it for testing.

      i tried to do SCC1 for the theme object and the customizing but i dont see the theme in client 100.

      Please suggest.

      Author's profile photo Oliver Bär
      Oliver Bär

      Hi,

      is there a size restriction for the logo (the SAP-logo has 50x26 px)? I wanted to add a bigger logo (335x25 px) but I didn't find out how to change the CSS.

      In the meantime I found out (using Chrome DevTools) that the max. size is 96x44 px, is that correct?

      BR, Oliver

      Author's profile photo Sridhar Kanchanapalli
      Sridhar Kanchanapalli

      I have resolved this way.

      Upload new image to Theme and add these properties in the css. Hopefully it works for you.

      .sapUshellShellHeadBegin>.sapUshellShellIco {

         max-width: 100%;

         max-height: 100%;

         padding-left: 2px;

      }

      .sapUshellShellHeadBegin>.sapUshellShellIco>img {

         max-height: 85%;  

         max-width: 95%;

         vertical-align: middle;

      }

      Thanks,

      Sri

      Author's profile photo Shekhar Prasad
      Shekhar Prasad

      Hi Sri,

      How to access the library.css?

      Can you please share the path ?

       

      Thanks

      Shekhar

      Author's profile photo Sagarika Gattu
      Sagarika Gattu

      Hello Shekhar,

       

      https://<hostname>:<port>/sap/bc/theming/theme-designer?sap-client=<client>, you can access the theme designer from above path, select the relevant theme and put your code in CSS tab after opening the theme.

      Author's profile photo Luc VIGNON
      Luc VIGNON

      Hi,

      Is it also possible to use the Theme Designer for a On Demand Fiori application.

      I have the request from one of my customer using SAP IBP S&OP 6.3 on Cloud ?

      Regards

      Luc

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      Theme Designer is available in part of Clod Portal service on SAP HANA Cloud Platform.

      Author's profile photo Former Member
      Former Member

      Dear Masayuki,

      I can access that URL only with HTTP:// but not HTTPS://

      is that okay?

      I can create of a copy of the current theme, because of authorization issue,

      Do you know which authorization I should have?

      Thanks,

      Robert

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      Please create a new discussion.

      Author's profile photo Bhaskar Pavuluru
      Bhaskar Pavuluru

      Hi,

       

      I am using SAP Marketing cloud 1811+ versions. I am trying to create new theme based on SAP Belize, but i am getting error.

       

      Anyinfo on this?

       

      Regards,

      Bhaskar

       

      Author's profile photo Mynyna Chau
      Mynyna Chau

      Please ask your question here: https://answers.sap.com/questions/ask.html

      That way, other community members can help find the right answer for you and it will benefit others that might have the same error experience as you.

      Best, Mynyna (SAP Community moderator)

      Author's profile photo Fennet Louis
      Fennet Louis

      Hi masa,

      I followed your steps and configured the logo of the Fiori Launchpad,but when i am viewing it in Launchpad it is showing as the below picturee32b5e1d.png.Plese help me on how to solve it.