Netweaver 7.3 Portal – Getting Started Part 2 – NWDS and Logon Page

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:
Jad 1.5.8g for Windows 9x/NT/2000 on Intel platform

Extract it and save it in a suitable folder.

2. Download the JAD Eclipse plugin from here
JadClipse – Eclipse plugin
JADClipse web site

3. Step by step instructions to how to install, configure and use JAD Eclipse:

Jadclipse is eclipse plug-in that integrates Jad (Java decompiler) with Eclipse.

  • First you require Jad for decompiling java files. You can find a list of mirrors on this site where you can get JAD for various platforms. Download it and unzip into any folder on your hard drive.
  • Next download the Jadclipse plug-in jar file from here and place the jar file in your eclipse plugins folder
  • Restart your eclipse. If eclipse didn’t recognize the plug-in then launch eclipse with -clean flag:  “eclipse -clean”
  • Configure the path to the Jad executable in eclipse under Window > Preferences… > Java > JadClipse > Path to Decompiler.
  • Set the full path of the jad executable, e.g. C:\Program Files\Jad\jad.exe
  • Go to Window > Preferences… > General > Editors > File Associations and make sure that the JadClipse Class File Viewer has the default file association for *.class  files.

File association


Now everything is done. If you want to view the source for any class then simply ctrl+click on that class then the source for that class will be showed in your eclipse editor.

 

 

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

Field Name Data
Reference target com.sap.security.core.logon
Reference type hard
Reference target type application
Provider name sap.com

 


The Source Tab should look something like:

 

 

9.  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.

 

 

10. The Source tab will look like

 

 

11. 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.

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

13. Open the Netwaver Administrator by accessing the URL

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

You will need admin rights to access this

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

15. 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

16. 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.

17. 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><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.