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

/wp-content/uploads/2014/05/001_460261.jpg

/wp-content/uploads/2014/05/002_460295.jpg

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.

/wp-content/uploads/2014/05/003_460298.jpg

/wp-content/uploads/2014/05/004_460299.jpg

/wp-content/uploads/2014/05/005_460300.jpg

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

/wp-content/uploads/2014/05/006_460301.jpg

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

/wp-content/uploads/2014/05/007_460302.jpg

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

/wp-content/uploads/2014/05/008_460304.jpg

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.

/wp-content/uploads/2014/05/009_460305.jpg

The following page will get displayed.

/wp-content/uploads/2014/05/010_460306.jpg

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.

/wp-content/uploads/2014/05/011_460310.jpg

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

/wp-content/uploads/2014/05/012_460311.jpg

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.

/wp-content/uploads/2014/05/014_460312.jpg

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.

/wp-content/uploads/2014/05/016_460313.jpg

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.

/wp-content/uploads/2014/05/017_460314.jpg

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.

/wp-content/uploads/2014/05/018_460315.jpg

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.

/wp-content/uploads/2014/05/019_460316.jpg

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.

/wp-content/uploads/2014/05/020_460317.jpg

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.

/wp-content/uploads/2014/05/021_460318.jpg

Now enter transaction /ui2/cust.

/wp-content/uploads/2014/05/022_460319.jpg

The following screen will be opened.

/wp-content/uploads/2014/05/023_460320.jpg

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

/wp-content/uploads/2014/05/024_460321.jpg

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

/wp-content/uploads/2014/05/025_460322.jpg

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’

/wp-content/uploads/2014/05/026_460323.jpg

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.

026-A.jpg

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.

/wp-content/uploads/2014/05/027_460327.jpg

/wp-content/uploads/2014/05/028_460328.jpg

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

To report this post you need to login first.

6 Comments

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

  1. Simon Kemp

    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

    (0) 
    1. Imthiyaz Shaik Post author

      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.

      (0) 
  2. Nareshredy Eluvala

    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 . UI2_CUST.png

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

    HTML.png

    NWBC also am unable to  access the custom Theme

    NWBC.png

    Please help me on the same.

    Thanks in advance.

    Regards,

    Naresh

    (0) 
  3. Guillaume GARCIA

    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

    (0) 

Leave a Reply