Migrate portal theme to WD4A theme

It appears that everyone is moving towards delivering SAP user interface through multiple channels (Business client, share point portal, mobile etc), i wanted to check the possibility of making the look and feel of my webdynpro abap screens the same as my SAP Portal without using SAP Portal’s theme framework. Please note that we use customised portal theme.

After spending some time, I found that it is possible to do it without having to copy attributes of each element in the portal theme to WD4A theme editor one by one. The following steps saved me lot of time and issues that might arise from manually copying the colour, size, font and other properties one by one from portal theme editor to the standalone theme editor.

4. Navigate to the folder “project\data\<name of the custom theme created in step 2>”

5. There will be file called “theme” which has all the properties of the selected theme. This is a XML file. We need to change values of XML tags (colors, padding, size) to value used in your customised portal theme.

7. Export your existing sap portal theme and extract the file in to the file system

8. You can find a file named “ur.zip”. Extract the “ur.zip” file.

9. Navigate to the “ur” folder using windows explorer and you will find a file called “default.properties”. This file has all the properties required for your new WD4A theme.

10. Now copy the values from “default.properties” to “theme” xml file. You just need some excel knowledge to transfer the values from default.properties to “theme” file as both could be opened in excel (one with “=” separated file another as XML file and a simple macro could be used to transfer values)

11. Now reload your theme project in eclipse and regenerate

12. After regenerating, use the ‘Export to webdynpro’ option to create a zip file with your theme.

13. You can import the theme in to your sap system using “wd_themes” report

14. Now your new theme is ready for use. There are many ways to make your webdynpro use this particular theme but i used the url parameter wdthemeroot=<theme_name>. so your url will look like http://host:port/sap/bc/webdynpro/sap/<webdynproname>?sap-client=<>&wdthemeroot=<theme_name>