Assign CSS file to a specific Web Dynpro component

[bustamantejt]

After having read this and this other document I was able to modify the CSS file (/sap/public/bc/ur/nw5/themes/sap_tradeshow/ur/ur_ie6.css) and therefore change the look and feel of my Web Dynpro ABAP applications without having to use the theme editor.

But that change applies to the whole server and to every application developed in it. Is there a way to assign a CSS file to a specific Web Dynpro component?

[Former Member · Accepted solution]

• Run BSP_UPDATE_MIMEREPOS

• Specify your theme path

• Select Export to Disk

• Process whole structure (theme contains all objects like images and CSS file)

• Execute the program, It will ask path of disk where to store whole structure of the theme

• you have consider two folders for editing CSS locally on disk

1. LS - which is applied if you pass WDLIGHTSPEED = 'X' in WEBDYNPRO application parameter. Internally, IE takes LS CSS for WEBDYNPRO application. E.g. ls_ie6.css
2. UR - which is applied if WDLIGHTSPPED is blank. Internally applicable to Firefox and Chrome Browser. E.g. ur_nn7.css

• CSS File will be look like below code

• You can manually simplify it by editing in word as I have done like below. so it will be good for editing CSS

• In above image, you can see various CSS classes are displayed. You need to identify which class is used for which element.

• To Identify CSS class just run your WEBDYNPRO application once in any browser.

         In IE older version, you can see it by view -> source

• in new version, press F12, Inspect Element is there, you can just select it and place cursor over any element, it will give you information regarding CSS class

• Eg. .urbdystd is one CSS Class which represent background property of WEBDYNPRO Application. You can change background property and save it

• Another file is themeInfo.properties you need to change.

   

• Here you have to change source Template Design and design Name with your theme name.

• You can change background property and Save it.

• After Changing CSS, you can reimport using same program 'BSP_UPDATE_MIMEREPOS' and place CSS in particular location and execute the program. All files will be copied to particular folder which will be your theme name.

• As per my suggestion, you can place it in /SAP/PUBLIC/BC/UR/nw5/(themename)

• If you have development system then you need to specify request while importing CSS and you can easily move all objects by moving request to other system

• Now, you need to specify path to WEBDYNPRO application for rendering CSS, for that you have WDTHEMEROOT parameter in WEBDYNPRO application.

• Maintain following parameters in your WEBDYNPRO Application.

• After maintaining such parameters run your WEBDYPRO application, you can see the change for it.

Here, you have created your own custom theme and apply to specific WEBDYNPRO component. you can give it to other component also or you can create one or more theme for diff. WEBDYNPRO component too.

Thanks & Regards

Kishan Rana

[Former Member · Accepted solution]

Hi Kishan,

Even i have done the same process for changing background theme for web dynpro application.

My requirement is to upload background image for the theme , i achieved it by changing the css file and uploading back to the custom folder and calling folder in application parameter.

But i am facing lot of issues listed below.

1.)In the application F4 help, pop up window and dropdown are not working

2.)Even for standard applications also facing similar situation

I don't know how to resolve this issue?

[Former Member · Accepted solution]

Hi VR V,

Please attach screenshot if possible.

You can check CSS class for respective F4 Help and Drop down in IE-11 by Developer Tool(F12).

Kindly render on UI Controls using Developer Tool and Know which CSS class is applied and make change in custom theme.

* Do not change in standard theme Sap Trade Show. It will be infected in all WEBDYNPRO Component

Thanks & Regards

Kishan Rana

[Former Member · Accepted solution]

Hi Kishan,

Thanks for your reply.

Actually i didn't change anything in the CSS file related to drop down or search help and also how to identify class for dropdown and search help.?

[kroly_horvth]

Hi,

1) Download and extract ur_mimes_nw7.zip stored in the /SAP/PUBLIC/BC/UR folder inside SAP

2) Find the mimes/NW5/themes/sap-corbu (for example) folder inside the extracted ZIP.

3) Copy this folder into a new one, like Z_MYTHEME, this will be your new design

4) Change your styles to your liking, this is possibly the ls/ls_standards.css inside your Z_MYTHEME design.

5) In the mime repository find the /SAP/PUBLIC/BC/UR/NW5 folder and upload this entire Z_MYTHEME as a new folder under this folder

3) In the WD app use this new style, specify the external css parameter: WDTHEMEROOT = /SAP/PUBLIC/BC/UR/NW5/THEMES/Z_MYTHEME

If you have the new HTML element, like HTMLContainer/HTMLIsland, this is much easier.

Hope this helps.

Chopin

[bustamantejt]

How do you upload an entire folder with its contents to the repository (as you suggest in your step 5)?

[kroly_horvth]

Theres is a program called BSP_UPDATE_MIMEREPOS, which can upload/download entire folder structure.

[Former Member]

Per application by using the sap-theme URL parameter.

[bustamantejt]

Thank you. I have tried changing the default theme with the URL parameter like this:

http://<host><port>/sap/bc/webdynpro/sap/<application>?sap-theme=sap_chrome

and apparently nothing happened. I'm still seeing the sap_tradeshow theme no matter which theme I specify in the parameter.

This is the list of the themes currently available in my server under the path /sap/public/bc/ur

Is there something else I have to adjust in order to be able to use this parameter?

[Former Member]

Unified Rendering is used to render WDAs and unless UI Theme Designer is used, themes are contained in ur_mimes_nw7.zip which is extracted and stored in the KPro. The directory in the screenshot isn't used for WDAs. No additional settings are required, there might be theme specific requirements for the browser, however. Try with sap_corbu, that should work. What browser are you using? Always close all browser windows before testing different themes and make sure you use &sap-theme=<theme> if there are any other URL parameters such as sap-client, language, etc.

[bustamantejt]

I have tried with Internet Explorer 9 and Firefox 30.0. I have written the parameter first right after the question mark and now I have also tried after other parameter with ampersand and closed all browser windows after trying again and there still seems to be no difference.

Regardless the theme I specify in the parameter, I'm still seeing the sap_tradeshow theme. If I check the HTML code of the application with the browser's developer tools (F12), it always shows me this CSS file: /sap/public/bc/ur/nw5/themes/sap_tradeshow/ur/ur_ie6.css

Another weird thing is that if I browse that path in the MIME repository, it does not exist (as shown in the screenshot of my previous message).

I have also downloaded and extracted the file /sap/public/bc/ur/ur_mimes_nw7.zip and there is no theme called sap_corbu.

Is it possible that there is something missing in my repository?

[Former Member]

Probably not. As I mentioned the UR themes are extracted and stored in KPro, they are not visible in the MIME repository. The fact that you don't see sap_corbu means that you are on an old AS ABAP release. Try with sap_hcb, you should see the system logon screen in reverse (high contrast) colors. If it isn't working, there is probably something wrong with your system. It would help if you shared the version details of your system including SAP_BASIS version & SP level and kernel version & patch level.

[bustamantejt]

MAIN MODULE INFORMATION:

Composante:      SAP Frontend pour Windows

Version:         720 Final Release

Nom fichier:     sapfront.dll

Version fichier: 7200.3.15.3260

Version:         1390789

Numéro de SP:    15

[Former Member]

The information you have provided is for SAP GUI thus not relevant. Query table CVERS in transaction SE16 and test function module OCS_GET_KERNEL_VERSION in transaction SE37 to retrieve the information I'm asking for. See the attachments for reference.

[bustamantejt]

SAP_BASIS:   Version 700

             SP number 0030

EV_KRELEASE: 720

EV_KLEVEL:   600

[Former Member]

It's most likely a limitation with your NetWeaver 7.0 release, which is very old. I can't check since the NetWeaver 7.0 application help links are not working on help.sap.com. I have no idea how to solve the requirement in your release.

[Former Member]

I don't see sap-theme in the documentation for your release. One workaround could be to use the WD application parameter WDTHEMEROOT to specify the theme. You could have as many Web Dynpro applications in the customer name space as you have different themes. Not an elegant solution but at least it's something. The footprint for Web Dynpro applications is very small since everything is contained in the Web Dynpro component. Another option is to use the sap-cssurl URL parameter to specify the CSS to be used, it is supported in your release.