PowerApps Timer Control: How to use + start and reset with button

In this tutorial, we will discuss how to use PowerApps timer control, various timer control properties. Also, we will see how to add PowerApps timer control into PowerApps App.

Also, We will see how to start, and stop PowerApps Timer Control using Button, how to reset the PowerApps Timer Control with a button.

Also, We will discuss to store Timer using Power Apps Collection and Display the Collection Timer using a Vertical Gallery Control.

PowerApps timer control

Microsoft provides timer control in PowerApps to determine how the app will respond after a certain time passes.

It has a Duration property that tells how long the PowerApps timer will run in milliseconds. The default duration is 60 seconds, and the maximum duration is 24 hours.

Add PowerApps timer control

In the below screenshot, you can see a Survey form (Event Feedback Survey) that is present in the Powerapps screen. Here, I want to add PowerApps Timer control in this Survey form.

powerapps timer control
Powerapps survey app

To add the PowerApps Timer Control, Go to Insert tab -> Click on Input -> Select Timer as shown in the below screenshot.

power apps timer control
PowerApps timer control

When you will add the Timer control in the Powerapps screen, then it will appear as below. Here, you can see the default Time Duration is 60000 (represents in Milliseconds) or 60 Seconds.

add powerapps timer control

Preview (By using F5) the Powerapps app and just click on the Timer control. You can see the timer will start. When you will again hit the Timer, then the timer will stop.

powerapps timer control example

Configure PowerApps timer control properties

  • Duration: When you will add a Timer control on the Powerapps screen, By default the Timer duration will show as 60000 (in Milliseconds).
  • AutoStart: If you will select the AutoStart property as true, then the timer will start automatically when you will run the app.
  • AutoPause: Similarly, If you will select the AutoPause property as true, then the timer will pause automatically when you will leave the page.
  • Start: There is a property known as Start. By default, this Start property is false, otherwise, it will start without performing any action.
  • Reset: Also, there is a reset property in the Timer control whose value is false by default.

PowerApps start/stop timer with button

By taking a simple example, I will show you how you can start and stop the Timer Control using a Button in Power apps app.

PoweraApps start timer with button

On the Powerapps screen, Add a Button (Insert -> Button) and rename it to Start Timer as shown below. Then apply the below formula on button’s OnSelect property as:

OnSelect = UpdateContext({TimerGo: true})

Where,

  • UpdateContext = It is the function that is used to create a context variable that holds a piece of information temporarily. As in this example, the user is going to select a button number of times, So this function is used.
  • TimerGo: true = TimerGo is the Context variable name which is specified as true.

You can refer the below screenshot:

powerapps timer start

Now select the Timer control and apply the below formula on its Start property as:

Start = TimerGo

Where,

  • TimerGo = This is the Conext variable name that is created in the button OnSelect property.
powerapps timer start button
powerapps timer start button

When you will run the app and hit on the Start Timer button, then you can see the Timer will start as shown in the below screenshot.

powerapps start timer with button
powerapps start timer with button

PowerApps stop timer with button

Similarly, add another button and rename it to Stop Timer. Then apply the below formula on its OnSelect property as:

OnSelect = UpdateContext({TimerGo:false})

Where,

  • TimerGo:false = TimerGo is the Context variable name which is specified as false. That means, Once you will hit the button, the timer will stop.
Stop Timer Control powerapps
powerapps timer stop

Preview or run the app. First, hit on the Start Timer button, then the Timer will start. In some cases, when you will start the timer for the first time, it won’t work.

In this case, first Stop the timer and again start it. Then it will work properly.

NOTE:

If you will start the Timer, then do not forget to stop the timer every time. Otherwise, it won’t work. In this case, when you will stop and again start the timer, then it will work perfectly.
powerapps notify timer
powerapps timer stop on button click

PowerApps timer reset

Add a Button and rename it to Reset Timer. When you will hit the Reset button, then the PowerApps timer control will restart again.

Apply the below formula on Button’s OnSelect property as:

OnSelect = UpdateContext({Reset: false}); Reset(Timer1); UpdateContext({Reset: true})

Where,

  • Reset: false = Reset is the context variable that specifies the value as false.
  • Reset(Timer1) = Timer1 is the name of the Timer control that you have added on the Powerapps screen.
  • Reset: true = Reset is the context variable that specifies the value as true.

Refer the below screenshot:

powerapps timer reset
powerapps timer reset on button click

Now Preview or run the Power apps app. First, Start and stop the Timer button. Then hit on the Reset Timer button. You can see it will work perfectly.

PowerApps reset timer with button

Now, we will see the PowerApps reset timer option, basically how to reset the timer on a button in PowerApps.

PowerApps reset timer

In the Power Apps screen, I was using a PowerApps Timer control. As per my requirement, I had a Button on the screen named Reset Timer. When I will hit the button, the Timer should be reset.

But in my case, When I was hitting the Button to reset or restart the Timer, it was not working for me. I was applying the below formula on the Button’s OnSelect Property:

OnSelect = UpdateContext({Reset:true});UpdateContext({Reset:false})

Where,

  • Reset: true = Reset is a context variable that specifies the value as true.
  • Reset: false = Reset is a context variable that specifies the value as false.

You can refer the below screenshot:

powerapps reset timer with button
powerapps timer reset

PowerApps reset timer with button

To solve this issue, We need to apply the below formula instead of the above formula.

Select the Reset Timer Button and apply this below formula on its OnSelect property as:

OnSelect = UpdateContext({Reset: false}); Reset(Timer1); UpdateContext({Reset: true})

Where,

  • Reset: false = Reset is the context variable that specifies the value as false.
  • Reset(Timer1) = Timer1 is the name of the Timer control that you have added on the Powerapps screen.
  • Reset: true = Reset is the context variable that specifies the value as true.

You can refer the below screenshot:

powerapps reset timer
powerapps timer reset with button

Now Preview or run the Powerapps app. First, Start and stop the Timer button. Then hit on the Reset Timer button. You can see it will work perfectly.

Every time do not forget to Stop and Reset the timer. Otherwise, it won’t work. My suggestion is to follow like this: Stop the timer, reset the timer, and then have the timer starts again.

Store PowerApps Timer Details using Collection

Suppose you want to store the timer each and every time that you record in the Powerapps app. Then, in this case, you can use the Powerapps Collection function.

If you are new to PowerApps Collection or may want to know more information about the PowerApps Collection, then follow these below links:

Add a Button and rename it to Record Timer as shown in the below screenshot. Below represents the Collection formula that you have to apply on the Button’s OnSelect property as:

OnSelect = Collect(RecordTimer, {Time:Timer1.Text})

Where,

  • Collect = It is used to create the Collection in Powerapps.
  • RecordTimer = Collection Name
  • Time = When you will run the app, then the timer will store under the Time column in the Powerapps collections.
  • Timer1.Text = It is the Timer control name that specifies the Text value.
powerapps start timer with button
record timer details powerapps

Now if you will check the Power Apps Collection (View -> Collections), then it will display as shown in the below screenshot.

powerapps timer countdown

Run the app by using following manners:

Start Timer -> Stop Timer -> Record Timer. (Don’t ignore to stop the Timer every time you run the app)

notify timer in powerapps

Again go to the Power Apps Collection and then you can see the Timer will be added that you have recorded.

powerapps timer control reset

Display the Collection Timer using a Vertical Gallery Control

You can display the stored Collection Timer record using the Vertical gallery control.

On the Power Apps screen, Add a Vertical Gallery control (Insert -> Gallery -> Vertical) as shown below.

timer control in Powerapps

Select the Data source as RecordTimer (Collection Name). Select the Fields as Time and Layout as Title.

powerapps timer control

Now preview the app and run it by using the following process as:

Start Timer -> Stop Timer -> Record Timer. Once you will do this process, then the record will be stored in the Powerapps collections as well as it will display on the Vertical Gallery Control as shown in the below screenshot.

powerapps pause timer

Also, you may like these below Power Apps Tutorials:

PowerApps timer control is a very useful control that we can use in many placed in PowerApps forms. Here we learned:

  • What is a PowerApps timer control
  • How to use PowerApps timer control in PowerApps canvas app
  • How to start powerapps timer with button click
  • How to pause timer in PowerApps
  • PowerApps timer reset with button
  • PowerApps timer stop on button click
>