Timers in Oracle APEX – Retro Style!

I’m back with another plugin. A customer of mine had a requirement to show a classy timer on a form so that the people filling in the forms knew how much time they had been spending filling in the super long form. I initially did it precisely for that case, but they liked it too much and wanted  the timers on a whole lot of pages. That’s what pushed me to turn it into a simple plugin so that our other developers with less knowledge of JavaScript/jQuery could benefit from it too.

(Come to think of it, just telling them how it worked would have consumed much less time, but I went with making the plugin anyway.)

The idea and copyright comes from Xdan a.k.a Valeriy’s jQuery Plugin called “flipcountdown“. You can visit his GitHub repository via this link  https://github.com/xdan/flipcountdown/ for more information and also the complete documentation to implement any feature that I already haven’t.

So the jQuery library is a must, and since our Oracle APEX applications have the library embedded by default. Therefore there’s no problem in that area.


After downloading the plugin, which you can find the link at the bottom of this post, import it into your application. Afterwards, in any page and in any region, create a Page Item and set its type to APEX Flip CountDown.

In the Settings section you are prompted to choose some options. The image below shows all the available options and I will explain them one by one underneath the photo.

timers settings

Counter Mode

When set to ‘Yes’, all options other than Size and Start From become disabled. This is what you will be seeing :

Timer Counter Mode

You can choose a number for the counter to start from, or simply leave it empty for it to start from 1.

When this option is set to ‘No’ the counter mode is disabled and you get a simple clock displayed.


The Size option is always visible. When in Counter, Clock or Countdown mode and sets the size of the Retro Flip Countdown timers. The available options are Large, Medium, Small and Extra Small.

Show Hour / Minute / Second

Setting any combination of these changes the visuals of the clock. If all of them are set to No you get nothing. Setting them all to yes displays the hour, minute and second of the current time. Note that these options only work in the clock mode, and not in the counter and countdown modes.

Time Format

When displaying a clock you can choose between a 12 or 24 hour time format.

Count to Date?

This is what actually sets the plugin on countdown mode. You can choose from a certain date and time in the future and the timers will start counting down to the given time. It’s a good option to show a timer for when a specific offer will end. A space between the date and time is absolutely necessary. A valid format is :


For example : 4/21/2017 18:46:23


When Count to Date is set to ‘Yes’ this text field becomes visible and this is the date you set for the countdown timers to count to.

You can visit this link to see a working demo of the plugin :


And for downloading the plugin itself visit my GitHub repository:


43,600 total views, 24 views today

8 Replies to “Timers in Oracle APEX – Retro Style!”

  1. Hello,

    Thank you! Very nice timer. Is there a way to set and action based on timer expiration? I.e. when timer ends notify user – popup, report entry etc.

    Thank you.

    1. Hi there Zul,

      I haven’t tested it on the mobile theme, but I would very much appreciate it if you could test it out and let me know how it goes.

  2. Hi, very nice it works perfectly thank you for this, we are learning to use apex, would you kindly tell me, is there a way to implement the count down to date based on item value or sql maybe? would be a great addition to this already great plugin.

    1. Update — Got it working so it would, take dates based on item values by changing line 99 from ‘beforeDateTime:’ || ”” || l_beforeDateTime || ””;
      to ‘beforeDateTime:’ || ” || l_beforeDateTime || ”;

      and then setting the value of countodown to item value on page in my case like this $(‘#P2_NEW_1’).val(), I iwll stay on reading the documentation I want tis value to be to Item but I will keep on updating

  3. Hi,

    Its very helpful tool but just wanted to know if I want to change the timing to EST in this then how can I do that

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading Facebook Comments ...