Implementing Digital World Clock on SAP Portal

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: 8

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.

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  

Prerequisite:

1. Open you NWDS in Enterprise Portal Perspective Go toÆwindowÆOpen PerspectiveÆ

OthersÆEnterprise 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.

Click on import

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

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

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>

<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;

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>

Export and Deploying PAR file on Portal

Click file menu of NWDS ÆExport

Click on next button.

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

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 :

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.

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.

Related Content

Digital Clock Support Link

For more information, visit the Portal and Collaboration homepage.

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.