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:
  • /sap/public/bc/themes
  • /sap/bc/theming To perform this step, launch IMG activityActivate ICF service for UI theme designer. You access the IMG activity in the SAP Customizing Implementation Guide by choosing > SAP NetWeaver UI Technologies > UI Theme Designer > Maintain Custom Themes > Activate ICF service for UI theme designer.
• To be able to use the SAPUI5 and NWBC preview pages, the following ICF services must be activated:
  • /sap/bc/ui5_demokit
  • /sap/public/bc/ui2

source: Prerequisites on how to install UI Theme Designer

Supported Browser for UI Theme Designer

The UI Theme Designer supports the following browsers:

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.
• A JavaScript API (sap.ui.getCore().applyTheme(“sap_bluecrystal”)) used to switch themes on the fly. The application state is not lost, there is no server roundtrip (except for loading the CSS, if not cached), only the stylesheets are exchanged.

List of SAP UI Standard Themes

SAP provides 7 SAP Standard Themes

• Belize
• Blue
• Crystal Corbu
• Gold Reflection
• Signature Design
• Tradeshow
• 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
  • SAP’s UI Theme Designer
  • UX113 : Applying UI Theme Designer to SAP Fiori and SAP NetWeaver Business Client
  • SAP UX Explorer How-To Guide
• SAPUI5: The Comprehensive Guide to UI5 (book)
• Learn SAPUI5: The new enterprise Javascript framework with examples
• SAP – Learn SAPUI5 Professional Development?(udemy)
• Setting Themes in SAP