Prerequisites

In order to use the SAP Ui Theme Designer, you need a SAP Business Technology Platform subaccount or a SAP BTP Platform Trial Account (SAP BTP Free Trial).

Note: Using the Theme-Designer with a trial account severely restricts its preview functionalities and hence customizing your application is significantly limited. We recommend using this guide to alter the design of your application by editing CSS classes directly.

It is mandatory and of utmost importance to use the appropriate UI5 version for your theme that matches the one being used for the deployment of your application. 

Choose a Subaccount

In the SAP Cloud Platform Cockpit select a subaccount to work with:

Subscribe to Cloud Identity Services

Click on the Instances and Subscriptions in the side menu. Click on the Create Button in the top right corner and search for Cloud Identity Services in the input field for Service and select default (Subscriptions) for the Plan input field. Then press Create.

Establish trust for newly created Identity Provider service

Click on Trust Configuration in the side menu. Click on the Establish Trust button in the top left corner and select the single entry that should be displayed in the table. The table row should contain a ‘Default Domain’ in the following format: xyz.trial-accounts.ondemand.com. Press Next until you’ve completed all the steps from the wizard and the popup closes. You don’t need to change any further values in the succeeding steps after ‘1 – Choose Tenant’.

Add user to the Identity Provider

Click on Users in the side menu. Click on the Create button in the top right corner, then enter your desired user name as well as your E-mail address. Make sure to select the ‘Identity Provider’ that again follows the same domain format as described in the previous step (i.e. not the ‘Default identity provider’). As soon as you press on Create, a mail should be sent to your inbox containing an activation link.

Activate your user and set password

The mail you received should look similar to the one shown below. Click on the button saying ‘Click here to activate your account’. This will lead you to a form that requires you to set the password you want to use for the sign-in to the Theme Designer later on.

Subscribe to SAP Build Work zone, Standard Edition

Click on the Instances and Subscriptions in the side menu. Click on the create Button in the top right corner and search for SAP Build Work zone, standard Edition in the input field for Service and select standard (subscription) for the Plan input field.

Assign Launchpad Admin Role

Select Role Collections on the side menu and click on Launchpad_Admin to open the role page and click on the edit button to add a new admin. Remember to select the correct ‘Identity provider’ when adding a new user (i.e. not the ‘Default identity provider’).

Note: If you plan to add custom styling rules using CSS, assign the role Launchpad_Advanced_Theming to your account in the same manner.

Start SAP Build Work Zone

Navigate back to Instances and Subscriptions and click on SAP Build Work Zone, standard Edition. Then click on Go to Application.

Create Website

In order to use the Theme Designer, we need to create a website and open it.

Open the website:

Open Theme Designer

Open the website menu by clicking the account icon and select Theme Manager and click on Launch Theme Designer.

Selecting Control Previews

Click on SAPUI5- Control Preview and select all control elements you need.

Exporting a theme

When you are satisfied with your new theme, click on Theme in the top left corner and select export.

In the Export window, expand the optional settings and select Source Code + CSS Resources + Base Theme and deselect Unified Rendering.

Importing a theme 

To import a theme, click on Theme in the top left corner and select import.

In the import windows, upload the theme .zip file.

FAQ

Where can I change the SAPUI5 Version number?

On the themes overview page click on the version number in the top right corner and select your desired version number.

How do I find the SAPUI5 Version number for my theme?

In your exported .zip file there is a JSON file called exportThemeInfo.JSON. Open this file with a text editor of your choice to see which SAPUI5 Version was used.

How do I find out which base theme my theme is based on?

In your exported .zip file there is a JSON file called exportThemeInfo.JSON. Open this file with a text editor of your choice and search (strg+f) for “extends”, to see which base theme your customized theme extends.