As my lecture was selected as "lecture of the week" starting with May 18th, you will find the recording of my lecture and information about the latest version of the UI theme designer in this blog.
UI theme designer lecture from TechEd Las Vegas'14
The UI theme designer is the tool for theming and branding of SAP applications. You can create your custom theme for a wide range of technologies and platforms, such as SAPUI5, SAP Fiori Launchpad, Web Dynpro ABAP, SAP Portal and the SAP NetWeaver Business Client for Desktop.
In this lecture you will learn about the purpose of the UI theme designer, and it's major features. You will get to know the themes, platforms and UI technologies that are supported by the UI theme designer. Of course, you will see a lot of demos and finally this blog will give you some technical insights and an outlook.
On SCN we bundle the information about the UI theme designer here: UI Theme Designer Developer Center
We also monitor the discussion threads in the UI technology community (User Interface Technology). Please make sure to check the "UI theme designer" box in the categories list for your dicussion or blog posts so they can be easily identified as related to UI theme designer.
UI theme designer 1.10 / 1.9
Since last year's TechEd the UI theme designer evolved and lately UI theme designer 1.10 was made available for ABAP and Java, see details here: UI Theme Designer - Version history.
At the same time UI theme designer 1.9 was released for SAP HANA Cloud Platform (HCP) for productive use. However there are some restrictions you need to be aware of. We intend to remove them in future. Please see the documentation for details: UI Theme Designer at SAP HANA Cloud Platform
On-premise version 1.10 and cloud version 1.9 are basically the same in-spite of platform specific differences.
Scenarios for using UI theme designer for SAP HANA Cloud Platform (HCP)
The UI theme designer still has no integrated server persistence on SAP HANA Cloud Platform. You can export a theme and import it later again into the UI theme designer. Themes can be temporarily stored in the browser - The use of Chrome is recommended.
The exported theme can be imported via SAP Fiori - Demo Cloud Edition or SAP WebIDE as an "HTML5 application".
This "HTML5 application" can be selected in SAP Fiori Cloud's theme manager or used by HTML5 applications by including it as a route into it's neo-app.json.
Please be aware of the fact that an exported theme is bound to a specific SAPUI5 version. Therefore, you will need to hardcode the SAPUI5 version for your application (which is only possible for self-created applications) according to the theme's SAPUI5 version. The UI theme designer will be regularly upgraded for newer SAPUI5 versions so you will be able to upgrade your theme as well (via import/export) and update your used SAPUI5 version.
Obviously this is a limitation that is desirable to overcome in future versions.
Both scenarios are explained in the documentation.
You can use a TRIAL account for a test drive:
- SAP HANA Cloud Platform -> Logon / Register -> Accept the terms and conditions
- https://themedesigner-themedesigner.dispatcher.hanatrial.ondemand.com/
New features for Expert Theming
The newest UI theme designer version comes with some handy tools in the Expert tab which make it easier for you to find the right parameters. This is especially helpful when theming Unified Rendering applications.
The first feature is searching for parameters used by CSS classes. You can use the development tools of your browser to find the CSS class which sets the desired property, such as in this example the color for the month text. With the query "css: .<className>" in the filter box all parameters used (and also indirectly used) in rules containing these classes are displayed. By this you can easily find the required parameter.
There is also an excellent blog from my colleague Barbara that explains the naming of "Unified Rendering" parameters: Theming Web Dynpro ABAP and SAP GUI for HTML: Finding the Relevant Parameters
The second new feature is finding out the effects of a parameter on the current screen. For this you can simply click on the parameter name in the Expert tab and it will highlight all usages of the parameter on the screen. If the parameter is not used on the current screen, it will not be highlighted.
Previews
In previous versions it was quite cumbersome to add the same preview pages again and again when you restart the UI theme designer. Now the tool will simply remember the previously selected set of pages, even added URLs.
It is also worth mentioning that the UI theme designer got some new preview pages:
 |  |
SAPUI5 Application Previews
| UR Application Previews
|
Keep an eye (or better watch) our version history blog to stay in the loop: UI Theme Designer - Version history.
Happy Theming,
Uwe
@UweKlinger
Product Owner
PI UI / UI Theme Designer
SAP SE
- SAP Managed Tags:
