SAP Transport Standard Text, UI Theme Designer

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), you must be assigned the following authorization object:

  • Authorization object: /UI5/THEME
  • ACTVT (Activity): 02 (Change)
  • /UI5/THMID (Theme Id): * = all themes
Check also   Best Ressources to Learn Javascript for ABAP Developers

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 activity Activate ICF service for UI theme designer. You access the IMG activity in the SAP Customizing Implementation Guide by choosing Start of the navigation path SAP NetWeaver Next navigation step UI Technologies Next navigation step UI Theme Designer Next navigation step Maintain Custom Themes Next navigation step Activate ICF service for UI theme designer End of the navigation path.

  • 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 following browsers are supported:

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…”.

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”)) can be 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.

source: Setting Themes

Further Reading on UI Theme Designer

Leave a Reply

Your email address will not be published. Required fields are marked *