Implementing Digital World Clock

on SAP Portal

Applies to:
SAP Portal. For more information, visit the Portal and Collaboration homepage.

Summary
This article explains about implementing digital clock on portal. Generally, we will be having requirement to
display world time with date on the portal Masthead. This time and date will be based on GMT time zone.
Author: Anup Kumar Bharti
Company: Yash Technologies Pvt. Ltd.
Created on: 8th September 2009

Author Bio
Anup Kumar Bharti is Associate Consultant for Yash Technologies Pvt. Ltd based in India. He
has more than 3 years of IT experience. He has experience in Java J2EE, Struts, Hibernate,
Web Dynpro Java and EP.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 1
 Implementing Digital World Clock on SAP Portal

Table of Contents
Prerequisite: ........................................................................................................................................................ 3
Import Par File into NWDS ................................................................................................................................. 3
Code for Creating Digital World Clock ................................................................................................................ 8
Export and Deploying PAR file on Portal .......................................................................................................... 11
Run/Test newly deploy you PAR file. ............................................................................................................... 15
Out Put look like this ......................................................................................................................................... 16
Related Content ................................................................................................................................................ 17
Disclaimer and Liability Notice .......................................................................................................................... 18

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 2
 Implementing Digital World Clock on SAP Portal

Prerequisite:
1. Open you NWDS in Enterprise Portal Perspective Go towindowOpen Perspective
OthersEnterprise Perspective, you will get below screen select it and click ok button, now the EP
perspective will be visible to perspective area.
2. Java Developer role should be assigned to user in portal.

Import Par File into NWDS

Download the standard masthead PAR file to the local file system. Then open your NWDS in web Dynpro
perspective.
Go to File Import.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 3
 Implementing Digital World Clock on SAP Portal

Click on import

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 4
 Implementing Digital World Clock on SAP Portal

Select PAR file and click next button now browse Archive file name and find the downloaded standard
masthead PAR file from the local system and enter the project name and Click on Finish button

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 5
 Implementing Digital World Clock on SAP Portal

The imported par file project hierarchy will appear as shown below:

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 6
 Implementing Digital World Clock on SAP Portal

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 7
 Implementing Digital World Clock on SAP Portal

Code for Creating Digital World Clock

Create a JSP page inside the JSP folder of the project hierarchy as shown below:

Now put the below code in it.

<table border="0" width="100%" cellspacing="0" cellpadding="0" font size="12"
face="Arial" NOWRAP>
<form name="where">
<tr with="50%" NOWRAP><font size="12" face="Arial">
<td width="100%" NOWRAP>
<select name="city" size="1" onchange="updateclock(this);">
<option value="" selected>Local Time</option>
<option value="-3">Argentina</option>
<option value="9.5">Australia-Adelaide</option>
<option value="10">Australia-Sydney</option>
<option value="2">Belarus</option>
<option value="1">Belgium</option>
<option value="-3">Brazil</option>
<option value="2">Bulgaria</option>
<option value="-5">Canada</option>
<option value="8">China</option>
<option value="-5">Colombia</option>
<option value="1">Denmark</option>
<option value="-5.5">Ecuador</option>
<option value="1">France</option>
<option value="0">Great Britain</option>
<option value="2">Greece</option>
<option value="1">Germany</option>
<option value="1">Hungary</option>
<option value="5.5">India</option>
<option value="1">Italy</option>
<option value="9">Japan</option>
<option value="3">Kenya</option>
<option value="2">Moldova</option>
<option value="-6">Mexico</option>
<option value="1">Netherlands</option>
<option value="12">New Zealand</option>
<option value="1">Poland</option>
<option value="2">Romania</option>
<option value="3">Russia</option>
<option value="1">Spain</option>

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 8
 Implementing Digital World Clock on SAP Portal

<option value="9">South Korea</option>

<option value="8">Singapore</option>
<option value="1">Slovakia</option>
<option value="1">Switzerland</option>
<option value="1">Slovinia</option>
<option value="2">South Africa</option>
<option value="7">Thailand</option>
<option value="2">Turkey</option>
<option value="8">Taiwan</option>
<option value="6">Kazakhstan</option>
<option value="2">Ukraine</option>
<option value="-4">US-Lawrenceville</option>
<option value="-4">US-Middlebury</option>
<option value="-4">US-Fords</option>
<option value="-4">US-West Lafayette</option>

</select>
&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td width="25%" NOWRAP ><font size="12" face="Arial">
<script language="JavaScript">

if (document.all||document.getElementById)
document.write('<span id="worldclock" style="font:bold 12px Arial;"></span><br
/>')
zone=0;
isitlocal=true;
ampm='';

DstTimeZone=0;

function updateclock(z){
zone=z.options[z.selectedIndex].value;
isitlocal=(z.options[0].selected)?true:false;

/*Day light time for US country*/

var USState = z.options[z.selectedIndex].text;
DstTimeZone = new Date();
var DstMonth = DstTimeZone.getMonth()+1;
var DstDay = DstTimeZone.getDay();

if(USState=='US-Lawrenceville' || USState=='US-Middlebury'|| USState=='US-Fords'

|| USState=='US-West Lafayette'){
if(DstMonth>=3 && DstMonth<11){
zone = parseInt(zone) + 1;
}
}
}
function WorldClock(){
now=new Date();
ofst=now.getTimezoneOffset()/60;
secs=now.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=now.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 9
 Implementing Digital World Clock on SAP Portal

if (hr < 0) hr+=24;

if (hr > 23) hr-=24;
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toUpperCase();

hr2 = hr;

if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2
var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs <
10)?"0"+secs:secs)+' '+statusampm;

now = new Date();

var lMonth = now.getMonth()+ 1;
var lDate = now.getDate();
var lYear = now.getYear();
if(lMonth< 10){
lMonth = '0'+lMonth;
}if(lDate < 10){
lDate = '0'+lDate;
}
finaltime = finaltime +' Date : '+lMonth+'/'+lDate+'/'+lYear;

if (document.all)
worldclock.innerHTML=finaltime
else if (document.getElementById)
document.getElementById("worldclock").innerHTML=finaltime
else if (document.layers){
document.worldclockns.document.worldclockns2.document.write(finaltime)
document.worldclockns.document.worldclockns2.document.close()
}
setTimeout('WorldClock()',1000);
}
window.onload=WorldClock
</script>
</td>
<td width="25%" NOWRAP>
<!--Place holder for NS4 only-->
<ilayer id="worldclockns" width=60% height=30><layer id="worldclockns2"
width=60% height=30 left=0 top=0 style="font:bold 12px Arial;"></layer></ilayer>
</td>
</font>
</form>
</font>
</tr>
</table>
Now include the newly created DigitalClok.jsp to HdeaderView.jsp.
<TD nowrap ti="0" tabIndex="0" class="prtlHdrWelcome" id="welcome_message2"
title="HRS">
<%= "[ HRS ]"%>
</TD>
<TD class="prtlHeaderFunctionsTable" nowrap><font size="12" face="Arial">
<%@ include file="digiclock.jsp" %>
</font>
</TD>

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 10
 Implementing Digital World Clock on SAP Portal

Export and Deploying PAR file on Portal

Click file menu of NWDS Export

Click on next button.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 11
 Implementing Digital World Clock on SAP Portal

Select your PAR file, which you want to export it with that name and click next button.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 12
 Implementing Digital World Clock on SAP Portal

Now click finish button, it will be get deploy to you portal. Incase your server is not configured then configure
it by passing following parameter given in screen shot below:

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 13
 Implementing Digital World Clock on SAP Portal

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 14
 Implementing Digital World Clock on SAP Portal

Run/Test newly deploy you PAR file.

Login to Enterprise Portal by passing URL (http ://< host name> : <port number>/irj/portal)
After sues full login Go to Java Developer PDK Component Starter & Viewer

.
You can see the newly deployed par file, click on start to view it.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 15
 Implementing Digital World Clock on SAP Portal

Out Put look like this

If you want to see different country time, just select country name from drop down box, the time and date will
be automatically gets updated.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 16
 Implementing Digital World Clock on SAP Portal

Related Content
Digital Clock Support Link
For more information, visit the Portal and Collaboration homepage.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 17
 Implementing Digital World Clock on SAP Portal

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not
supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.
SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document,
and anyone using these methods does so at his/her own risk.
SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or
code sample, including any liability resulting from incompatibility between the content within this document and the materials and
services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this
document.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2009 SAP AG 18