Power Apps Timer Control [With Examples]

Did you have any requirements to work with Power Apps Timer Control and are facing difficulties using it? Then, don’t worry.

This Microsoft Power Apps tutorial will explain everything in detail about Power Apps Timer Control and all the key properties of it.

Furthermore, we will learn how to add a Power Apps Timer control and explore various examples of using a timer control in Power Apps.

Power Apps Timer Control

Microsoft’s PowerApps offers a timer control feature that enables the app to respond automatically after a specified period.

The timer’s duration is measured in milliseconds and can be customized based on the user’s needs.

The maximum duration for the timer is 24 hours, expressed in milliseconds. A PowerApps timer’s default duration is “60000” [60 seconds].

Timer Control in Power Apps

Power Apps Timer Control Properties

Here, I will explain the properties of Power Apps timer control.

Whether the timer starts or begins.Description
AlignThe place of text concerning the horizontal center of its corresponding control.
AutoPauseIs the timer control designed to pause automatically if the user navigates to a different screen?
AutoStartWhether the timer control initiates playback automatically upon navigating to the screen containing it
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
ColorWe can define the text color of the control.
DisabledBorderColorWhen the DisplayMode property of the control is set to Disabled, it indicates a color for the control’s border.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
DurationThe duration of the timer is expressed in milliseconds. The maximum duration is 24 hours, while the default is 60 seconds.
FillWe can define the background color of the control.
HoverBorderColorBorder color of a control when the user hovers their mouse pointer over it.
HoverColorColor of a text when the user hovers their mouse pointer over it.
OnSelectWhen the user clicks on a control, it specifies what action to perform.
OnTimerEndColor is to be defined when the user clicks on the control.
OnTimerStartWhen the timer starts, what action is to be performed?
PressedColorWhat actions should be taken when a timer has finished running?
RepeatWhen a timer expires, specifically whether it should automatically restart or not.
ResetResetting the controls to their default value can be beneficial.
StartWhether the timer begins or what.
TextText should appear on the control.
VisibleHere, we can specify whether the timer control can be visible.

These are the properties of a Power Apps Timer control.

How to Add a Power Apps Timer Control

Here, I will show you how to insert a timer control in Power Apps:

  • Sign into your Power Apps with your valid Microsoft 365 Credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert a Timer control.[Click on +Insert -> Expand Input -> Select Timer].
Power Apps Timer Control
  • By default, the timer control name will be “Timer1“; you can Rename it as “tmr” based on your requirement.
Power Apps Timer Countdown

This is how we can insert a Power Apps timer control.

How to use Power Apps Timer Control

This section will show examples of working with a Power Apps timer control.

Example 1:

I have created a Power Apps Canvas app and then added a Timer control and a Rating Control. When the user clicks on the timer control, the timer will start counting seconds, up to 10 seconds. Within those mentioned seconds, the users can provide the rating.

Power Apps Timer Control

Let me show you how to achieve this:

  • On the Power Apps screen, Insert a Rating control, as shown below:
How to use timer control in Power Apps
  • Insert a Timer control -> Set its Duration property to:
10000

Where,

  1. 10000 = I have set the timer control duration to 10 seconds.
How to add Power Apps timer control
  • Now, I will rename the timer control to “tmr_UserFeedback” as shown below:
Power Apps timer duration
  • Once the app is ready, SavePublish, and Preview the app. Upon the user clicking on the timer control, the timer will start counting seconds, up to reaching a maximum of 10 seconds.
Using Power Apps timer control

Example 2: [Power Apps CountDown timer tick backward]

In this example, I will explain how the Power Apps countdown timer ticks backward, and when the timer ends, it navigates to a new screen.

I have added a Countdown timer and Reload icon on the Power Apps screen. Later, set the timer duration to 5 sec, and when the user previews the app, the timer will automatically start counting seconds backward, and the reload icon will rotate until the timer ends.

When the timer reaches the maximum of 5 seconds, it will navigate to the new screen.

Using Power Apps timer control

Follow the below steps to achieve this:

  • On the Power Apps screen, insert a Timer Control -> Set it below property to:
Duration = 5000

AutoStart = true

Where,

  1. 5000 = I have set the timer control duration to 5 seconds.
Power Apps Timer AutoStart
  • Select the Timer control -> Set its Text property to:
Text(
    Time(
        0,
        0,
        (tmr_Quiz.Duration - tmr_Quiz.Value) / 1000
    ),
    "hh:mm:ss"
)

Where,

  1. tmr_Quiz = Timer control name
Add timer control in Power Apps
  • Insert a Reload icon -> Set its Rotation property to:
tmr_Quiz.Value/2
How to work with Power Apps timer control
  • Upon completion of the timer, it should automatically redirect to another screen. For that, select a Timer control -> Set its OnTimerEnd property to:
Navigate('Quiz Screen');

Where,

  1. Quiz Screen = Screen name
Power Apps timer control example
  • SavePublish, and Preview the app. The timer control will automatically start counting backward from 5 seconds, and the reload icon will rotate until the timer ends.
Power Apps Timer Control
  • Upon the timer completion, it will automatically redirect to another screen, as shown below:
How to use Power Apps timer control with examples

Example 3:

I have added a Timer control, a Reload icon, and a Text label control on the Power Apps screen. When the user previews the app, the timer will automatically start counting seconds up to 60 sec, and the reload icon will rotate until the timer ends.

The text label will display the text of how many seconds are left.

How to work with a Power Apps Timer control

Let me show you how to achieve this:

  • On the Power Apps screen, insert a Timer Control -> Set its AutoStart property to:
true
How to add timer control in Power Apps
  • Insert a Text label control -> Set its Text property to:
"Event Starts in:  " & RoundUp(
    60 - tmr_PowerPlatformEvent.Value/1000,
    0
) & "Seconds"
Power Apps Timer
  • Insert a Reload icon -> Set its Rotation property to:
tmr_PowerPlatformEvent.Value/2

Where,

  1. tmr_PowerPlatformEvent = Timer control name
How to work with timer in Power Apps.
  • SavePublish, and Preview the app. The timer control will automatically start counting from 60 seconds, and the reload icon will rotate until the timer ends. Later, the text label will display the text of how many seconds are left
Use Power Apps timer control

This is how we can work with a Power Apps timer control.

Conclusion

This Microsoft Power Apps tutorial explained what a Power Apps Timer Control is and how to use it.

In addition, I have shown you the key properties of Powe Apps Timer Control and how to add Timer Control in Power Apps.

Lastly, we have explored various examples of using slider control in Power Apps.

Moreover, you may like some more Power Apps tutorials: