Countdown Timer in SAP UI5

Hi all,

In this blog I am going to explain how to set the countdown timer for our required time.

My requirement is to set the timer for 5 mins in a fragment dialog box.

In my view, when I click on a button, a fragment need to open with a five minutes count down. When I close the fragment or a dialog box the timer need to stop. Again if I open the fragment again the countdown timer  need to start from the  5.00 mins. When it reaches the 0.0 minutes the countdown  timer need to stop. Let’s see how I achieved that functionality.

Below  is the code for my view.

View.xml:

<mvc:View controllerName="login.controller.View1" 
xmlns:html="http://www.w3.org/1999/xhtml" 
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}">
<Panel>
<content>
<Image class="sapUiResponsiveMargin" src="Images/image.jpg" />
</content>
</Panel>
<Vbox class="vspace">
<Label text="User Name"/>
<Input value="" width="30%"/>
<Label text="Password"/>
<Input value="" width="30%"/>
<CheckBox selected="true" text="Remember me"/>
<Button press="onLogin" text="LOG IN"/>
<Hbox>
<Link class="sapUiSmallMargin" text="Forgot Password?"/>
<Link class="sapUiSmallMargin" text="Forgot User Name?"/>
</Hbox>
<Button text="Create Account" width="30%"/>
</Vbox>
</Page>
</pages>
</App>
</mvc:View>

My View:

When I click on Log In button a fragment need to open with five mins countdown timer.

Below is the code for my fragment.

Fragment.xml:

<core:FragmentDefinition xmlns:core="sap.ui.core" 
xmlns:f="sap.ui.layout.form" xmlns:l="sap.ui.layout" 
xmlns="sap.m">
<Dialog id="enterOTP" title="Enter OTP">
<f:Form>
<f:layout>
<f:ResponsiveGridLayout adjustLabelSpan="false" 
columnsL="1" columnsM="1" columnsXL="2"
 emptySpanL="4" emptySpanM="0" emptySpanS="0" 
emptySpanXL="0" lableSpanL="3" lableSpanM="4" 
lableSpanS="12" lableSpanXL="4" singleContainerFullSize="false">
</f:ResponsiveGridLayout>
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement>
<f:fields>
<Input editable="false" id="timer" value=""/>
<Input placeholder="Enter OTP" value="" width="auto"/>
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
<buttons>
<Button id="onSub" press="onSubmit" text="Submit"/>
<Button press="onResend" text="Resend OTP"/>
</buttons>
</Dialog>
</core:FragmentDefinition>

Now in the controller.js we will write the functionality to open the fragment when we click on LOG IN button.

// Below is the function for the dialog box.   
   _getDialog: function() {
		if (!this.dialog) {
			this.dialog = sap.ui.xmlfragment("login.view.otp", this);
			}
			return this.dialog;
		},

// for opening dialog box
                onLogin: function() {
			this._getDialog().open();
               },

//for closing dialog box

       onSubmit: function() {
			this._getDialog().close();
			clearInterval(x);
		}

Now when I open the dialog box there need to be timer set for 5 mins (you can add your own time )

Now let’s how achieved that.

In the login function First I stored the current date in a variable.

	var fiveMinutesLater = new Date();

Now add five minutes for the current date current time and store it in a variable.

	var scs = fiveMinutesLater.setMinutes(fiveMinutesLater.getMinutes() + 5);

Then pass the time with 5+ minutes in to another variable.

var countdowntime = scs;

Now open the set Interval function which sets the time.

	x = setInterval(function() {
    ...
    ...
        }

In the set Interval function store the current time in a variable.

	var now = new Date().getTime();

Now  subtract the current time and time with 5+ minutes. So that, we get the remaining 5 mins. store that in a variable.

	var cTime = countdowntime - now;

Now calculate the number of minutes and seconds remaining.

	var minutes = Math.floor((cTime % (1000 * 60 * 60)) / (1000 * 60));
	var second = Math.floor((cTime % (1000 * 60)) / 1000);

Now in the variables minutes and seconds we have the number of minutes and seconds remaining.

Now bind it for the fragment.

sap.ui.getCore().byId("timer").setValue("OTP Expires in " + minutes + ":" + second + " Minutes");

After completion of the 5 mins we need to clear the clear interval Otherwise It goes on running into    -ve values.

                   if (cTime < 0) {
		     clearInterval(x);
		sap.ui.getCore()byId("timer").setValue("OTP Expires in 0:0 Minutes");

				}

Now the timer is set for  5 mins and after completion of 5 mins it will stops.

After closing the dialog box also we need to clear the interval otherwise it will start from the point where we closed the dialog box.

I used submit button to close the dialog box.

In the submit button function again I cleared the interval so that if you close the dialog box and you open again the timer will rested for 5 mins.

              onSubmit: function() {
			this._getDialog().close();
			clearInterval(x);
		}

Full Code in controller.js:

onLogin: function() {
this._getDialog().open();
var time = sap.ui.getCore().byId("timer");
var fiveMinutesLater = new Date();
var scs = fiveMinutesLater.setMinutes(fiveMinutesLater.getMinutes() + 5);
console.log(scs);
var countdowntime = scs;

x = setInterval(function() {
var now = new Date().getTime();
var cTime = countdowntime - now;
var minutes = Math.floor((cTime % (1000 * 60 * 60)) / (1000 * 60));
var second = Math.floor((cTime % (1000 * 60)) / 1000);
time.setValue("OTP Expires in " + minutes + ":" + second + " Minutes");

if (cTime < 0) {
clearInterval(x);
time.setValue("OTP Expires in 0:0 Minutes");
}
});
},

onSubmit: function() {
this._getDialog().close();
clearInterval(x);
}

Hope this will help you to set the timer for your required time.