UI Theme Designer for Web Dynpro ABAP

[former_member184578]

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.

Reference:

UI Theme Designer - User Interface Add-On for SAP NetWeaver - SAP Library