Technical Articles

Sean Fesko

January 24, 2017 5 minute read

Customizing SAP Fiori Launchpad using the UI Theme Designer

This blog explains how to customize SAP Fiori Launchpad using the UI Theme Designer.

The UI Theme Designer is a browser-based tool with a WYSIWYG designer; therefore, any change that you make can be viewed immediately in the browser. Using the UI Theme Designer, you can create your own themes with your corporate identity, corporate colors, and company logo. The figure below shows the SAP Fiori Launchpad architecture with the UI Theme Designer. The top layer shows the UI Theme Designer built on SAPUI5. The UI theme repository on the ABAP frontend server contains SAP standard themes and custom themes. Anytime you create a custom theme, the UI Theme Designer generates LESS files, CSS files, and images, which are saved into the repository. These files are received via HTTP calls. The application is loaded with the CSS files from a chosen custom theme.

The following are transaction codes you’ll be using while working with the UI Theme Designer:

Transaction UI5/THEME_DESIGNER: This transaction is used to create, edit, copy, delete, or rebuild/upgrade a theme.
Transaction UI5/THEME_TOOL: This transaction is used for deleting, exporting, importing, transporting, and to analyze theme content.
Transaction UI Theme Repository: This tool is used for exporting or importing single files, or it’s used to analyze theme content.

Now that you have an overview of the UI Theme Designer, let’s look at how to create themes for SAP Fiori Launchpad.

2 Creating a Custom Theme

In this section, we’ll show you how to create a new theme for SAP Fiori Launchpad and how to apply it to the default template. To do so, follow these steps:

Log in to your ABAP frontend server.
Run Transaction UI5/THEME_DESIGNER to open the UI Theme Designer.
Select a theme, and click Open. (Note: You can create a custom theme only on a base theme. For example, to create a new custom theme we started with the SAP Blue Crystal theme.)
Enter the link to the application. In our example, we want to change the theme of SAP Fiori Launchpad, so enter the SAP Fiori Launchpad URL. You can also provide a name for the application, but this is optional.

The UI Theme Designer provides various options for theming depending on the skill:

Quick Theming
Expert Theming (not for productive use; subject to change)
Color palette (not for productive use; subject to change)
Manual LESS or CSS editing

You can toggle between Original and Preview modes to compare your changes with the actual version. You can select between different layouts, that is, Desktop, Mobile, and Tablet, to simulate your changes on different device types.

Next, let’s look at some of the options in Quick Theming that can help you change the look and feel of SAP Fiori Launchpad.

2.1 Quick Theming

Using the Quick Theming option, you can change the background colors, fonts, and images. The following steps demonstrate how to do this for our custom application:

First, we’ll add a custom background and logo. Upload the images by clicking the button next to the menu.
After uploading the background image and icon, the Quick Theming tool will replace the standard SAP images. Similarly, you can change the text colors, fonts, and so on.

2.2 Expert Theming

Next, let’s look at the Expert Theming tool. To use this tool, select the Expert option and then enter “tileiconcolor” in the search box to filter the objects.

You can change the color for the sapUshellTileColor field, and that will change the color of the icons in the tile. Your output should reflect all the changes you’ve made until now, and you can toggle between the Original and Preview mode.

2.3 Save and Build

The next step is to save and publish the changes to the ABAP frontend server. Follow these steps:

Click on Theme > Save & Build.
Enter the Theme ID and the Title, and then click OK.
After the custom theme is saved and built, you should see a confirmation message. Click OK.

2.4 Test the Custom Theme

You’ve successfully created a custom theme and then uploaded to the ABAP frontend server. Next, you’ll have to test the custom theme by following these steps:

Log in to the ABAP frontend sever, and run Transaction UI5/THEME_TOOL.
Scroll down or search for your custom theme.
Double-click on Info.
Copy the URL and paste it at the end of the SAP Fiori Launchpad URL with an “&” before the URL. Now, let’s test the theme by running the URL. You should now see the new custom theme applied to your SAP Fiori Launchpad: https://<host>.<domain>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.
html?sap-theme=CorporateTheme@http://<host>.<domain>:50000/
sap/public/bc/themes/~client-120/~cache-2VCj7NrjFnVx-uDZ8vm6HqrJVPsI
The next step is to overwrite the standard theme with the custom theme, which you created in the previous steps. Run Transaction /UI2/NWBC_CFG_SAP.
Set the SAP_FLP parameter value to the custom theme which you created previously.

You should now see SAP Fiori Launchpad with the new theme.

If you’re looking for more information about SAP Fiori themes, check out this blog post.

17 Comments

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

Former Member

January 24, 2017 at 8:08 pm

Hi Sean,

Can u plz suggest a way to inherit this customized theme in our UI5 application. I am using sap_bluecrystal theme in index.html

 <script
         id="sap-ui-bootstrap"
         src="resources/sap-ui-core.js" 
         data-sap-ui-theme="sap_bluecrystal"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-bindingSyntax="complex"
         data-sap-ui-preload="async" 
         data-sap-ui-resourceroots='{
            "sap.ui.demo.wt": "./"
         }'>
      </script>

Thanks & Regards,

Amrit

Sean Fesko

Blog Post Author

January 24, 2017 at 8:47 pm

Hi Amrit,

I’m afraid I can’t help you, but maybe another reader will pipe in! There is also a Questions & Answers section on SAP Community that might be of use. https://answers.sap.com/index.html

Good luck!

Sean

Former Member

January 25, 2017 at 4:43 am

Hi Sean,

Thanks for sharing the link. Will check it out.

Amrit

Rahul Jain

April 18, 2017 at 10:06 am

Hi Sean,

Nice Blog.

I followed the same for my requirement of creating a custom sap belize theme and adding a background image and logo in my launchpad.

I am able to save the theme after adding the stuff. But when try to do save and build i facing below error.

Error During Compilation of CSS File

The reason can be a changed parameter value or custom CSS. To solve the problem, examine the changed parameters and check the custom CSS. You can find all changed parameters in the expert tab when you select the delta filter (triangle icon).

sap.theming.less.CompilationException:File build error.
in code “sap.theming.less.File.build”
while processing entity “UI5.sap/ovp.custom_belize_2.library”
CAUSED BY “sap.theming.less.LessParsingException:Unrecognised input
in code “fImporter”
in file “/UI5/sap/ovp/themes/sap_belize/library.less”
in line 136 column 52
Extract:
Line 135:}
Line 136:.sapOvpStackedCardPopup {.sapOvpObjectStreamHeader {@sapMFontHeader2Size}
Line 137:.sapOvpObjectStreamClose {font-size: @sapMFontHeader5Size;
CAUSED BY “Error: Unrecognised input

Could you please help me on this. Its bit urgent.

Thanks in Advance,

Rahul.

Sean Fesko

Blog Post Author

April 18, 2017 at 12:09 pm

Hi Rahul,

Unfortunately, I don't have an answer to your question. There is a Questions & Answers section on SAP Community that might be of use. https://answers.sap.com/index.html. I hope you can find a quick answer!

Best,

Sean

Former Member

July 5, 2017 at 7:23 am

Hi Rahul,

Did the above theming issue got resolved?. We are also facing the same issue. Can you provide the solution .

[SILENT ERROR] sap.theming.less.autorepair.InvalidImportException:Incorrect imports detected in "NWBC.baseLib.Demo.common". Rewriting imports.
in code "sap.theming.less.Framework.notifyAfterLoadFile"
while processing entity "NWBC.baseLib.Demo.common"
at date "2017-07-05T06:13:56Z"
with engine version "1.22.10"

Thanks in advance

Michael De Clara

July 17, 2017 at 1:09 pm

Hello Former Member

did you find a solution for your described error message? We are also facing this issue.

Thank you very much.

Best Regards Michael

Neil Ward

May 30, 2017 at 1:17 pm

Hi Sean, thanks for the blog.

Everything worked except the final step, using /UI2/NWBC_CFG_SAP to set the SAP_FLP parameter didn't work for me.

Is that bit only relevant if you use NWBC?

The only way I can get FLP to use my customer theme is to use the URL parameter sap-theme=<really long parameter stuff>

Sean Fesko

Blog Post Author

May 30, 2017 at 1:22 pm

Hi Neil,

Thanks for reading! I'm afraid I don't have an answer to your question, but there is a Questions & Answers section on SAP Community that might be of use: https://answers.sap.com/index.html. Hope you can find an answer!

Sean

Smriti Gupta

June 8, 2017 at 3:17 am

Hello Neil,

I faced the same problem and could set the theme using /UI2/NWBC_CFG_SAP with followwing workaround. Please see the answer(last answer) posted by my over here and if the solution works, please give your comment over there.

https://answers.sap.com/questions/209063/index.html

Many Thanks

smriti

Former Member

June 6, 2017 at 10:19 pm

Could you please help me on below points:

I am looking to change Tile Text in the Launch Pad. I can change it individually but we want it to be done for all users i.e. Globally.
I am looking to add couple of fields which are appearing in the request pop-up to the main page of launch pad. eg: Email address, Country etc. Could you please let me how can I read the data and add/configure new fields on the Launchpad.

Sean Fesko

Blog Post Author

June 7, 2017 at 12:58 pm

Hi Mohinder,

Thanks for reading! I’m afraid I don’t have an answer to your question, but there is a Questions & Answers section on SAP Community that might be of use: https://answers.sap.com/index.html. Perhaps you'll be able to get some help there?

Sean

Mani Kothapalli

January 24, 2019 at 9:14 pm

Good Blog..

Prashanth kumar

July 1, 2019 at 3:29 pm

HI Sean

i have created a sap ui5 application and i have implemented a theme designer and i have deployed in sap cloud its working fine when i open the application through URL,but if i configure the application in Fiori launchapd all the theme designer work what i have made is not showing when i open my application in launhpad, can you please suggest me how to make it work even if i open the application in launchpad also

can u just show me how to configure sap fiori launhpad by using theme designer

Thanks

Prashanth

Rohit Gera

February 18, 2021 at 11:28 am

Nice Blog Sean. Great Job.

KanakaRao Mutti

April 12, 2022 at 4:37 pm

Hi Sean,

We have created the customized theme in UI theme designer (Save & build). But we are unable to activate the theme in the fiori launchpad + SAP enterprise portal. Also our application is based on java stack.

Can anyone suggest on this please?

Thanks,

Mutti Rao.

Sean Fesko

Blog Post Author

April 14, 2022 at 5:03 pm

Hi KanakaRao,

Sean

Technical Articles

Customizing SAP Fiori Launchpad using the UI Theme Designer

Assigned Tags