Skip to Content

Customizing the Portal Log-On Pages

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.

/wp-content/uploads/2012/12/11_163298.png

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.

/wp-content/uploads/2012/12/2_163299.png

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:

/wp-content/uploads/2012/12/3_163300.png

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:

/wp-content/uploads/2012/12/4_163307.png

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:

/wp-content/uploads/2012/12/55_163308.png


AFTER:

/wp-content/uploads/2012/12/66_163309.png


10 Comments
You must be Logged on to comment or reply to a post.
  • Hi Yotam,

    Great blog, thanks for sharing!

    One question though: which stylesheet is loaded when device group is specified but device type is empty?

    kind regards,

    Ted

    • Hi Ted,

      First of all, the current implementation of the log-in pages is based on device types (Smartphones will get an adapted log-in page, and tablet will get a different one).

      A device group will always be based on a device type, and therefore the log in page will know what type of devices accessing the page.

      The device type is a close set of types (desktop, smartphone, and tablet), and therefore a device group will be based on one of the above.

      But if I understand your question, if in the logonPageMobile.jsp my “deviceType” doesn’t fit any of the slots defined (smartphone or tablet) then in one of the next lines, the “otherUiLoaded” parameter will be set to “true” and then the regular (logonPage.jsp) will be loaded.

      Regards,

      Yotam.

  • Hi Yotam,
    i am just editing the Logon war in the Developer Studio like here described:

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

    Now you need an addtional JAR reference for the mobile JSPs so no errors appear.
    Can you let us know which JAR additionally to tc~sec~ume~logon~logic_api.jar

    is required in SP8 ?

    Is there a way to set the DOCTYPE ? There is a SAP OSS message for all Logonpages except Portal Logon : https://service.sap.com/sap/support/notes/1697320

    Regards,

    Kai

  • Hello Yotam

    Thank you for sharing.

    I have customized the colors for the mobile logon page following for blog.

    I have been unable to get the header text changed.

    I have found the jsp files, logonPageMobile.jsp and certLogonPageMobile.jsp located /j2ee/cluster/apps/sap.com/com.sap.security.core.logon/servlet_jsp/logon_ui_resources/root/mobile

    I delete the work area file *.java and *.class and restart the service. The work files get re-created and have my headertext change,s but never appear on the mobile logon page.

    Any help would be appreciated

    Thank you,

    Sarah

    • Dear Sarah,

      I will try to help you:

      1) In order to have a better understanding of the issue and to have the opportunity to investigate it specifically on your system, I would like to ask you to open a Customer Incident and set it on the component EP-PIN-NAV-MFP, we will do our best to help you solve it.

      2) Recently we have released a new (and more recommended) way to consume EP content on Mobile. It is actually a new Portal Framework Page that can run cross devices. It’s called SAP Fiori Launchpad on Portal (FLP on EP). It gives you the SAP Fiori Launchpad experience within the SAP Enterprise Portal environment.You can get more details in the following link:

      http://help.sap.com/saphelp_nw74/helpdata/en/36/e069facded4977b277834c8914de79/content.htm

      Best regards,

      Danny .L

      • Danny

        Thank you for your reply and help,

        I have been using the Fiori Launchpad on Portal (FLP on EP) but we also wanted our Mobile Devices logging on to the Portal to go to a Mobile Logon Page and have only apps designed for Mobile.

        I have resolved this issue. The problem was that I had implemented a Custom Logon Page. I needed to update the certLogonPageMobile.jsp located in the custom deployment area , /J00/j2ee/cluster/apps/custom~logon…/root/mobile

        instead of the standard location. I updated the mobile.css in the standard location. I also had to delete all work files from both locations prior to the java app restart.

        Sarah