Skip to Content
Technical Articles
Author's profile photo Yongkang Ren

SAP Fiori Theme Customization

Introduction

SAP Fiori  is  a good design system. It can bring us unified user experience. It contains 5 themes, SAP Belize, SAP High Contrast Black, SAP High Contrast White, SAP Blue Crystal, SAP Quartz Light by default. In many cases, these theme’s color or font size cannot meet the needs of customer. So you can customize the theme base on one of the base theme. If you want to build your own theme, just follow me.

 

Process framework overview

Prerequisites

1. You need to have an adequate understanding of sapui5 framework

2.  You should have a hana cloud platform like

        https://account.cn1.hana.ondemand.com/cockpit/ 

3. You have the SAP GUI system and can login a system.

4. You have basic understanding of t-code in SAP GUI.

 

Detail Steps

  1. Create a new SAP UI5 Application with SAP Web IDE Full-Stack.
  2. Open the project and and open the file neo-app.json
  3. Append the json content into the routes property
     {
        "path": "/themedesigner",
        "target": {
           "type": "application",
           "name": "themedesigner"
         },
        "description": "Route for theme designer"
     },
    {
       "path": "/theme1",
        "target": {
            "type": "application",
             "name": "theme1"
         },
         "description": "Route for theme"
    }
   4. Run the ui5 application and modify the url like this
        https://....hana.ondemand.com/themedesigner/index.html 
      (The ellipsis parts depends on your subaccount name)
   5. Create a new theme as follows,

  
  After that, you can create a new theme base on the 5 kinds
  base theme.

   6. Design the theme with the designer tools

    There are 4 kinds of design tools.
    <1> Quick  The easiest way to design the theme for a beginner.
        You can modify the parameter according to the panel. 
    <2> Expert If you have mastered the sapui5 css rule, 
        this is suitable for you. Here is a small example.

 
 After you change the tile title text color, the preview page will 
 take effect at once.
    <3>Palette  If the colors are come from the ux designers, 
       you can define some colors here. And use the color in above picture.
       Here is a small demo
        3.1 Firstly, define some colors in the palette 
        

        3.2  Use the predefined color

        
    <4>CSS You can define some css from technical code. And then you can apply
       them in the page.

7. Save and publish --> export-->generate and download a new zip file

   You need select the second option in the picture as follows. Or else, 
   the theme zip file maybe too large to import into the new system.
    

8. Import the zip file into a new system.

   8.1  login the SAP GUI system and run t-code /n/ui5/theme_tool. You can see 
        the available themes in the system. And don't modify these themes.  If you 
        cannot open the theme tool, please run the t-code /nsu53 to view the 
        permission information.
   8.2  click the upload and import the zip file that be exported before
      

 
   8.3 login in the new system and the new imported theme will be available.
   

 
    8.4 Select the new theme, and it will be take effect in the home page.
    
 9. Transport the theme to QA or PROD system

    9.1 Create the Transport button, it will tell you to input a request no. 

    
   9.2 Create a Custom Request in the GUI, a new request No. will be generated.
       (You cannot create a Workbench Request here.)
    
   9.3 Execute transfer.

10. The new theme will be available in the new system.

Now you can apply the new theme in new system.

  Congratulations, you have finished the all steps for a new fiori theme.

Conclusion:

Finally we achieve our goal to build a custom theme and apply to the aim system.

This is a whole process to build a basic custom fiori theme and transfer it to product system.

Hope you can do some deep discussion with me.

 

Related Resources

SAP Fiori ByDesign

SAP Fiori UI Theme Designer

SAP Fiori

Assigned tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Daniel Chen
      Daniel Chen

      Good 🙂

      Author's profile photo Ray Lv
      Ray Lv

      Super!! Kevin

      Author's profile photo Hakan Şahin
      Hakan Şahin

      Hi Kevin,

      I couldn't understand how i can open theme designer. I created a project and edited neo-app.json but I couldn't run theme designer page. 404 not found.

      https://webidetesting**-p**trial.dispatcher.hanatrial.ondemand.com/themedesigner/index.html

       

      Can you help me?

      Author's profile photo Yongkang Ren
      Yongkang Ren
      Blog Post Author

      You can clone my sample project in my git repositories here https://github.wdf.sap.corp/c5205383/themeapp . If you have any other questions, please contact me.

      Author's profile photo Hakan Şahin
      Hakan Şahin

      Sorry I can't reach this site.

      Author's profile photo Yongkang Ren
      Yongkang Ren
      Blog Post Author

      Could you send your email to me? I can send the demo project to you.

      Author's profile photo Karthikeyan Rajendran
      Karthikeyan Rajendran

      Hi Ren,

      Lovely documentation, i need a help. we have a custom theme and in that the standard Images of SAP theme is not getting loaded in the custom theme. what is missing in our setup for not loading the image library.

       

      thanks in advance

      Author's profile photo Yongkang Ren
      Yongkang Ren
      Blog Post Author

      Sorry for my late response. Have you solved your issues? Could you supply more details for it and reach me by email yongkang.ren@sap.com.

      Author's profile photo Aqib Jamil Pathan
      Aqib Jamil Pathan

      Hi! Ren

      Great article and very informative.

      One thing would be important to add in the article such as Are there mandatory sicf services to be activated for custom theme to work or render properly?

      Are there specific authorizations to be considered while deploying the custom theme?

      After we transported the theme to production our Fiori Lauchpad is showing distorted website. Please see attached image.

       

      Thanks and Regards,

      AQIBRendering%20issue%20with%20custom%20theme

      Rendering issue with custom theme

       

      Author's profile photo Aqib Jamil Pathan
      Aqib Jamil Pathan

      sap/public/bc/themes service needed  activation. Due to inactive service custom theme did not get render

      Issue resolved

      Thanks

      Author's profile photo Yongkang Ren
      Yongkang Ren
      Blog Post Author

      Hi Aqib,

      You are right. The sicf service needs to be activated. This service has been activated before I transport my custom theme to the server. So this issue I didn't face before.

       

      Thanks,

      Kevin

      Author's profile photo Aqib Jamil Pathan
      Aqib Jamil Pathan

      Thanks for confirming.

      Regards,

      AQIB