Skip to Content
Author's profile photo Troy Cronin

EP: Theming – Creating A Theme (UI Theme Designer) – Part 4

In this fourth blog posting on the topic of themes and their management and creation we are going to cover the creation of a theme via the UI Theme Designer. Previously in my third part we discussed the other mechanism and older approach through utilization of the Theme Editor which if you missed it can be reviewed in my central blog series below:

EP: Theming – Creating A Theme (Theme Editor) – Part 3–creating-a-theme-theme-editor–part-3

The UI Theme Desinger – New

In terms of theming the UI Theme Designer is the newly released and newly available platform for both editing and generation. In terms of functional enhancements with the UI Theme Designer they key terms here are:

  • CSS
  • LESS
  • SAP UI5
  • SAP NW Portal
  • Usability
  • Flexibility


Flexibility – Browser Based

The UI Theme Designer is the complete package in terms of being singular tool for theming and branding across many of SAP UI’s

The UI Theme Desinger – Using It

As we highlighted previously to use this tool it firstly needs to be activated via the NWA.

Transport Theme

Before we go ahead and start creating some themes you should export current themes (via Theme Editor) save them locally and then subsequently turn on the UI Theme Designer.

Import Themes (From Older Theme Editor)

  1. Login to the Portal
  2. Navigate to > System Adminsitration > Transport > Transport Themes
  3. Specify the path to your theme of interest (.e.g my theme) remmeber these should be in the theme core folder or one of the sub folders.
  4. Copy the path and compressed file.
  5. Import


  • You should now have the file ready to use within the UI Theme Designer

Select, Preview & Customize

When you customize supported portal themes using the UI Theme Designer, you can preview changes you make to framework pages.

  1. Launch the UI Theme Designer > Content Administration > Portal Display > Portal Themes > UI Theme Designer
  2. Locate the them of interest and select > Edit
  3. Open the Preview Controls
  4. Select one of the supported Frameworks

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Thank you for contributing. You may want to check the links in your blogs, here and in your personal blog, to keep it consistent (linking from public blogs to public ones and from your personal blog to the personal blog).

      Author's profile photo Troy Cronin
      Troy Cronin
      Blog Post Author

      Hey Samuli

      I hope you are keeping well and many thanks for the feedback, greatly appreciated 🙂 .

      I'll make sure they follow a consistent road-map and remain easy to find and follow.

      Thanks again


      Troy 😎