NWBC and Theme Designer – How to create and assign custom theme to NWBC

Introduction: In this BOK, I will discuss how to create and assign a simple custom theme to NWBC. The custom theme will have a background image. Once the theme is assigned to NWBC, we will see how it looks both from NWBC Desktop and NWBC HTML.

System information:

1) SAP NW 7.4

2) NWBC Desktop 4.0 PL12

3) NWBC HTML 3.6

4) Google Chrome Browser

Steps to create and assign a custom theme to NWBC:

1 ) Activate the theme designer related nodes through SICF.

2) 2) Authorization – get access to create themes.

3) 3) Install Google Chrome browser for theme designer.

4) 4) Launch theme designer and select a SAP base theme to be used for creating custom theme.

5) 5) Design custom theme to NWBC

6) 6) Assign custom theme to NWBC

7) 7) Preview of NWBC with custom theme.

Step 1: Activate the theme designer related nodes through SICF.

Activate the following Internet Communication Framework (ICF) service nodes:

/sap/public/bc/themes

/sap/bc/theming

Step 2: Authorization – get access to create themes.

We should have access to read, write the themes. The authorization object is /UI5/THEME.

I have SAP ALL authorization in my system. Transaction SUIM is used to check for the access. Following are the screen shots for the same.

Step 3: Install Google chrome browser for theme designer.

Theme designer is a browser based tool and SAP recommends to use Google’s Chrome browser. We have used chrome browser.

Step 4: Launch theme designer and select a SAP base theme to be used for creating custom theme.

Theme designer will be opened in a browser, with a user id, password page.

Enter your usual NWBC user id and password. After login, the home page of theme designer will look like this.

For a custom theme for NWBC, SAP recommends to base it on the standard ‘SAP Gold Reflection’ theme. So we will use it as a starting point and enhance it further to create our custom theme.

We select ‘SAP Gold Reflection’ and click on the ‘Edit’ button.

The following page will get displayed.

Now we need to select the target application for the custom theme. Since we are developing a custom theme for NWBC, we need to click on ‘NWBC Application Previews’ under ‘Target Pages’ on the left side of the screen.

Now click on ‘Select All/None’ check box.

Now double click on ‘index page’.

Index page will be displayed at the centre of the screen, with theme options on the right side of the screen.

For our custom theme, we will just add a background image.

Now click on the button for background image. A pop up window will be opened, using which we can select a picture as a background image.

Now click on the plus sign ‘+’ above ‘Drop image files here from your desktop’ text.

A window will be opened. Now go to the folder where you have your images and select an image file.

Select the image from the list. I have selected the ‘raptor3’ image file.

Now the image will be displayed as background image of index page and the image file will be added in the ‘Assign image’ window. Now click on the image and select ok.

Now click on the Theme option from menu bar and save + publish the theme.

Enter a name and theme id, for your custom theme.

Take a note of the theme id field. We will use it, while assigning the theme to NWBC.

The theme id in this case is: ‘Copyofsap_goldreflection3’

Now click on the publish button.

Once the theme is successfully published, we will get a pop up message confirming the same.

Now close the theme designer.

Till now we have created a custom theme. We will now assign the custom theme to NWBC.

Important note: While giving login path for NWBC, we need to take the path of /sap/bc/ui2/nwbc node. Generally for NWBC, we refer to a non ui2 path, like: /sap/bc/nwbc ; but for theme designer, we have to refer to the ui2 path of NWBC.

Now we have logged into NWBC, using the ui2 path. Following is the login page.

Now enter transaction /ui2/cust.

The following screen will be opened.

Click on ‘SAP NetWeaver Business Client’ and select ‘Assign Parameter Values’ option.

A new screen will be opened, where we can enter parameter name and its values.

Now enter ‘*’ for Filter and ‘THEME’ for Parameter Name field.

In the value field, enter the theme id that we noted earlier. i.e. ‘Copyofsap_goldreflection3’

Now save your changes and then logoff from NWBC.

We re-login into NWBC, to check whether custom theme has been assigned successfully or not. The theme can be seen both from NWBC HTML and NWBC Desktop versions.

Logged into NWBC HTML and the theme is assigned successfully. Following is the screen shot for the same.

Logged into NWBC Desktop and the theme is assigned successfully. Following are the screen shots from index page and new tab page of NWBC Desktop.

Hence, in this blog we have seen how to create a custom theme and assign it to NWBC.

6 Comments

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

Simon Kemp June 1, 2014 at 9:00 am
Thanks for creating and sharing this step by step guide with the community. I am sure many people will find it useful.

Some points I’d like to comment on…

Did you play around a bit with the size and resolution of the background image? I am wondering if there is a best practice guide for creating/choosing the image.

When you use the UI2 path in the URL you are actually running a different NWBC runtime in the system – I have noticed some differences, it is worth noting that it is not just related to themes, there are a whole different set of runtime classes /ui2/… for the UI2 runtime

I notice that you didn’t change the SAP logo, what I found when doing this was that whatever I did in the theme designer didn’t matter, I had to set the logo in the configuration table. However I believe this might be rectified with PL 13 of the NWBC desktop client.

Again thanks for sharing!

Simon
like (0)
1. Imthiyaz Shaik Post authorJune 3, 2014 at 10:14 am
  
  hi Simon,
  
  Yes, I tried multiple image files as background. I also did not come across any guide for choosing image files.
  
  While testing with background images, few were displaying fine, as single background image. other image files were not getting displayed properly; like image was getting tiled; i mean same image file was getting displayed as small blocks through out the screen.
  
  Thank you,
  
  Imthiyaz Shaik.
  
  like (0)
  1. Juan Gonzalez September 12, 2014 at 8:37 pm
    
    Hi
    
    Please can help me with this doubts
    
    Change Look & Feel using NWBC HTML
    
    Regards
    
    like (0)
A B June 3, 2014 at 9:58 am

This works for NWBC for HTML too?

Thanks for sharing!

like (0)
Nareshredy Eluvala September 20, 2014 at 10:57 am

Hello Imthiyaz,

I followed the same steps which you provided.I am specifying same below as well as.If I did anything wrong correct me.

Our Environment: ECC EHP7 , NWBC4.0 PL14 & IE 11

1) Both Service in Active Mode

/sap/public/bc/themes

/sap/bc/theming

While doing test service am facing 403 Forbidden.

2) Enter into Designer I did custom Theme as shown & Publish as well as.

3)/UI2/CUST I assigned Parameter values Below find below screen .

4)I am using SAP/BC/UI2/NWBC Path only While access HTML I am unable access Custom Them

NWBC also am unable to access the custom Theme

Please help me on the same.

Thanks in advance.

Regards,

Naresh

like (0)
Guillaume GARCIA September 23, 2015 at 9:09 am

Hi,

Just messing around with the UI Theme Designer…

Would it be possible to add ad background video on the index page?

I guess this is complicated due to the fact that, AFAIK, this requires a bit of HTML markup to add the video (there is no CSS only solution).

Hence, my second question, is this possible to modify the rendering of the index page using ABAP enhancements?

Thanks in advance.

Best regards,

Guillaume

like (0)