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