Timer control in Power Apps

A control that can determine how your app responds after a certain amount of time passes.

Description

Timers can, for example, determine how long a control appears or change other properties of a control after a certain amount of time has passed.

Note

In Power Apps Studio, timers run only in Preview mode.

Key properties

Duration – How long a timer runs in milliseconds. The maximum is 24 hours expressed in milliseconds. Default is 60 seconds.

OnTimerEnd – Actions to perform when a timer finishes running.

Repeat – Whether a timer automatically restarts when it finishes running.

Additional properties

Align – The location of text in relation to the horizontal center of its control.

AutoPause – Whether the timer control automatically pauses if the user navigates to a different screen.

AutoStart – Whether the timer control automatically starts to play when the user navigates to the screen that contains that control.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

Color – The color of text in a control.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill – The background color of a control.

FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – The thickness of a control's border when the control is focused.

Font – The name of the family of fonts in which text appears.

FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – The distance between a control's top and bottom edges.

HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic – Whether the text in a control is italic.

OnSelect – Actions to perform when the user taps or clicks a control.

OnTimerStart – Actions to perform when a timer starts to run.

PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – The background color of a control when the user taps or clicks that control.

Reset – Whether a control reverts to its default value.

Size – The font size of the text that appears on a control.

Start – Whether the timer starts.

Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – Keyboard navigation order in relation to other controls.

Text – Text that appears on a control or that the user types into a control.

Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – Whether a line appears under the text that appears on a control.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Refresh( DataSource )

Examples

Show a countdown

  1. Add a timer, and name it Countdown.

    Don't know how to add, name, and configure a control?

  2. Set the timer's Duration property to 10000 and its Repeat and Autostart properties to true.

  3. (optional) Make the timer easier to read by setting its Height property to 160, its Width property to 600, and its Size property to 60.

  4. Add a label, and set its Text property to this formula:
    "Number of seconds remaining: " & RoundUp(10-Countdown.Value/1000, 0)

    Want more information about the RoundUp function or other functions?

    The label shows how many seconds remain before the timer restarts.

Animate a control

  1. Add a timer, and name it FadeIn.

    Don't know how to add, name, and configure a control?

  2. Set the timer's Duration property to 5000, its Repeat property to true, and its Text property to Toggle animation.

  3. (optional) Make the timer easier to read by setting its Height property to 160, its Width property to 600, and its Size property to 60.

  4. Add a label, set its Text property to show Welcome! and set its Color property to this formula:
    ColorFade(Color.BlueViolet, FadeIn.Value/5000)

    Want more information about the ColorFade function or other functions?

  5. Select the timer button to start or stop the animation. The text in the label fades to white, returns to full intensity, and repeats the process.

Accessibility guidelines

The same guidelines for the Button control apply to the Timer control if users can interact with it.

Background timers

Background timers run automatically and are hidden. Use them in a supporting role where the elapsed time is of little interest to the user. For example, you can refresh data every minute or show a notification message only for a certain amount of time.

Background timers should have their Visible property set to false so that they are hidden from all users.

Timing considerations

If a Timer runs automatically, consider whether users have enough time to read and use content. Keyboard and screen-reader users may need more time to react to a timed event.

Any of these strategies is sufficient:

  • Allow users to cancel the timed event.
  • Allow users to adjust the time limit before it begins.
  • Warn 20 seconds before the time limit expires and provide an easy way to extend the limit.

Some scenarios are exempt from these requirements. Learn more in the WCAG 2.0 guideline for time limits.

Screen reader support

  • If a timer triggers changes on the current screen, use a live region to tell screen-reader users what changed.

    Note

    If the timer is visible and running, screen readers will announce the elapsed time every five seconds.

  • Don't use the Text property of a control for time-sensitive and important information. Screen readers won't announce changes to Text.

  • For interactive timers:

    • Text must be present.
    • Consider adding a Label control to show the elapsed time. Use the timer's Text property to instruct the user to start or stop the timer.