Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
ashok143
Explorer
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.
2 Comments
Labels in this area