Implement a Countdown Timer in K2 Smartforms

Countdown timers are very useful when you have Email/OTP Validations on your Web forms with a time limit. Currently K2 doesn’t have an OOB control to do this, but we can achieve this by using a Timer control. Let’s see how we can implement.

In the sample which I’m using below, there is an Email Verification in which User enters his Email Id and clicks Submit to receive a 6-Digit Code on his email Id, this 6 – Digit code will be valid for 5 minutes and user should see Time Left countdown timer before he can request for another code. To achieve this I have used 2 timer controls and a data label on the web form and used some expressions which I’m explaining step by step below.

Steps

1. Drag 3 Data Labels and Name them as Minutes, Seconds & TimerMessage. Set Minutes Value to 5 and Seconds value to 00 (Note: Set Seconds Value Data Label format to Custom Type “00”). Also Set visible to “False”
2. Drag 2 Timer Controls, Name them as 1SecondTimer, 5MinuteTimer with Interval value to 1000 & 305000 milliseconds respectively
3. Drag 2 Buttons one to start Timer & other to stop timer.
4. Now we need 3 expressions 

Expression 1: Set Name as ExpressionSecondsCounter and the expression should be set as shown below (This is for Seconds Counter)

Expression 2: Set Name as ExpressionMinutesCounter and the expression should be set as shown below (This is for Minutes counter)

Expression 3:  Set Name as ExpressionTimerText and set the expression as shown below. (this expression is for the user display datalabel)

Now go to rules tab and select when a control on the view raises an event and select 1SecondTimer Ticked. In that rule just add a transfer data rule and click configure and drag and drop ExpressionMinutesCounter & ExpressionSecondsCounter to their respective datalabels Minutes & Seconds.

This rule executes per each second as we have set interval to 1000 milliseconds.

Now similarly add one more rule to configure 5MinuteTimerTicked Event and inside that write a rule to set Message as Expired and then add 2 rules to stop the timers. See below screen shot.

This rule executes for every 5 minutes as we have kept 305000 milliseconds. After 5 minutes we are setting User Display Text to Code Expired.

Complete the Button click rules to Start and Stop the timers respectively.

That’s it, now save the View and run it to see the output.

In My Next post I will show you how to do a simple Email Verifications in smartforms using SQL database.

Thanks for Reading!