Had an interesting request from my project manager a while back.  He wanted a countdown timer that showed how long we had until cutover.  Here’s a screen shot of what I came up with:

I decided to do this in JavaScript because it really doesn’t need any information from the server (other than the date to countdown to), and because it’s not easy to put server-side content inside the signin page (short of monkeygrease).  Another big factor is that there are TONS of javascript countdown timers freely available on the internet.

I actually wanted a countdown timer with some sort of visual graphic indicating how much time is left.  I couldn’t find this in a single script, but I did find it in two scripts.

I used the countdown timer from http://www.hashemian.com/.  I got the progress bar from http://wwww.Webappers.com/. 

Then I modified signon.html.  It’s located under your PIA_HOME under psftdocs/signon.html.  I added my javascript code under the HTML to set trace flags.  To find it, just search the file for the text “To set trace flags”. 

Here’s the HTML code that calls the javascript:

<tr>

  <td height="119" valign="middle" class="psmessageframe"><table width="100%" border="0" cellspacing="0" cellpadding="5">

    <tr>

      <td><div align="center">

                     <span class="pslogintext"">Countdown to Cutover!</span> <br/>

        <script language="JavaScript">

                     TargetDate = "10/31/2007 0:00 AM";

                     BackColor = "white";

                     ForeColor = "#CC3300";

                     CountActive = true;

                     CountStepper = -1;

                     LeadingZero = true;

                     DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";

                     FinishMessage = "We're LIVE on PeopleSoft 8.9!!!";

                     </script>

                     <link href="lib/style.css" rel="stylesheet" type="text/css" media="screen" />

                     <script language="javascript" type="text/javascript" src="lib/prototype.js"></script>

                     <script language="javascript" type="text/javascript" src="lib/progress.js"></script>

                     <br/><br/>     

      </div></td>

    </tr>

   </table></td>

</tr>

</tr>

As you can see, the javascript bock sets up the basic parameters, then includes the main script (prototype.js).  The countdown timer example had the script in the lib directory, so in the interest of time I created a lib directory under $PIA_HOME and put the main javascript functions there.  I put the images under the existing PeopleSoft images directory.

Also I combined the two scripts into one so that I could get the display that I wanted.  

The attached zip file contains all of the code I used to make this happen.

There may be other interesting uses for calling a javascript from the signin page.  For instance, if you’ve ever modified signon.html, you’ve surely noticed that you have to bounce the web server to make your changes take effect.  But I found that if you include a javascript program, you can modify the javascript program and the changes take effect immediately. With some creativity, it might be 

So if you’ve ever wanted to put a system downtime notification on the signin page, but you didn’t want to bring the web server down, this would be a way to do it.

Comments (0)

Write comment

Name

Email

Website

Title

Comment

Write the displayed characters

Add Comment