How to setup your company logo in SAP Fiori launchpad
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:
- You have installed UI Add-on SP12
- SAP Fiori – UI Add-on SP12 notes list, SAPUI5 library 1.28.5
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
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
Any MIME type should be OK, if browser supports those. If you have an issue, please create a new discussion. Start a discussion
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.
The note is in update status now. You can find contents in . or try it tomorrow. It is the central information note for SP08 and you have to download the notes listed in the central note.
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
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)
2014-07-02 15:32:51 registerResourcePath ('i18n', './i18n/') - sap.ui.ModuleSystem sap-ui-core.js:80
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
Please post questions in discussion. Start a discussion.
Hi Masa,
thank you very much for this detailed How-To.
Worked like a charm for me!
Regards,
Thomas
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.
Please post questions in discussion. Start a discussion.
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?
Please post questions in discussion. Start a discussion.
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
Please check the SAPUI5 library version.
SAP Fiori - UI Add-on SP12 notes list, SAPUI5 library 1.28.11
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
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; }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
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
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
Shruti,
From Developers Tools (F12), you can findout ID and hide them like from Theme CSS.
EndUserFeedbackBtn, #userPreferencesButton{
display:none;
}
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".
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
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
Thanks. I have updated the doc.
Can anyone please respond to the below link where I have mentioned the issue while editing theme
Regards,
Faddy
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.
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
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
Hi Sri,
How to access the library.css?
Can you please share the path ?
Thanks
Shekhar
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.
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
Theme Designer is available in part of Clod Portal service on SAP HANA Cloud Platform.
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
Please create a new discussion.
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
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)
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.