Power Apps Timer Control Examples

This Power Apps tutorial will run you through several examples of how to use Power Apps Timer control inside apps with various examples.

Recently, while working in a canvas app, I got a requirement to display a power apps time control and reset it. So I did complete research and wrote this tutorial on how to use Power Apps time control.

Also covered will be how to use the Power Apps timer control with the following items:

• What is Power Apps Timer control?
• What are the Power Apps Timer control properties?
• Add a Power Apps Timer control
• Display the Power Apps Timer control countdown.
• How to work with the Power Apps Timer control repeat?
• How to start a timer with a button in Power Apps?
• How to stop a timer with a button in Power Apps?
• How to reset a timer via a button in Power Apps?
• How to resume a timer with a button in Power Apps?
• How to store value using a collection from the Power Apps Timer?
• What is Power Apps Timer control duration?
• How to refresh data or data source using the Power Apps Timer control?
• How to switch screens using Power Apps Timer control?

Power Apps Timer Control

Do you know what a Power Apps timer control is? If not, let us be clear about this control. In Power Apps, there is a control named ‘Timer‘ that evaluates how your app responds after a certain period of time.

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

Note: Timers in Power Apps Studio only work in Preview mode.

Power Apps Timer control properties

There are different types of properties we can find under the Power Apps Timer control. These are:

• Duration: In milliseconds, how long a timer runs. The maximum time in milliseconds is 24 hours. The default time is 60 seconds.
• OnTimerEnd: When a timer expires, perform the following actions.
• Repeat: When a timer expires, whether or not it automatically restarts.
• Align: The position of text in relation to the control’s horizontal center.
• AutoPause: If the user navigates to a different screen, the timer control automatically pauses.
• AutoStart: Whether the timer control starts playing automatically when the user navigates to the screen that contains it.
• BorderColor: The border color of a control.
• Color: Defines the text’s color of a control.
• DisplayMode: Whether the control accepts user input (Edit), displays data only (View), or is disabled
• DisabledBorderColor: If the control’s DisplayMode property is set to Disabled, this is the color of its border.
• DisabledColor: If a control’s DisplayMode property is set to Disable, the color of its text is.
• Fill: A control’s background color.
• FocusedBorderColor: When control is focused, the color of its border is.
• Font: The name of the font family in which text appears.
• OnSelect: When a user taps or clicks a control, actions are taken.
• OnTimerStart: Actions to take when a timer begins to run.
• Reset: Whether or not a control is reset to its default value.
• Start: Whether or not the timer begins.
• Visible: Whether the control is visible or hidden.

Read How to get month name from date in Power Apps

Add a Power Apps Timer control

Here, we will see where to find the Power Apps timer control and how to add that to the Power Apps screen.

To find the Power Apps Timer Control, the following steps are:

• On the Power Apps screen, go to the Insert tab > Input > Timer.
• Select the control. We can see it will appear on the screen shown below:

• When we add the control, we can see that the duration is set to 60000 by default. This translates to 60000 milliseconds = 60 seconds, which can be extended to 24 hours.

This is how to add a timer control to the Power Apps screen.

Read Power Apps Notify() function

Power Apps Timer control countdown

We’ll look at how to use the Power Apps Timer Control in this section. That is, when the user clicks on the timer, the countdown begins based on the specified duration. For instance, if the duration is 5 seconds, the timer will return a countdown of 5,4,3,2,1,0.

To work with this requirement, the following steps are:

• Add a timer control to the Power Apps screen.
• Set the Duration as 15000 (15 seconds).

• Add a Label control to the screen and place it under the timer control.
• Insert the below expression on the Label control’s Text property.

Text = "*Seconds remaing:  " & RoundUp(15 - CountDown_Timer.Value/1000, 0)

Where CountDown_Timer is the name of the Power Apps Timer control.

• Then, on the Power Apps Timer control, set the Repeat and AutoStart properties to true. As a result, the timer will begin to play automatically and will repeat the duration once the time is up.

Repeat = true

AutoStart = true

That’s it! Save and preview the app for now. Click on the timer control, and we can see the seconds, as well as the remaining time, will dispaly in the label control shown below:

As the total duration is 15 seconds, it displays the remaining seconds as 9 seconds. This is how to work with the Power Apps Timer countdown.

Read Power Apps Filter With Date Picker

Power Apps Timer control repeat

In this section, we’ll look at how to use the Power Apps Timer control repeat. Consider the Power Apps timer control, where we have a text that will fade in every 10 seconds once the timer begins and then repeat once the timer expires.

To work with this requirement, the following steps are:

• Add a Power Apps Time control to the screen.
• Set the Duration property to 10000 on the timer control.

Duration = 10000

• Also, set the Repeat property as true.

Repeat = true

• Add a Label control to the screen. Give a text as per your requirement. Ex: “Welcome to Power Apps”.

Text = "Welcome to Power Apps"

• Insert the below expression, on the label’s Color property.

Color = ColorFade(Color.Chocolate, CountDown_Timer.Value/10000)

Let’s check out this app. We can see when the timer begins, and the text fades after 10 seconds. This procedure will be repeated every 10 seconds.

This is how to use the Repeat property in the PowerApps Timer control.

Read How To Set Default Date in Power Apps Date Picker

Power Apps Timer control starts with a button

We’ll start with a button and work our way up to the Power Apps Timer control. That means when the user clicks on the button, it will start the Power Apps timer control.

To work with this requirement, the following steps are needed:

• Add a Timer control to the Power Apps screen.
• Set the Duration property to 10000.
• Add a button control to the screen and rename it as Start.
• Insert the below expression on the button’s OnSelect property.

OnSelect = UpdateContext({startTimer:true});

Where startTimer is the name of the update context variable name and value is true.

• Set the updatecontext variable name i.e., startTimer on the Start property of the Power Apps Timer control.

Start = startTimer 

Let’s preview the app. We can see, when we click on the button, the timer will start.

This is how to start a timer with a button in PowerApps.

Read How to disable Power Apps date picker

Power Apps Timer control stop

Similarly, in this section, we will see how to stop or pause the Power Apps Timer control via a button control.

To work with this scenario we are going to use the above example, and the following steps are:

• Add a button control to the screen and place it near the start button.
• Rename the button as Stop.
• To stop the timer control while it is running, add the following expression to the button’s OnSelect property.

OnSelect = UpdateContext({startTimer:false});

Where startTimer is the name of the update context variable created in the preceding example. Set the variable value to false.

That’s all! Run or preview the app for now. First, press the Start button, and the timer will begin.

When you start the timer for the first time, it may not work in some cases. In such a case, stop the timer and then restart it. Then it will function properly.

This is how to stop a running timer control using a button within Power Apps.

Power Apps Timer control reset with a button

In this section, we will see how to reset a Power Apps Timer control via a button. That means when the user clicks on the button, the timer will reset to 0.

To work with this scenario we are going to use the above example of the timer control with buttons, and the following steps are:

• On the Power Apps screen, add a button control.
• Rename the button as Reset.
• Insert the below expression on the button’s OnSelect property.

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

Where,

1. Reset: The name of the update context variable
2. true, false: The value of the variables
3. Display_Timer: The name of the Power Apps timer control

Save and preview the app. When the Reset button is clicked, it will rest the timer to 0 shown below:

Note: Always remember to stop and reset the timer. It will not work otherwise. So I recommend doing the following: Stop the timer, reset the timer, and then restart the timer.

This is how to reset the timer control via a button within the Power Apps.

Read Can’t convert this data type. Power Apps can’t convert this Date to a Boolean

Power Apps Timer Control Resume

Here’s how to resume the Power Apps Timer Control. That is, we will create a timer control that will stop when the user clicks on it. If the user clicks on the timer again, it will resume. The following steps must be taken to work with this scenario:

• On the Power Apps screen, add a circle.
• Then add a timer control to the screen and place it in front of the circle shown below:

• Insert the below expression on the timer’s OnSelect property.

OnSelect = UpdateContext({TimerState : true})

where TimerState is the name of the update context variable name and true is the variable value.

• Next, set the variable name in the Start property of the timer control.

Start = TimerState 

Let’s check out this app. We can see that when we click on the running timer, it stops and then resumes the timer.

This is how to resume a Power Apps timer control.

Read How to Patch Power Apps Date Picker

Power Apps Timer store value using the collection

In this section, we’ll look at how to use a collection to store the Timer control value within Power Apps. That is, once the timer started, the timer would save the results of each lap in a collection and display them to the user.

To work with this scenario we are going to use the above timer control, the following steps are:

• Insert the below expression on the Power Apps Timer’s OnSelect property.

OnSelect = Collect(CollRecordTime, {Lap: Timer1.Text})

where,

1. CollRecordTime: The name of the collection
2. Lap: The name of the collection header.
3. Timer1: The name of the Timer control.

• Add a data table to the Power Apps screen and connect it with the collection as the data source.

Preview the app and we can see when we click on the timer, the lap value will store in the data table shown below:

This is how to store the Power Apps timer value via collection.

Power Apps Timer control duration

The most important property in the Power Apps Timer control is Duration. This indicates how long the timer will run. It accepts milliseconds as time.

The default duration is 60000 which means 60000 milliseconds = 60 Seconds.

Assume we set the duration to 5000 milliseconds or 5 seconds. We can see that when the timer reaches 5 seconds, it will stop.

It allows us to extend this duration to 24 hours. This is how to work with the Power Apps duration.

Read How to Reset Power Apps Date Picker

Power Apps Timer control refresh data

Here, we will discuss how to refresh a data or data source using Power Apps Timer control. That means the data source will refresh in each specific time period.

As per the most recent case, there is a scenario. where we need to refresh the data source every 20 seconds and update the data within the Power Apps.

To fulfill this scenario, the following steps are necessary:

• Suppose, we have a SharePoint list named Projects having some columns and data shown below:

• Connect this data source to the Power Apps.
• Add a vertical gallery to the Power Apps and connect the above data source to display the above SharePoint data.

• On the above screen, add a Power Apps Timer control and place it near the vertical gallery.
• Set the Duration to 20000 i.e., 20 Seconds.

• Insert the below expression on the OnTimerEnd property of the Power Apps Timer control.

OnTimerEnd = Refresh(Projects)

• Also, set the Repeat property to true on the timer control. So that once the timer finishes the 20 seconds, it will repeat the process again.

Repeat = true

That’s all! Let’s check out the app. Insert a new item into the specified SharePoint list. Then, on the timer control, click. We can see that after 20 seconds, the data will refresh.

This is how to refresh data using the Power Apps timer control as well as this is how to refresh the data source once the timer end via Power Apps timer control.

Read How to use Power Apps date picker

How to switch screens using Power Apps Timer control?

In this section, we will see how to switch screens using the Power Apps Timer Control. That means once the specified time is over, it will navigate or switch to another screen.

I encountered a similar requirement while working on a recent project. According to the scenario, when the candidate opens the screen, it will display a question and multiple-choice options. The candidate must make a decision within 20 seconds. After 20 seconds, it will switch to another screen.

To work with this scenario, we have prepared a Power Apps screen having a specific question with some multiple choices shown below:

• On the above screen, add a Power Apps timer control, and place it on the top of the screen.
• Set the Duration to 20000 i.e., 20 Seconds.

Duration = 20000

• Insert the below expression into the Timer’s OnTimerEnd property to switch the screen.

OnTimerEnd = Navigate(Quesion2_Screen)

Where Quesion2_Screen refers to the other Power Apps screen with different questions and multiple choices.

That’s all! Let’s take a look at the app, and we can see that once the timer runs out, it will automatically navigate to the other screen shown below:

This is how to switch screens using the Power Apps Timer control.

Conclusion

From the above Power Apps Tutorial, we learned all about Power Apps Timer control and how to use this control based on different scenarios such as:

• Power Apps Timer control
• Power Apps Timer control properties
• Add a Power Apps Timer control
• Power Apps Timer control countdown
• Power Apps Timer control repeat
• Power Apps Timer control start
• Power Apps Timer control stop
• Power Apps Timer control reset with a button
• Power Apps Timer Control Resume
• Power Apps Timer store value using a collection
• Power Apps Timer control duration
• Power Apps Timer control refresh data
• Power Apps Timer control to switch screen

You may like the following power apps tutorials:

• Power Apps Collection [Complete Guide]
• Power Apps Collection Using Excel [Complete Guide]
• Power Apps Collection Using SharePoint List
• Power Apps Checkbox control within Gallery
• How to use Power Apps Check Box Control
• Power Apps Navigate Function
• Power Apps WeekNum and ISOWeekNum Function with Examples
• PowerApps nested gallery control example