![](/uploads/1/2/5/5/125504951/158875642.jpg)
The SAP Content section’s icon color is a main item in SAP Fiori Theme Designer, but there is another problem with this program. You can see that I change the color to full red, but icons looks more like a pink color. SAP Documentation. Extended search Extended Online Search SAP Library Glossary| Support| Copyright. UI Theme Designer UI Theme Designer.
FAQ on SAP UI Theme Designer for SAP NetWeaver AS ABAP
Which prerequisites do I need to use the UI theme designer?
To use the UI theme designer for NetWeaver ABAP prior release 7.40 you need to install the UI Add-on for NetWeaver 1.00 SP04 or higher. Starting with release 7.40 SP04 the UI theme designer is part of NetWeaver.
Please read the documentation, especially the supported and unsupported features that are described in the documentation carefully.
Where do I find the documentation for the UI theme designer?
Please read the documentation, especially the supported and unsupported features that are described in the documentation carefully.
Where do I find the documentation for the UI theme designer?
Goto:
- Application Help - UI theme designer documentation
- Master Guide - Installation instructions
How-to use a custom theme for a SAPUI5 or Web Dynpro ABAP application?
Add the URL parameter sap-theme with the Theme Id and the 'Theme Root' to your application.
e.g.: sap-theme=CustomTheme@http://myserver.com/sap/public/bc/themes/~client-123
Add the URL parameter sap-theme with the Theme Id and the 'Theme Root' to your application.
e.g.: sap-theme=CustomTheme@http://myserver.com/sap/public/bc/themes/~client-123
Created custom theme is not applied for Web Dynpro ABAP application with URL parameter ‘sap-theme’?
Star Web Dynpro ABAP administration application WD_GLOBAL_SETTING and check parameter “Use of External Style Sheets (WDUSEEXTERNALSTYLESHEET)”. If it is set to “External Style Sheets Ignored” then this prevents applying of custom theme.
What is the different between the path /sap/public/bc/themes and /sap/bc/theming/themes?
What is the different between the path /sap/public/bc/themes and /sap/bc/theming/themes?
- /sap/public/bc/themes
For use on productive systems. Allows only read access on theming data. Does not perform any authorization checks.
![Jobs Jobs](/uploads/1/2/5/5/125504951/450907309.png)
- /sap/bc/theming/themes
For use on development systems: Read and write access on theming data. Performs authorization checks on theming authorization object. It is required for the UI theme designer.
See Note 2043817 for further information.
Which authorizations are needed to use the UI theme designer?
Authorization object: /UI5/THEME (Basis: Administration)
Further information can be found in the documentation.
Which authorizations are needed to use the UI theme designer?
Authorization object: /UI5/THEME (Basis: Administration)
Further information can be found in the documentation.
Preview application is not displayed
Check if the protocol (HTTP/HTTPS) are different between the theme designer and the preview application. Some browsers security policy refuses to embed applications with different protocols.
Retry with the same protocol for the preview application as the theme designer has. If both run on the same host you can also leave out the protocol and hostname.
No parameters displayed after preview application is added
Check if the theme designer and the preview application run on the same host. If they are different the theme designer probably cannot access the preview application. Please use a preview application on the same host or on a host that can be relaxed to the same domain as the theme designer's host.
Error Message 'Cannot access theme repository'
If this error occurs the URL parameters sap-themeroot or sap-webdav-themeroot are wrong or do not match to the system the theme designer is running on.
Solution: Restart the UI theme designer from SAPGUI using transaction /UI5/THEME_DESIGNER (ok code: /n/UI5/THEME_DESIGNER). If the error still occurs manually change the protocol (http/https), hostname and port of the URL parameters sap-themeroot and sap-webdav-themeroot so that they match to the theme designer (start of the URL in the browser).
Publish option not available / Themes sap_tradeshow and sap_corbu not available
The URL of the UI theme designer was probably manually changed.
Solution: Restart the UI theme designer from SAPGUI using transaction /UI5/THEME_DESIGNER (ok code: /n/UI5/THEME_DESIGNER)
Access images from 'Custom CSS' for SAPUI5
- Open page /sap/bc/theming/themes/UI5/sap/ui/core/themes/THEME?sap-client=XXX (where THEME is the Id of your custom theme and XXX is your client) from your server in your web browser
- Create folder 'img' (if not exists)
- Upload your custom image into this folder (prefix it with 'z_' to do not mess up with SAP standard images is probably a good idea)
- You can access the images as local files now in your custom CSS, e.g. .xyz { background-image: z_logo.png }
How can I use custom themes with SAPUI5?
Please find further information in the SAPUI5 developer guide:
- https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/ThemingFAQ.html
Uncaught exception /UI5/CX_VFS_ERROR in the ABAP program /UI5/CL_THEME_UI5_ACCESS_FAST
Please follow these steps:
- Please open the transaction SE80, go to MIME repository and open the folder:
SAP->PUBLIC->BC->UI5->LIBRARIES->VER - Please check if there is a folder named '1.BAK'.
- If so, this folder has to be renamed to '1'.
(You can rename the folder by right clicking it, go to Properties and switch to change mode. You might need a transport request to save the changes.)
Incorrect URL for themes in NetWeaver Business Client or Fiori Launchpad
- SAP UI5 Tutorial
- SAP UI5 Useful Resources
- Selected Reading
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 live preview of the theme while you are designing.
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.
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
- Browser-based, graphical WYSIWYG editor − Changes the values of theming parameters and immediately sees how it affects the visualization of the selected preview page.
- Built-in preview pages − Select built-in preview pages to see what your custom theme will look like when it is applied to an application −
- Application 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 − Specifies a set of parameters with the main color values defining your corporate branding.
- Cross-technology theming − Create one consistent theme that applies to various SAP UI clients and technologies −
- SAPUI5 standard libraries (including SAP Fiori applications and SAP Fiori Launchpad)
- Unified Rendering technologies (such as Web Dynpro ABAP and Floorplan Manager)
- SAP NetWeaver Business Client
SAP UI Client | UI parts can be themed |
---|---|
Web Dynpro ABAP | You can theme applications that do not use the following UI elements:
You can only consume themes created with the UI theme designer for Web Dynpro ABAP applications as of SAP NetWeaver 7.0 EHP2 |
Floorplan Manager for Web Dynpro ABAP (FPM) | You can theme applications that do not use HTMLIslands or Chart UIBBs |
SAPUI5 | You can theme SAP Standard libraries. Custom SAPUI5 libraries cannot be themed |
SAP NetWeaver Business Client (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 a Theme Designer in SAP Fiori?
Step 1 − Login to SAP Fiori Front-End server. You can use T-Code: Theme Designer or use shortcut as shown in the following screenshot and login.
Step 2 − Once you login, you will have all the default templates provided by SAP for Theme Designer. Select the default theme and click Open.
Step 3 − Enter the Fiori Launchpad link and Name of the application and click Add.
Step 4 − From the right side of the screen panel, you can select Color, Font, Image and other properties. You can edit colors as shown in the following screenshots.
Step 5 − To save the Theme, you can click the Save icon as shown in the following screenshot. You also have an option for save and build option.
Once you click Save and Build, it will start saving and when completed, you will get a confirmation message - Save and Build completed.
Step 6 − To get the link of this Custom Theme, use T-code as shown in the following screenshot −
Step 7 − Select the Theme that you have created and click the Info tab.
Step 8 − Use Ctrl+Y to copy the URL from the screen and make a note of this.
Supported Themes
![Theme Theme](/uploads/1/2/5/5/125504951/404306833.jpg)
These are the default themes that are shipped with UI5 −
- Blue Crystal
- Gold Reflection
- Mobile Visual Identify
- High Contrast Black
Chart Types
There are various chart types in sap.viz.ui5 charting library that can be used to represent the business data. Following are some CVOM chart types- Column, Bubble, Line, Pie, etc.
![](/uploads/1/2/5/5/125504951/158875642.jpg)