SAP Portal Logon Page Customization

Target Audience

SAP EP Developers to get an overview of how to customize the SAP Enterprise Portal Login Page

How does a Portal Login page look like

Things that we will customize

1. SAP NetWeaver Image
2. Company Logo/Branding Image
3. Changing the text
4. Changing the SAP Logo

Procedure

1) Download the com.sap.portal.runtime.logon par.bak file
from portal

    a) Goto>System Admin>Support>Portal Runtime>Browse Deployement

2) Save it on your local machine

3) Rename it to com.sap.portal.runtime.logon.zip

4) Extract the files while keeping the directory structure

5) Modify the appropriate files

6) Put modified files back into the PAR file

7) Deploy/Upload the new PAR file

  Customizing the SAP NetWeaver Image

  Procedure

  1)Place the new image in the path dist>layout

  2) Goto umLogonTopArea.txt and change the image path from

  <img     src=”<%=com.sap.security.core.logonadmin.ServletAccessToLogic.getAbsoluteURL(webpath,secondImage)%>”
  alt=”Product” border=”0″>

   to

   <img src=”<%=webpath%>layout/new-image.jpg” alt=”Product” border=”0″>

   Customizing the Branding Image

   Procedure

1. Place the new image in the path dist>layout

   2.  Go to umLogonTopArea.txt and change the image path from

  <img
  src=”<%=com.sap.security.core.logonadmin.ServletAccessToLogic.getAbsoluteURL(webpath,com.sap.security.core.imp.TenantFactory.getInstance().getLogonBrandingImage1(request))%>”alt=”Branding Image” border=”0″>

   to

   <img src=”<%=webpath%>layout/newbranding-image.jpg” alt=”Branding Image” border=”0″>

   Changing the text

   Procedure

1. For changing the User,Password and Login button text , Go to umLogonPage.jsp
2. Change the following texts

    a) For User,change name=”<%=ILoginConstants.LOGON_UID_ALIAS%>“ to the name that you want to give.

    b) For Password,change name=”<%=ILoginConstants.LOGON_PWD_ALIAS%>” to the name that you want to give.

    c) For Logon ButtonText, Change name=”<%=SAPMLogonLogic.uidPasswordLogonAction%>“ to the text that you want to give.

    3. For changing the footer Copyright text, go to logonLabels_en.properties file

    4. Maintain the new text in COPY_RIGHT that you want to give
.

    Changing the SAP Logo

    Procedure

1. Place the new image in the path dist>layout

   2. Go to umLogonBotArea.txt

   3. Change the old image path to

   <div class=”urCopyrightImage”><imgsrc=”<%=webpath%>layout/new_logo.png”

   Adding/Accessing New Resources

   Depending upon required availability,two options:

1. umLogonTop.txt or umLogonBot.txt for all jsp’s
2. Include resource only in required jsp.

      To Include CSS file

      <%Iresource newstyle = componentRequest.getResource(Iresource.CSS,”newres/abc.css”)

      To Include Image:

      <img src=“<%=webpath%>newres/abc.gif”>

      To Include javascript file:

      <script language=“Javascript” src=“<%=webpath%>newres/abc.js”>

      </script>