So recently, I was tasked with creating a custom login screen for SAP EP. This login screen provides an entry point to external facing customers.
Here is the default look of the SAP EP login screen:
To create a custom screen, there are a variety of methods. However, the first thing I did as a designer, was figure out the image sizes of the images used on the login screen. THose images came out to be:
- “large” top image: 301 x 245.
- “small” bottom banner image: 301 x 55
My resulting login page was to look like this:
Now the design part is finished – we just have to alter the code in SAP EP.
The Code Part
The login page is part of the par file with the name com.sap.portal.runtime.logon.par
1) Copy the file with the above name from the following location (EP6 SP9 and higher). It has the additional ending “.bak”, which you should remove on you local copy :
2) Import the PAR file into Netweaver Developer Studio:
- Select File>Import .
- Choose the option PAR file. Select Next and a popup window appears.
- In the window you have 3 text fields: The location of the par file, a project name (which will also be the new par file name) and the location where the project should be saved. The project name should differ from the original SAP file to avoid overwriting of the original. It also works as a security blanket, in case you have an exception in your custom logon code or want to start from scratch again.
3) Check, that you have the following 2 JAR files under the subfolder /lib :
If you don’t have these file, you will see a portal exception on the Logon page and the log file will have the entry:
Caused by: com.sapportals.portal.prt.core.broker.PortalComponentInstantiationException: Could not instantiate implementation class com.sapportals.portal.ume.component.logon.SAPMLogonCertComponent of Portal Component my.new.logon.certlogon because: Could not find implementation class at com.sapportals.portal.prt.core.broker.PortalComponentItemFacade.getInstanceInternal…
The files you need are located in the original PAR file. Just open it with a Unzip Program and copy the files in your project.
Now you have your project prepared and you are ready for making changes.
The most important files for a customization are:
- images, which are stored under dist\layout
- JSP files, which are stored under dist\PORTAL-INF
All JSP pages include 3 additional files: The header (umLogonTopArea.txt), the bottom (umBotArea.txt) files, as well as the logon_proxy.txt .
Logon page : umLogonPage.jsp
Problem page : umLogonProblemPage.jsp
Help page (PW reset) : umHelpPage.jsp
Reset Password : umResetPasswordPage.jsp
Change Password Page: changePasswordPage.jsp
Certificate Logon : umLogonCertPage.jsp
Now enough about what elements we have. Let’s customize ! But first make sure that you upload the new par-file, customize the authschemes.xml and restart the portal.
The text seen on the logon page is not in the JSP page, but in properties files which are called by tags like the Welcome text : <%=logonLocale.get(“xtit_WELCOME”)%>
In order to change “Welcome” to “Welcome to MyHR” you have to :
- Unzip the file umelogonbase.jar which you can find under dist\PORTAL-INF\lib
- Find the file “logonLabels_” which contains your language;
e.g. for german logonLabels_de.properties,
for russian logonLabels_ru.properties or
for English logonLabels_en.properties
The default is in the file logonLabels.properties .
- Find the key which is used in the tag (here it is xtit_WELCOME) and change the text after the equal sign.
- Save the changed file and create a updated JAR file using a zip program. The file needs to be named umelogonbase.jar, not umelogonbase.zip or umelogonbase.jar.zip.
- Put the JAR file back to dist\PORTAL-INF\lib.
Remove Support and Register links
The links are controlled with the UM settings
You could also just comment out the lines…
To exchange the two images, which are by default on the logon page, do the following steps:
Copy the image(s) you want to use in your project in the the folder dist/layout.
Find the < img src=”" > you want to work on in the umBotArea.txt
Change the src attribute in the img tag to src=”<%=webpath + “layout/myPic.gif” %>”. The webpath is already defined in the file logon_proxy.txt and ready to use.
In the Netweaver portal 6.0 SP9 and higher you have 2 images on the right side.
Add a Document (e.g. Intro or FAQ)
You can add a document link to the logon page, which points to a KM document. Updating the Logon Document would then involve no transports,and if wanted an approval process. Less paperwork to worry….
1. Setup a folder Logon, e.g. under Public Documents and put in there the document you want to point to.
2. Setup the folder with Read access for the Anonymous Users group.
3. Create a KM Document iview and choose Anonymous as access, but don¡¦t change the path to the document yet.
4. Preview the document and note down the URL of this page (In most browsers Right-click outside the image and select Properties to get the URL).
5. In the iview add now the KM path an d preview it again to make sure that the path is correct.
6. In the logon page, create a link. The href value is the URL you noted down but starting with /irj and without the portal server name and port (otherwise you have to change it after every transport).
To spin this idea further you could show an XML form by putting that into an IFrame.
Dynamic Images and Links
I want to archive a Logon page that looks different for different user. The final PAR file should also work through the DEV, QUA (and sometimes Staging STG ) and PRD without changes in the code. The user will access the portal in all cases via different URLs. Hence we have to check the Request URL which can be accessed in a Java Servlet [getRequestURL()]. In the code below we look in which system we are:
Another idea is to have different views depending from which URL you are coming.
Using that URL, you could have your Multi-Tenant portal without waiting to NW 2004s.
Accepting a Policy with the first Logon
A problem somebody had was that a brand new user should be redirected the first time to a Policy iview, where the user has to accept the policy.
After the acceptance the iview should not appear anymore. The solution was to add an new attribute field in the User Profile.
I have now the new par file, but to have the portal reference on this PAR file, we need to customize and upload the customized authschemes.xml file through the Config-Tool of SAP WebAS.
When you edit the file, you should download the file to a local directory, edit it, and when uploading the edited file, create a new node in the configuration tree for it. In this way you do not loose the original version of the file.
1. Start the Config Tool by executing \j2ee\configtool\configtool.bat.
2. Navigate to cluster_data>server>persistent>com.sap.security.core.ume.service.
3. Switch to edit mode by clicking on the pencil which is at the upper right area.
4. In the tree, select authschemes.xml and choose Download. Save the file to your local directory
5. Edit the local file: To select the new PAR file as the Logon page change the occurrence of all substrings com.sap.portal.runtime.logon to your
project/PAR file name. All com.sap.portal.runtime.logon should be substituted with something like com.company.portal.runtime.logon (or whatever you project name is). Don’t remove the part behind it.
(These are the profiles in the portalapp.xml and have the names default, certlogon, basicauthentication, header, and anonymous).
6. Create a new node in the configuration tree in the Config-Tool for the edited file as follows:
a.Select the node com.sap.security.core.ume.service.
b. Choose the symbol for Creating a node below the selected node.
c. Select the type File-entry.
d. Choose Upload and select the custom file from your local directory.
e. Enter a name for the entry, for example, authschemes_myHR.xml. By default, the name of the uploaded file is used.
f. Choose Create.
g. Choose “Close window”.
h. The new node appears in the configuration tree.
i. Go to Global server configuration>services> com.sap.security.core.ume.service and edit the property login.authschemes.definition.file.
The value needs to be changed from authschemes.xml to authschemes_myHR.xml
j. Restart the Portal.
That’s it! Your SAP EP Portal login screen is completely customized.