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
Nenhum comentário:
Postar um comentário