Customizing the Portal Log-On Pages

[Former Member]

Hi, my name is Yotam and I am one of the client-side developers who wrote the new mobile framework page.

In this post, you will learn how to customize your SAP NetWeaver Portal
log-on pages, specifically the ones used for mobile devices like tablets and smartphones, which were introduced in 7.30 SP8.

Before We Start

Before you go through this document, make sure that your portal version is at least 7.30 SP8.

Another thing you need to do is to locate the JSP and CSS files for the
log-on pages, in order to customize them.
They should be located under the following path:

<installation directory>/j2ee/cluster/apps/sap.com/
com.sap.security.core.logon/servlet_jsp/logon_ui_resources/

Device Type Conditioning

In SP8, we introduced the mobile log-on pages. These new log-on pages were created especially for mobile devices, providing a new and more contemporary UI.

The mobile log-on pages include a set of new JSP files, with minor differences from the original JSPs and a few CSS improvements, which make them look great on smartphones and tablets.

Before you go on and check out the code, if you are not sure you remember everything you need to know about device types and device groups, here is some useful info: http://help.sap.com/saphelp_nw73/helpdata/en/10/e3c923864d48e8bc16aef4ad7ce6c7/frameset.htm

Let’s see how the device type conditioning is implemented in the regular log-on page – logonPage.jsp, which is located under the “root” folder.

In this partial code snippet we see how the log-on page takes into account the portal DeviceGroup and DeviceType which were configured in the “Device Group Manager”. If one of the above attributes of the request is not null, the otherDeviceEnabled parameter will be set to true and the mobile log-on page will be loaded.

Now let’s have a look at the logonPageMobile.jsp under the “mobile” folder, and understand how it will differ between the tablet and smartphone log-on page:

Here we can see that in case of a smartphone or a tablet device, we will load the mobile.css file, which contains the common styling properties and values for these devices. And for each of the above, another CSS file will be loaded, which will provide specific styling for relevant platforms.

If you wish to define another customized device type, you will first need to define one in the “Device Group Manager” and afterwards, refer it in the relevant log-on pages JSPs.

Here is a basic chart which describes the log-on pages load flow:

It important to remember that the log-on pages were written once for the tablet and smartphone, but the usage of different styling values makes them look great on both platforms.

Customizing Your Log-On Pages

Now we will see an example of styling changes you can easily make on your mobile log-on pages in less than 15 minutes, which will help you customize the portal log-on pages to fit your design and color palette.

Let’s first define the customization we wish to achieve – a good example would be to modify the following elements (for all mobile devices):

1. The color of the top strip

2. The header text

3. The header color

4. The logo

5. The background color

In order to do so, we should open the following files:

1. mobile.css – which is located under the “root/css/mobile” folder
2. logonPageMobile.jsp – which is located under the “root/mobile” folder

In these files we will make the following changes:

1. In order to change the color of the top orange strip, open the mobile.css, locate the id selector: “#mobileHeaderStrip” and change its
   background-color property, for example we will choose the color #007AB6.
2. Changing the header text will be simply done by editing the “logonPageMobile.jsp,
   locating the data-role=”header” and modifying the text inside the h1 element in it.
3. In order to change the header color, open the mobile.css, and modify the id selector “#mobileHeaderTitle” color property value, for example to #007AB6.
4. In order to change the logo, open the logonPageMobile.jsp, and under the data-role="footer" part we should modify the SRC of the IMG element to the URL path of your company logo URL.
5. In order to change the background color, open the mobile.css, and modify the class selector “.prtlbody” background-color property value,
   for example to gray “#C0C0C0”.

Now in order to see the changes that we have made, we need to restart the log-on pages service. Here is how we do this:

1. Go the “work” folder which is located next to the “root” folder, and delete all of the *.java and *.class files in it.
2. Go to NetWeaver Administrator --> “Start & Stop” --> ”Java Applications” --> find the application named “com.sap.security.core.logon” and restart it.

And now we are done! Here is the result we got from changing the colors, text, and logo:

BEFORE:

AFTER: