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.
Good
Thank you