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.

Login to NWBC and start theme designer, using transaction code: /ui5/theme_designer

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.