A Short Introduction and Overview to SAP UI Theme Designer
Using UI theme designer you can create your own themes to adapt the visual appearance of applications.
One single tool for theming and branding SAP’s key user interfaces
Apply your corporate branding and look to applications built with SAP UI technologies. The UI theme designer is a browser-based tool for cross-theming scenarios. Use it to easily build your corporate identity themes 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. *
UI Theme Designer Tcode
The SAP Theme Designer Transaction Code is /UI5/THEME_DESIGNER
UI Theme Designer Authorization
For write access to the UI theme designer (create, update, delete themes), check if you have the following authorization object:
- Authorization object: /UI5/THEME
- ACTVT (Activity): 02 (Change)
- /UI5/THMID (Theme Id): * = all themes
Administrators can assign the relevant authorization objects to specific users using transaction Role Maintanance(PFCG).
UI Theme Designer Service
Activate the following Internet Communication Framework (ICF) service nodes:
To perform this step, launch IMG activity Activate ICF service for UI theme designer. You access the IMG activity in the SAP Customizing Implementation Guide by choosing.
- To be able to use the SAPUI5 and NWBC preview pages, the following ICF services must be activated:
Supported Browser for UI Theme Designer
The UI Theme Designer supports the following browsers:
|Browser||Version||Supported Operating Systems|
|Google Chrome (recommended)||Latest version||Windows 7 and successor versions|
|Microsoft Internet Explorer||Version 10 or higher||Windows 7 and successor versions|
|Mozilla Firefox||Latest version||Windows 7 and successor versions|
UI Theme Designer How to change Theme
Question: Standard SAP Themes locked for copy ?
Answer: Just open it in display mode then you can make a copy with “Save As…”.
Find Step by Step Guide how to create custom Theme using SAP Theme Designer here.
UI Theme Designer: Call with other Theme
use the http parameter: sap-theme
SAPUI5 offers three different ways in which a theme can be set.
For end users, applications can offer arbitrary ways of selecting or switching themes, based on the technical theme switching functionality offered by SAPUI5.
To define a theme and to switch it inside an application, you have different options.
- The initial theme can be hardcoded in the application (in the HTML script tag loading SAPUI5) or in a JS configuration object defined before SAPUI5 is loaded. This setting has the lowest priority.
- A URL parameter (for example: html?sap-ui-theme=sap_bluecrystal) can be used when starting a SAPUI5 application to set or override the initial theme.
List of SAP UI Standard Themes
SAP provides 7 SAP Standard Themes
- Crystal Corbu
- Gold Reflection
- Signature Design
- High ContrastBlack
You can read all the documentation about which SAP applications the SAP theme can be applied, the UI Frameworks, and UI Cliens compatibles with each theme (here)
Further Reading on UI Theme Designer
- UI Theme Designer on help.sap.com *
- SAP Theme Designer for UI PDF
- SAPUI5: The Comprehensive Guide to UI5 (book)
- SAP – Learn SAPUI5 Professional Development (udemy)
- Setting Themes in SAP