UI Theme Designer for Web Dynpro ABAP

https://blogs.sap.com/2014/10/24/ui-theme-designer-forweb-dynpro-abap/
Introduction
This document helps how to create custom themes for Web Dynpro ABAP
applications using UI Theme Designer.
UI Theme Designer is browser based, which allows us to create custom themes
using SAP standard themes as base themes and also we can edit the custom
themes.
Prerequisites
Prior to Netweaver 7.4, you need to install UI Add-on for Netweaver 1.0 SP04 or
higher.
With SAP Netweaver 7.4 SP04, UI theme designer is a part of Netweaver.

Step by Step Process

For Demo I will just take a simple Web Dynpro Application and show how to add
background image for the application.

For the above simple application, we will see how to create custom theme using UI
Theme designer.

Start
To Lauch UI Theme Designer, execute the Transaction /UI5/THEME_DESIGNER
Or, you can open the following link in the
browser: https://<server>:<port>/sap/bc/theming/theme-designer?sap-

client=<client>
Before launching the Theme Designer, you need to activate few ICF Nodes. Execute SICF
transaction, and Activate the below ICF Nodes( if not activated already)
Navigate to : default_host -> SAP -> BC -> ui5_ui5 -> SAP , and Activate the below Nodes:

ARSRVC_SUITE_PB

ARSRVC_SPB_ADMN

ARSRVC_LPD_C

Navigate to : default_host -> SAP -> Public -> BC -> , and Activate the Nodes:

ui2

ui5_ui5

Even if you forget to activate the above services, the system will prompt when launching the UI
Theme Designer and you can choose Yes and the system will activate the required services.

Run
Now, Execute the transaction /UI5/THEME_DESIGNER.
The Theme Designer will open in browser, and you can see the available standard themes and
custom themes.

Select the theme, which you want to use as a base theme to modify and click on Open.

It will navigate to the Modify Theme page,where you need to enter the Target Content.

Copy the url of your Web Dynpro application, and enter it in the Target Content section
application link.

Enter the url in the application link, enter description and click on Add.

The Theme Designer will open the application in Preview, where you can modify the Theme
using Quick and Expert modes and preview it instantly.

Here, I will add a background image to my theme in the Quick mode. click on the button next to
Background Image as shown below:

In the popup tile, select the Add icon or Drop the image from your local machine:

Once you add the image, it will preview the thumb, select the image and click on Ok.

As said, you can instantly preview the changes to the theme:

The Theme Designer also provides Expert mode where you can change the font, text color,
borders, width, styles etc.. with ease.

Suppose, if you want to change the Text color, select the icon button next to sapTextColor and
choose the color:

Choose the color which instantly also reflects in the preview:

All the modified parameters will appear as bold and you can revert back the changes by clicking
on the settings icon next to the Theme Parameter and choose Reset to Original.

It also has Filters option, where you can filter the Theme Parameters based on colors, images,
fonts etc.,

Or, you can also input the Filter value and press Enter to get the Theme Parameters based on
the Filter:

The Theme Designer also allows you to add your own css styles in the CSS tab.

At any point of time, if you want to make sure whether you are beautifying the application or
making it ugly further.., you can switch between Preview and Original.

Once you are done with your custom theme, click on Theme Menu and select Save & Build.

Enter your Custom theme ID, Name and click on Publish.

Your custom theme is now Published and is ready to use.

Finish
Now, you can test your Web Dynpro application with your custom theme, by adding the url
parameter sap-theme=<your_theme>

OR, In the parameters tab of your application, add the application parameter WDTHEMEROOT
with value your custom theme (myTheme) and Test the Application.

Now, you can see your Web Dynpro Application with your custom theme(which has background
image).

You can also use your custom theme for the other applications as well. Let say, I open a
standard Web Dynpro Application(Flight List) and use the custom theme.

Conclusion
Using UI Theme Designer you can create/modify custom themes with ease without any effort. You can also use
UI Theme Designer or create a consistent custom theme for Web Dynpro ABAP & Floor Plan Applications,
SAPUI5 Applications, Netweaver Business Client and Netweaver Portal applications.