Technical Articles
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
- Create a new SAP UI5 Application with SAP Web IDE Full-Stack.
- Open the project and and open the file neo-app.json
- 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
Good 🙂
Super!! Kevin
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?
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.
Sorry I can't reach this site.
Could you send your email to me? I can send the demo project to you.
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
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.
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,
AQIB
Rendering issue with custom theme
sap/public/bc/themes service needed activation. Due to inactive service custom theme did not get render
Issue resolved
Thanks
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
Thanks for confirming.
Regards,
AQIB