Appearance
UI Theme Designer
Apply your corporate branding to applications based on SAPUI5 technology.
The UI theme designer lets you apply your corporate branding to applications built with SAP UI technologies. You can make changes to theme templates supplied by SAP to create custom themes that use your own color scheme, background images, and company logo. You can apply a custom theme to various SAP UI clients and technologies. Additionally, you can include your own custom CSS files without having to modify any of your applications.
| Feature | Description |
|---|---|
| Theming and branding of applications based on SAPUI5 in the SAP BTP environment | Create your own custom themes based on SAP standard themes, and use them to adapt the visual appearance of your applications based on SAPUI5 to match your company's brand. |
| Browser-based, graphical WYSIWYG editor with built-in preview pages | Change the values of theming parameters and immediately see what your custom theme will look like when it is applied to an application. |
| Uploading of custom themes as HTML5 applications to your SAP BTP account | You can upload your custom themes directly to your account as HTML5 applications. |
| Automatic upgrade of themes for new SAPUI5 versions. | You can upgrade your themes automatically to match the latest version of SAPUI5. |
| Different levels of theming |
|
| Color palette for reuse | Specify a set of parameters with the main color values defining your corporate branding. |
| Control picker | Simply select controls in the preview page to display a list of parameters that can be used to change its appearance. |
| Cross-technology theming |
|
How to get started?
Find relevant SAP Community Blogs.
Use Case Scenarios
Portal Sites
Portal services like SAP Build Work Zone supports the UI Theme Designer out-of-the-box.
Administrators can create a theme in the Portal by launching UI theme designer directly from an SAP Fiori launchpad or freestyle site.
From here you can easily manage your themes and assign them to any site in your subaccount as well as make the themes available for end user selection.
Standalone SAPUI5 Apps
Administrators can assign themes to standalone SAPUI5 applications (without SAP Fiori launchpad).
To use your themes for standalone SAPUI5 applications, you need to configure the individual applications:
Enhance Custom AppRouter xs-app.json file
Map a path to the theming service to be able to use the Theme Designer dashboard and also deliver your custom themes using the runtime service endpoint.
json
"routes": [
{
"source": "^/themes/(.*)$",
"target": "$1",
"service": "com.sap.ui.theming",
"endpoint": "runtime"
}
]Launching the Designer
After mapping the UI Theme Designer to your custom approuter and redeploying it to the SAP BTP, you can launch it by appending
/comsapuitheming.themedesigner/
to your service path and create a custom theme for your application.
Running a Custom Theme via a SAPUI5 Bootstrap Configuration
html
<script id="sap-ui-bootstrap"
src="/resources/sap-ui-core.js"
data-sap-ui-theme="custom_horizon"
data-sap-ui-theme-roots='{"custom_horizon" : "/themes/themeroot/v1/UI5/"}'
data-sap-ui-versionedLibCss="true"
data-sap-ui-resourceroots='{"<appName>": "/"}'>
</script>data-sap-ui-versionedLibCss = "true"
The parameter automatically upgrades your theme for new SAPUI5 versions by adding the following query string to all CSS library requests:
?version=1.96.9&sap-ui-dist-version=1.96.9
The initial requests will trigger the compiler to build the relevant CSS files in the theme runtime (will take some seconds), and follow up requests will deliver a cached version.
Support
| Component Name | Component Description |
|---|---|
| CA-UI2-THD | UI Theme Designer |
| CA-UI5 | SAPUI5 theme issues |
| BC-WD-UR | Unified Rendering theme issues |