Getting started with Netweaver 7.3 portal Part 2 – NWDS and Logon Page

This is the second blog of my blog series. You can read the first blog here:

http://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/25031

This blog can be used independently of the first blog, the only assumption I am making is you have a running Netweaver 7.3 engine and the NWDS installation files with you.

Installing and Configuring NWDS

1. Download and install JDK 1.6 from here:

http://www.oracle.com/technetwork/java/javase/downloads/jdk-6u26-download-400750.html

2. Copy the file nwds-extsoa-7.3-SP00-PAT0000-win32.zip from:

<your download location>\\51039309\\DATA_UNITS\\JAVA_IDE\\distros\\com.sap.netweaver.developerstudio.distribution.complete.extsoa\\8.30.0.101020102100

to a convenient folder.

3. Extract the content and you will have a folder with name eclipse.

4. Launch the Netweaver Developer Studio from folder eclipse, you may want to create a shortcut on the Desktop.

5. If you haven’t maintained JAVA_HOME property or if it’s pointing to some other java version, eclipse will complain about it. In the dialog window locate the JDK 1.6 installation. Path to JDK 1.6  should be something like

C:\\Program Files\\Java\\jdk1.6.0_25\\bin

6. Restart the NWDS after this and select a suitable workspace.

7. Set the run time engine in NWDS, by going through the menu path:

Window->Preferences->SAP AS JAVA

Your NWDS is setup now for basic development tasks. However it’s my personal preference to always install the two very useful plugins (JAD Eclipse and Jar Class Finder) before I actually get into any development. Although we won’t be needing them for the example discussed in this blog, they are always handy.

Installing JAD Eclipse Plugin

1. Download JAD from here:

http://www.varaneckas.com/jad

Extract it and save it in a suitable folder.

2. Download the JAD Eclipse plugin from here

http://sourceforge.net/projects/jadclipse/files/jadclipse3.3/3.3.0%20%28for%20Eclipse%20_%3D3.3M6%29/net.sf.jadclipse_3.3.0.jar/download?use_mirror=nchc

3. Refer to the below document for step by step instructions to configure JAD Eclipse:

http://5thcross.wordpress.com/2009/05/20/installing-jadclipse-in-eclipse/

Installing Jar Class Finder Plugin

1. Download the Jar Class Finder plugin from here:

http://www.alphaworks.ibm.com/tech/jarclassfinder/download

2. Refer to below for installation steps:

http://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/2951

This completes the first part of the blog. take a breather and may be a cup of coffee before we start with the second part, which deals with modification of logon page.

Modifying the Logon Page

There is already a wonderful blog on this topic here

http://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/24955

As I am coming from Portal 7.0 background, and have very little exposure to CE environment. I found it difficult to follow the steps mentioned in above blog (Blame it on my ignorance), I hope the writeup below makes it a bit easier for people like me.

Our aim is to change the branding image on the logon page. Although you don’t need to do a code modification for changing the branding image, as explained here

http://help.sap.com/saphelp_nwce72/helpdata/en/48/ee941b0b803697e10000000a42189b/frameset.htm

This documentation is for CE7.2 (I couldn’t find a similar one for 7.3), however the concept mentioned here can be used in 7.3 as well.

I choose to discuss about changing the branding image due to my fascination for images :-), You will get a glimpse of what I mean in the last screen shot 😉

1. Get ready for the first shock, There are no par files in Netweaver 7.3 Portal. I know the next question is what about all the par based development that I have in my landscape?. I noticed there is a Par Migration Tool. Under the path:

System Administration->Support->Par Migration Tool.

I haven’t tested it myself so won’t be able to explain how it works, may be a topic for the next blog..

2. Copy the war file tc~sec~ume~logon~ui.war from

<Installation drive>:\\usr\\sap\\<SID>\\J00\\j2ee\\cluster\\apps\\sap.com\\com.sap.security.core.logon\\servlet_jsp\\logon_ui_resources\\tc~sec~ume~logon~ui.war

3. Import the war file into NWDS by following the Menu Path:

File->Import ->Web->War File

Tick the checkbox Add project to an EAR, this will create an EAR project which will be used for deployment. Click Finish to generate the two projects.

4. The war project depends on tc~sec~ume~logon~logic_api.jar. You need to import the jar file in WebContent->WEB-INF->lib folder of the project.

5. Also import the image file which you want to use on logon page, in WebContent->Layout folder. (In my case the image name is me.jpg).

The SAP delivered image is branding-image-portals (290X360 pixels), Although you are not restricted by this image size don’t put a big image.

Once you are done it will look like

6. You might get compilation errors at this point of time. Migrate project to Java EE5 to resolve the the errors.

7. Right Click on your war project ->Java EE tools->Update EAR libraries

Content for the below steps 8 and 9 have been taken from here

http://help.sap.com/saphelp_nwce72/helpdata/en/23/c0e240beb0702ae10000000a155106/frameset.htm

8. In the EAR, view \ the General tab of the file <project_name>/EARContent/META-INF/application-j2ee-engine.xml.

a. Enter a provider \ name for your application.

\  \

The provider \ name defines your namespace where your applications reside on the AS \ Java.

\  \

If you enter \ example.com, the application deploys to the following \ path:

\  \

<ASJava_Installation>/j2ee/cluster/apps/example.com/<project_name>

b. \ Choose References and choose  with the \ quick info text Add element

c.  Choose Create new and enter the required data.

\  \  \  \

Reference Data for \ the Logon Application

\  \ \ \ \ \  \ \ \ \ \  \ \ \ \ \  \ \ \ \ \  \ \ \

The Source Tab should look something like:

8.  \ In the EAR, edit \ the file <project_name>/EARContent/META-INF/application.xml, and define the URL alias and for your \ custom logon UI. Please make note of the Context Root as it will be needed in the next step. In my case it’s cts_logon.

9. The Source tab will look like

10. Save, Build and Deploy the EAR project to the server.

Right click on the project->Run As->Run on server

Enter the userid password and wait for the confirmation dialog.

11. Don’t worry if you see forbidden when NWDS tries to run the application.

12. Open the Netwaver Administrator by accessing the URL

http://<host>:<port>/nwa

You will need admin rights to access this

13. Navigate to Configuration->Authentication and Single Sign-On->Properties

14. Set the property Path or URL to the branding image (ume.logon.branding_image) to layout/<your image file name>. In my case it’s layout/me.jpg

15. Set the property Alias of the aplication for customizing login pages (ume.logon.application.ui_resources_alias) to Context root you specified in step 8. In my case it’s cts_logon

As you can notice there are many interesting properties listed here. We could have directly supplied the URL of the Branding Image here without modifying the war file.

16. Save your entries and restart the server. Clear the browser caches and open the logon page.

Congratulations. You have successfully modifies the logon page image.

Footnote

While trying to achieve this i studied the logon page a bit and found some interesting stuff

1. Look at this snippet which basically includes the image in the logon page

                    <td valign=”top”><div class=”urBrandImage“><sap:brandimage type=”main”/></div></td>
                    <td width=”100%”></td>
                    <td>  

2. You can find the css class urBrandImage in the css files located under

WebContent->css->ur.

Just for the sake of discussion I am pasting the corresponding content of ur_ie6.css here

urBrandImage{overflow:hidden;width:290px;height:360px}

If you want to do some css related tweaking with the image you can do it here.

3. The tag lib sap:brandimage can be found here

WebContent->WEB-INF->taglib.tld. The corresponding tag is

<tag>
<description>Logon link tag</description>
<icon/>
<name>brandimage</name>
<tag-class>com.sap.engine.applications.security.logon.tags.BrandingImageTag</tag-class>
<body-content>empty</body-content>
<attribute>
<name>type</name>
<required>true</required>
</attribute>
</tag>

It will be intersting to JAD the com.sap.engine.applications.security.logon.tags.BrandingImageTag class and see what’s in there.