Skip to Content

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.

/wp-content/uploads/2014/10/1_570383.jpg

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.

/wp-content/uploads/2014/10/2_570461.jpg

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

/wp-content/uploads/2014/10/3_570462.jpg

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

/wp-content/uploads/2014/10/4_570463.jpg

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

/wp-content/uploads/2014/10/5_570464.jpg

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

/wp-content/uploads/2014/10/6_570465.jpg

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

/wp-content/uploads/2014/10/7_570466.jpg

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:

/wp-content/uploads/2014/10/8_570473.jpg

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

/wp-content/uploads/2014/10/9_570474.jpg

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

/wp-content/uploads/2014/10/10_570479.jpg

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

/wp-content/uploads/2014/10/11_570480.jpg

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

/wp-content/uploads/2014/10/12_570481.jpg

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

/wp-content/uploads/2014/10/14_570485.jpg

Choose the color which instantly also reflects in the preview:

/wp-content/uploads/2014/10/15_570486.jpg

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’.

/wp-content/uploads/2014/10/16_570487.jpg

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

/wp-content/uploads/2014/10/17_570450.jpg

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

/wp-content/uploads/2014/10/18_570494.jpg

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

/wp-content/uploads/2014/10/19_570496.jpg

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.

/wp-content/uploads/2014/10/20_570507.jpg

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

/wp-content/uploads/2014/10/21_570508.jpg

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

/wp-content/uploads/2014/10/22_570512.jpg

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

/wp-content/uploads/2014/10/23_570513.jpg

Finish

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

/wp-content/uploads/2014/10/27_570514.jpg

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

/wp-content/uploads/2014/10/25_570525.jpg

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

/wp-content/uploads/2014/10/28_570526.jpg

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.

/wp-content/uploads/2014/10/26_570527.jpg

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




To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Ajit Kumar Panda

    Hi Kiran,

    nice blog. thanks a lot 😆

    I am facing one prob. After proving the link to application, i am getting error “Preview cannot be accessed”. Can you  help..

    Regards,

    Ajit

    (0) 

Leave a Reply