Theme rendering in NWBC for desktop using theme designer

[Former Member]

Hi,

I'm currently looking into the theme designer with great interest and we have already used it for several presales acitivities. I think it is a great way to personalize the user experience to the individual companies.

However i'm experiencing a problem.

According to this blog https://experience.sap.com/post/show/85 it should be possible to put transparency into powerlists. I have played around with this and found the RGBA CSS code to work beautifully in NWBC for HTML. However the NWBC for desktop renders the powerlist and CSS differently and therefore the powerlist will be completely transparent instead of "semi" transparent.

Can anyone help with this issue.

Message was edited by: Margot Wollny

[Former Member]

I think that NWBC for Desktop support in the UI theme designer is still limited. At least reading the latest UI roadmap (updated 26.9.2013) lists NWBC for Desktop support under "Planned Innovations", see the attached link. Maybe could comment?

http://scn.sap.com/docs/DOC-41321

[claudia_binder]

Hello,

Let me first explain the prerequisites and scope of theming in SAP NetWeaver Business Client.

Backend

UI Add-On 1.0 SPS 04 for SAP NetWeaver7.0/7.01/7.02/7.03 or SAP NetWeaver 7.4 SPS 03
containing Server Runtime for UI Services and SAP NetWeaver Business Client 3.6 for HTML

Client

• NWBC for Desktop
  NWBC for Desktop 4.0 PL7
• NWBC for HTML
  NWBC for HTML 3.6 included in the above mentioned backends

NWBC for Desktop 4.0 supports theming of Index page, New Tab page and service maps and can embed themed applications based on Unified Rendering technology (mainly Web Dynpro ABAP/FPM) and SAP UI5 applications using the shell API.

In its current version, the theming of the shell itself (title bar, header, panels, NWBC dialogs) is not supported - this is subject to come with the next UI Add-On and NW 7.40 support packages.

To activate a theme for consumption in NWBC, configure it in NWBC Customizing using transaction /UI2/CUST).

IMPORTANT: Use server runtime for UI Services /sap/bc/ui2/nwbc). You need to activate the respective ICF service and address it in the NWBC system connection.

NWBC for HTML 3.6 supports theming of service maps and can embed themed applications based on Unified Rendering technology (mainly Web Dynpro ABAP/FPM) and SAP UI5 applications.

Activation of a theme for consumption in NWBC is the same as for the desktop client. Start NWBC for HTML 3.6 using URL /sap/bc/ui2/nwbc.

Jakob,

I assume the only thing that is missing to make your themed POWLs work in NWBC for Desktop is changing the connection URL to the UI2 server runtime. Hopefully I am right!

Best regards,

Claudia

[Former Member]

Hi Claudia,

I'm already using the UI2 server runtime. The index page works fine in NWBC. It is just the rendering of the powerlist that is different when i use NWBC for HTML compared to NWBC for Desktop

The first picture below shows the rendering i NWBC for Desktop PL 10. All NWBC and UR related notes are on the latest SP.

The second picture shows the rendering in NWBC 3.6 for HTML.

As you can see there is a great difference.

[claudia_binder]

Hi Jakob,

So it's only the transparency issue? Which browser do you use for launching NWBC for HTML? Maybe this is a different one than the Internet Explorer which is embedded in NWBC for Desktop - this would explain the rendering differences (older IE versions might not be able to interpret the RGBA CSS code).

Regards,

Claudia

[Former Member]

I'm using IE10 with NWBC for HTML and this processes the RGBA code nicely.

However i read somewhere that NWBC for Desktop only uses the IE 8 rendering engine. Is this correct and if so are there any plans on changing this any time soon?

[claudia_binder]

There are indeed differences in the configuration of the stand-alone IE and the IE control embedded in NWBC.

Can you compare the browser mode in the stand-alone IE with the browser mode in NWBC using

• A test application, e.g. http://www.w3schools.com/js/tryit.asp?filename=try_nav_all
• Your POWL (have a look at the Browser data in the Technical help)

If modes are different, we can try to influence this via NWBC setting EnableBrowserEmulation in the admin NwbcOptions.xml file or maybe with Web Dynpro rendering settings - depends on your findings.

[Former Member]

Hi Claudia,

Ok i finally managed to do some testing. And i finally found something useful thanks to your post.

Internet explorer doesn't support the RGBA command the same way that firefox, chrome and Safari do. So i have to correct myself, i tested using firefox where i got the transparency nice and neat, but in NWBC for Desktop and IE10, the transparency is messed up.

I tried to find some information about the EnableBrowserEmulation, but wasn't very lucky. Is it possible to change the rendering so it uses the Firefox rendiring eninge instead?

[claudia_binder]

Hi Jakob,

I've got an update for you that might help. We detected that for IE10, NWBC did not recognize that an IE10 rendering engine was available. The detection mechanism has been fixed with NWBC 4.0 PL12, which can be downloaded from SMP since Monday this week. Chances are high that this will fix the transparency rendering difference, so perhaps you'll give it a try?

Regards,

Claudia

[Former Member]

Hi Claudia,

I've tried the update and first it didn't work. However in the WD_GLOBAL_SETTING i changed the preferrenderingengine to standard mode and then it is working correcly.

Could you elaborate on the setting, what it actually does?

[claudia_binder]

Hi Jakob,

As stated in the documentation:

Starts the application in W3C standards mode (DOCTYPE HTML), provided the rendering engine supports standards mode.
Note
The STANDARDS value is effective in Internet Explorer 9 and higher Internet Explorer versions, and in Firefox, Safari, and Chrome. Older Internet Explorer versions are rendered always in quirks mode.

Claudia

[Former Member]

Hi Jakob,

Where can I get some documentation on how to use the SAP theming tool, is it easy to work with?

And do I need to have knowledge on CSS. How do I set the default theme in NWBC_CFG?

Thanks for any information.

Raghav

[Former Member]

Hi Raghav,

Have a look at https://help.sap.com/saphelp_uiaddon10/helpdata/en/a1/18094264684230bb6510045b5b5b7c/content.htm?fra...

This is the help.sap.com link to the theme designer. Depending on how much you want to change the themes some CSS skills are necessary. However i don't have a lot either, so i think you will be fine.

My personal opinion about the theme designer is that is not very mature yet. It's quite hard to know which parameters to change unless you are well wandered in the SAP naming conventions of their UR elements.

To use the new theme, you have to use the UI2 for NWBC. Have a look at this link to see how you enable the theme

https://help.sap.com/saphelp_uiaddon10/helpdata/en/81/c4a52594b24f9b8ce3b6b00777c3bc/content.htm

[Former Member]

Hi Jakob,

I copied the corbu and made some modifications and saved as a zcopy. but when I apply this using URL parameters it shows default theme only. I have published the theme in the designer, but why is it not reflecting?

any ideas,

thanks,

[Former Member]

I have the same problem.How did you solve your problem?

[Former Member]

Hi A B and Raghavendra,

You need to put in the new theme in the NWBC_CFG table. Look at  4.6 Configuration via Table NWBC_CFG - SAP NetWeaver Business Client - SAP Library for instructions.

Afterwards start NWBC using transaction /n/ui2/NWBC

Then it should work.

[claudia_binder]

Small correction to what Jakob wrote:

To make use of custom themes at NWBC runtime, you need to

• Address the server runtime for SAP NetWeaver user interface services (activate ICF service sap/bc/ui2/nwbc and use connection url http(s)://<server>:<port>/sap/bc/ui2/nwbc or alias)
• Configure the theme in the customizing for the new runtime (this is different from customizing for the classic NWBC runtime in table NWBC_CFG), see documentation Definition of Configuration Parameters in Customizing; parameter name THEME

Regards, Claudia