Skip to Content

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.
    html?sap-theme=CorporateTheme@http://<host>.<domain>:50000/
    sap/public/bc/themes/~client-120/~cache-2VCj7NrjFnVx-uDZ8vm6HqrJVPsI
  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.

To report this post you need to login first.

12 Comments

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

  1. Amritendu Patra

    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

    (0) 
  2. 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 “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.

    (0) 
    1. Satyavathi g

      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

      (0) 
  3. 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>

    (0) 
  4. Mohinder Chauhan

    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.
    (0) 

Leave a Reply