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

http://scn.sap.com/people/troy.cronin2/blog/2016/02/03/ep-theming–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 AS ABAP
• 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

Ready?

• 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