Skip to Content
Technical Articles
Author's profile photo Sean Fesko

Customizing SAP Fiori Launchpad using the UI Theme Designer

Excerpt from the book SAP Fiori Implementation and Development by @anil.bavaraju. Used with permission of SAP PRESS. All rights reserved.


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:

  1. Log in to your ABAP frontend server.
  2. Run Transaction UI5/THEME_DESIGNER to open the UI Theme Designer.
  3. 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.)
  4. 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:

  1. First, we’ll add a custom background and logo. Upload the images by clicking the button next to the menu.
  2. 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:

  1. Click on Theme > Save & Build.
  2. Enter the Theme ID and the Title, and then click OK.
  3. 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:

  1. Log in to the ABAP frontend sever, and run Transaction UI5/THEME_TOOL.
  2. Scroll down or search for your custom theme.
  3. Double-click on Info.
  4. 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.
  5. 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.
  6. 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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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

                  "sap.ui.demo.wt": "./"


      Thanks & Regards,


      Author's profile photo Sean Fesko
      Sean Fesko
      Blog Post Author

      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.

      Good luck!


      Author's profile photo Former Member
      Former Member

      Hi Sean,

      Thanks for sharing the link. Will check it out.


      Author's profile photo Rahul Jain
      Rahul Jain

      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 “”
      while processing entity “”
      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
      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,


      Author's profile photo Sean Fesko
      Sean Fesko
      Blog Post Author

      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. I hope you can find a quick answer!




      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Neil Ward
      Neil Ward

      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>

      Author's profile photo Sean Fesko
      Sean Fesko
      Blog Post Author

      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: Hope you can find an answer!


      Author's profile photo Smriti Gupta
      Smriti Gupta

      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.


      Many Thanks


      Author's profile photo Former Member
      Former Member

      Could you please help me on below points:

      1. 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.
      2. 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.
      Author's profile photo Sean Fesko
      Sean Fesko
      Blog Post Author

      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: Perhaps you'll be able to get some help there?


      Author's profile photo Mani Kothapalli
      Mani Kothapalli

      Good Blog..

      Author's profile photo Prashanth kumar
      Prashanth kumar

      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




      Author's profile photo Rohit Gera
      Rohit Gera

      Nice Blog Sean. Great Job.