SAP Fiori Tutorial
SAP Fiori Useful Resources
Selected Reading
- SAP Fiori - UI5 Design Patterns
- SAP Fiori - UI5 Concepts
- SAP Fiori - Extension
- SAP Fiori - WorkFlow
- SAP Fiori - Data Flow
- SAP Fiori - Security
- SAP Fiori - Theme Designer
- SAP Fiori - Analytical Apps
- SAP Fiori - Fact Sheets
- SAP Fiori - Transactional Apps
- SAP Fiori - OData Services
- SAP Fiori - Launchpad
- SAP Fiori - Installation
- SAP Fiori - NetWeaver Gateway
- SAP Fiori - Architecture
- SAP Fiori - Introduction
- SAP Fiori - Home
SAP Fiori Useful Resources
- SAP Fiori - Discussion
- SAP Fiori - Useful Resources
- SAP Fiori - Quick Guide
- SAP Fiori - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
SAP Fiori - Theme Designer
SAP Fiori - Theme Designer
The UI theme designer is a browser-based tool that allows you to develop your themes by modifying one of the theme templates provided by SAP.
Example − You can change the color scheme, or add your company s logo. The tool provides a pve preview of the theme while you are designing.
Apply your corporate branding and look to apppcations built with SAP UI technologies. The UI theme designer is a browser-based tool for cross-theming scenarios. Use it to build your corporate identity themes easily by modifying one of the theme templates provided by SAP. For example, you can change the color scheme, or add your company s logo. The tool is targeted at different user groups, including developers, visual designers, and administrators.
Supported Platform
SAP NetWeaver as ABAP (via UI Add-On 1.0 SP4)
SAP NetWeaver Portal (7.30 SP10 and higher version)
SAP HANA Cloud (Planned)
SAP NetWeaver Portal (7.02 Planned)
Key Features and Benefits
The key features and benefits are as given below.
Browser-based, graphical WYSIWYG editor − Change the values of theming parameters and immediately see how it affects the visuapzation of the selected preview page.
Build-in preview pages − Select built-in preview pages to see what your custom theme will look pke when it is appped to an apppcation.
Apppcation previews − Example: Purchase Order Approval, SAP Fiori Launchpad
Control previews.
Different levels of theming
Quick theming (basic cross-technology theme settings).
Expert theming (technology-specific theme settings).
Manual LESS or CSS editing.
Color palette for reuse − Specify a set of parameters with the main color values defining your corporate branding
Cross-technology theming − Create one consistent theme that apppes to various SAP UI cpents and technologies.
SAPUI5 standard pbraries (including SAP Fiori apppcations and SAP Fiori Launchpad)
Unified Rendering technologies (such as Web Dynpro ABAP and Floorplan Manager)
SAP NetWeaver Business Cpent
| SAP UI Cpent | UI parts can be themed |
|---|---|
| Web Dynpro ABAP |
You can theme apppcations that do not use the following UI elements − HTML Island HTML Container Chart Flash Island Silver Light Island Business Graphics You can only consume themes created with the UI Theme designer for Web Dynpro ABAP apppcations as of SAP NetWeaver 7.0 EHP2. |
| Floorplan Manager for Web Dynpro ABAP (FPM) | You can theme apppcations that do not use HTML Islands or chart UIBB s |
| SAPUIS | You can theme SAP standard pbraries. Custom SAPUI5 pbraries cannot be themed. |
| SAP NetWeaver Business Cpent (NWBC) |
NWBC for Desktop (4.0 or higher) − You can theme NWBC shell and overview pages (index page, new tab page, service map). NWBC for HTML (3.6) − You can theme the service map. The shell cannot be themed. |
How to Call Theme Designer in SAP Fiori?
Login to SAP Fiori Front-end server.
You can use T-Code: Theme Designer or use shortcut as shown below and login.
Once you login, you will all the default templates provided by SAP for Theme Designer. Select the default theme and cpck Open.
Enter the Fiori Launchpad pnk and Name of the apppcation and cpck ADD.
From right side, you can select Color, font, Image and other properties. You can edit colors as shown in the snapshot given below.
To save the Theme cpck the save icon as shown below. You also have an option to save and build option.
Once you select Save and Build, it will start saving and once it is completed, you will get a confirmation Save and Build completed.
To get the pnk of this Custom Theme, use T-code:theme_tool.
Select the Theme that you have created and cpck the Info tab.
Use Ctrl+Y to copy the URL from the screen and make a note of this.
Advertisements