Digital clock

dodendah
Kilo Explorer

‎08-16-2012 06:23 AM

My team likes the world clock gadget that comes with service-now but was wondering if there is any way to make the clocks digital.

The analog clocks are great but very hard to read at a quick glance. Digital clocks would help because then we could see the time and if the date was there as well is would be helpful. Would it be possible to use something like the personal clocks from a site like TimeandDate.com and insert them into our service-now homepage or some other custom clock generator that uses java or html?

0 Helpfuls
  • 3,675 Views
3 REPLIES 3

CapaJC
ServiceNow Employee
ServiceNow Employee

‎08-16-2012 07:26 AM

That clock widget was added when UI Pages were created, to show just one example of what someone could do with them. The whole thing combines three concepts: a homepage Widget (System UI -> Widgets), a UI Page "example_cool_clocks", and a UI Script "CoolClock" invoked by the UI Page.

There's a URL in the UI Script to the website where the actual clock script comes from. I sometimes wish we hadn't used that example, since it's buggy at times and in some browsers, but there you have it.

Anyway, my point is that since it's just a UI Page (for the HTML) and UI Script (for the client side JavaScript), it could probably be replaced with any of a number of similar, publicly available scripted clocks.

Here's how to create your own Homepage widget:
http://wiki.servicenow.com/index.php?title=Creating_a_Custom_Homepage_Widget

And at the end of all this, if someone has already solved and has a practical solution they can share, that'll probably be much more useful to you than what I just typed.


0 Helpfuls

Keith Mills
Giga Guru

‎02-06-2013 09:03 AM

If you are still looking for a Digital clock, I have posted one on this link.

Digital World Clock


0 Helpfuls

kristinacree
Mega Expert

‎08-26-2021 07:56 AM

So, after a few days of working on this. I created a UI page, which you will need to add to the sys_widget World Clocks area. I created a digital clock that doesn't do the math. You just need to know the timezone. This will do a live refresh every second of only this UI page via a SetInterval, it will not reload the entire page, or worry about DST. The divs are easily modifiable if you need to change the format or shape. 

This is working for me on SNOW Quebec patch 4 hotfix 2a, as of today. There are cleaner ways to do the HTML but wanted to share this for anyone else needing this on a dashboard or homepage.

find_real_file.png

Type: UI Page
Name: cool_clock_2
HTML: 
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<html>
<body>
<div id="IST" STYLE="color: #000000; font-family: Verdana; font-weight: bold; font-size: 12px; border-style: groove; width: 275px; margin-bottom: 10px; background-color: #60CEED;"></div>
<div id="UTC" STYLE="olor: #000000; font-family: Verdana; font-weight: bold; font-size: 12px; border-style: groove; width: 275px; margin-bottom: 10px; background-color: #9CF168;"></div>
<div id="EST" STYLE="olor: #000000; font-family: Verdana; font-weight: bold; font-size: 12px; border-style: groove; width: 275px; margin-bottom: 10px; background-color: #F7EA4A;"></div>
<div id="HST" STYLE="olor: #000000; font-family: Verdana; font-weight: bold; font-size: 12px; border-style: groove; width: 275px; margin-bottom: 10px; background-color: #FBC543;"></div>
</body>
</html>
</j:jelly>

Client Script: 
addLoadEvent(looptimer);

function looptimer() {
var date = setInterval(function() {
var element1 = document.getElementById('IST');
element1.innerHTML = "Chennai: " + new Date().toLocaleString('en-US', { timeZone: 'IST', hour12: false });
var element2 = document.getElementById('UTC');
element2.innerHTML = "UTC: " + new Date().toLocaleString('en-US', { timeZone: 'UTC', hour12: false });
var element3 = document.getElementById('EST');
element3.innerHTML = "Eastern: " + new Date().toLocaleString('en-US', { timeZone: 'US/Eastern', hour12: false });
var element4 = document.getElementById('HST');
element4.innerHTML = "Hawaii: " + new Date().toLocaleString('en-US', { timeZone: 'US/Hawaii', hour12: false });
}, 1000);
}

Preview file
34 KB