Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
masa_139
Product and Topic Expert
Product and Topic Expert

You can set your company logo in SAP Fiori launchpad.

Standard delivery:

Replacing with your company logo.

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

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.

4. Specify your company logo.

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

5. Build  your theme

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

6. Find the theme parameter

Transaction: /UI5/THEME_TOOL

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>

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

37 Comments
kersra
Explorer
0 Kudos

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

masa_139
Product and Topic Expert
Product and Topic Expert
0 Kudos

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

Former Member
0 Kudos

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.

masa_139
Product and Topic Expert
Product and Topic Expert
0 Kudos

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.

Former Member
0 Kudos

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

masa_139
Product and Topic Expert
Product and Topic Expert
0 Kudos

Please post questions in discussion. Start a discussion.

Former Member
0 Kudos

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

Former Member
0 Kudos

Hi Masa,

thank you very much for this detailed How-To.

Worked like a charm for me!

Regards,

Thomas

Former Member
0 Kudos

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.

scott_seaman
Explorer
0 Kudos

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?

masa_139
Product and Topic Expert
Product and Topic Expert
0 Kudos

Please post questions in discussion. Start a discussion.

masa_139
Product and Topic Expert
Product and Topic Expert
0 Kudos

Please post questions in discussion. Start a discussion.

aswani_sanjay
Explorer
0 Kudos

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

masa_139
Product and Topic Expert
Product and Topic Expert
0 Kudos
former_member230674
Contributor
0 Kudos

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

Former Member
0 Kudos

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; }
former_member230674
Contributor
0 Kudos

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

Former Member
0 Kudos

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

Regards,

Shruti

0 Kudos

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

former_member195676
Participant
0 Kudos

Shruti,

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

EndUserFeedbackBtn, #userPreferencesButton{

    display:none;

}

Ivan-Mirisola
Product and Topic Expert
Product and Topic Expert
0 Kudos

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

Jochinnabathini
Contributor
0 Kudos

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

masa_139
Product and Topic Expert
Product and Topic Expert
0 Kudos

Thanks. I have updated the doc.

fahad_saplearning
Participant
0 Kudos

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

0 Kudos

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.

Oliver_Baer
Explorer
0 Kudos

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 :smile:

Thank you so much.

BR, Oliver

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

Oliver_Baer
Explorer
0 Kudos

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

former_member195676
Participant
0 Kudos

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

0 Kudos

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

masa_139
Product and Topic Expert
Product and Topic Expert
0 Kudos

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

Former Member
0 Kudos

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

masa_139
Product and Topic Expert
Product and Topic Expert
0 Kudos

Please create a new discussion.

0 Kudos
Hi Sri,

How to access the library.css?

Can you please share the path ?

 

Thanks

Shekhar
sagarikagattu
Participant
0 Kudos
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.
former_member546428
Discoverer
0 Kudos

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

 

mynynachau
Community Advocate
Community Advocate
0 Kudos
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)
former_member673418
Discoverer
0 Kudos









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.