Using the UI Theme Designer

Objectives

After completing this lesson, you will be able to:

  • Use the UI Theme Designer

Adaption of Themes

UI Theme Designer is a browser-based editor.

Watch this video to learn more about UI Theme Designer.

The UI Theme Designer supports all web-based SAP applications and clients based on HTML4 and HTML5.

The UI Theme Designer is available in three channels:

SAP NetWeaver Application Server ABAP
Transaction /UI5/THEME_DESIGNER
SAP Enterprise Portal
Content Administration → Portal Display → Portal Themes → UI Theme Designer
SAP Business Technology Platform
SAP Fiori launchpad → User Actions Menu → Theme Manager → Launch Theme Designer

Prerequisites, installation, and configuration are available in the SAP Note1852401 – UI Theme Designer for SAP NetWeaver AS ABAP (main SAP Note).

Hint
When creating themes for the Unified Rendering, it is recommended to always use the latest version. Please check SAP Note 2090746 – WD ABAP: Unified Rendering Update with TCI - Instructions and Related SAP Notes. for details.

To design a theme, refer to the following procedure.

All themes have a base theme (CSS files). For SAP Fiori 3, this is SAP Quartz Light. After choosing a template application to visualize the changes, the new theme is built upon a set of theme-related (specific style) CSS files. The theme generator merges the base theme with the specific style into the final theme.

SAPUI5 uses LESS to handle the CSS parameters and allows some additional features. LESS can be considered a preprocessor that results in the final version of the CSS. Find out more at http://lesscss.org/.

The available base themes depend on the release of the system providing the UI theme designer.

SAP delivers the following themes for SAPUI5:

SAP Quartz Dark
  • Theme released for SAP Fiori 3
  • Initial shipment in SAP S/4HANA Cloud 2002 / SAPUI5 1.72
  • Uses own typeface "72"
SAP Quartz Light
  • Theme released for SAP Fiori 3
  • Initial shipment in SAP Cloud Platform 1904 / SAPUI5 1.65
  • Uses own typeface "72"
SAP Belize (Deep)
  • Theme released for SAP Fiori 2.0
  • Initial shipment in software component SAP_UI 7.51 / SAPUI5 1.44
  • Uses typefaces Arial Regular and Bold
SAP Blue Crystal
  • Theme released for SAP Fiori
  • Initial shipment in software component SAP_UI 7.40 / SAPUI5 1.28
  • Uses typefaces Arial Regular and Bold
SAP High Contrast Black / White
  • Theme released for accessibility purpose
  • Initial shipment in software component SAP_UI 7.40 / SAPUI5 1.28
  • Reworked in software component SAP_UI 7.51 for SAP Fiori 2.0
SAP Gold Reflection
  • Theme released for non-Fiori standalone apps
  • Initial shipment in SAPUI5 1.0
  • Not working with SAP Fiori
  • Deprecated

Maintenance of Themes

The Theme Tool manages the themes in the theme repository of an Application Server (AS) ABAP. Themes can be viewed, imported, exported, and deleted, as well as transported to the follow-up system. This is also the easiest way to get a URI pointing to a certain theme. Start the tool using the following transaction: /UI5/THEME_TOOL.

By adding the URI parameter sap-theme=<theme-id>@<theme-root>, which points to the theme repository, to the application URI, the theme is used as the design for the application. This is available to all clients but stays visible in the URI.

The SAP Enterprise Portal and the Application Server (AS) ABAP can also set central parameters for their applications to use a theme of the theme repository. No URI parameter is used and so no theme reference is visible.

Watch the video to see how to set central theme parameters for the SAP Fiori launchpad.

Create SAP Fiori Themes

Business Example

You want to create and test a theme for SAP Fiori launchpad using the UI Theme Designer.

Note
This exercise requires an SAP Learning system. Login information are provided by your system setup guide.
Note
Whenever the values or object names in this exercise include ##, replace ## with the number of your user.
ExerciseStart Exercise

Steps

  1. Create a theme based on the SAP Quartz Light theme for the SAP Fiori launchpad of your SAP S/4HANA (S4H) server using the UI Theme Designer.

    1. In the SAP Easy Access menu of your S4H, search for UI Theme Designer or start transaction /UI5/THEME_DESIGNER.

    2. In the UI Theme Designer, choose Create a New Theme.

    3. In the Base Theme menu, choose SAP Quartz Light.

    4. Choose Create Theme.

    5. In the Link to Application field, enter /sap/bc/ui2/flp.

    6. In the Name of Application field, enter SAP Fiori Launchpad.

    7. Choose Add.

  2. Define a color palette parameter called CornPoppyRed in your theme with the hexadecimal value E00025.

    1. Choose Palette on the outer-right side.

    2. In the New parameter name field, enter CornPoppyRed.

    3. For the New parameter color field, open the value help.

    4. In the Hex field, enter e00025.

    5. Choose OK.

    6. Choose Add palette parameter or the + next to the value help.

  3. Change the main Brand Color in your theme to CornPoppyRed.

    1. Choose Quick on the outer-right side.

    2. For the Brand Color field in the Main group, open the value help.

    3. In the Palette pane, choose CornPoppyRed.

    4. Note the change of the Highlight Color.

  4. Set the FioriMeadow.jpg image from the course folder on the training share as Background Image/Gradient of the Shell Canvas for your theme.

    Note
    Course folders on the training share can be found at S:\Courses.

    1. Choose Detailed on the outer-right side.

    2. For the Background Image/Gradient field in the Shell Canvas group, open the value help.

    3. Choose Drop image files here or press to browse.

    4. Select S:\Courses\UX100_23\FioriMeadow.jpg.

    5. Choose Open.

    6. Choose OK.

  5. Change the sapShellColor in your theme to CornPoppyRed.

    1. Choose Expert on the outer-right side.

    2. Select the filter Colors.

    3. In the Search field, enter shellc and choose Enter.

    4. For the sapShellColor field, open the value help.

    5. In the Palette pane, choose CornPoppyRed.

    6. Note the change of many other colors.

  6. Save and build your theme as CornPoppy## with the description Corn Poppy Meadow ##. Run a preview of your theme in the UI Theme Designer.

    1. In the menu, choose Theme → Save As….

    2. In the Theme ID field, enter CornPoppy##.

    3. In the Title field, enter Corn Poppy Meadow ##.

    4. Choose Save.

    5. In the menu, choose Theme → Save & Build.

    6. Choose Preview Built Theme or the triangle above the preview.

Configuration Parameters for SAP Fiori Themes

These customizing parameters can be used to configure the themes in the SAP Fiori launchpad:

THEMING_DEFAULT_THEME

Specify the default theme for the users.

sap_fiori_3 (default)

THEMING_HIDE_SAP_THEMES

Specify whether the SAP themes are removed from the Settings.

true/false (default)

USERSETTINGS_SET_THEME

Specify whether users can select a different theme in the Settings.

true (default)/false

Log in to track your progress & complete quizzes