Timer

Display a count-down or count-up timer

The Timer component displays a timer in various formats and can be configured to count down or up.

How to Use

First, configure the Timer component from the Configs tab in the right panel of the Builder. You can customize the update interval, display format, and count direction.

Then switch to the Data tab where you can set the initial and end time. Depending on which direction you set the Timer to count, it will use the initial and end time values. Once the end time has been reached, the On Timer End Trigger and any associated Actions will be fired.

To control the Timer, there are three Actions available - Reset Timer, Start Timer, and Stop Timer. You can Trigger these Actions from different components or on Screen load, for example.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Configuration Properties

Property	Description
Component Name	An optional descriptive name for the component.
Update Interval	How often the timer updates, in milliseconds. Defaults to 1000 ms (1 second).
Display Format	Choose how the timer's time is displayed. Options: `mm:ss` `hh:mm:ss` `hh:mm:ss:ms` `mm:ss:ms` `ss:ms`
Count Direction	Determines if the timer counts up or down. Options: `down` `up`

Data Properties

Property	Description
Initial Time	Sets the starting time of the timer in milliseconds. Defaults to `0`.
End Time	The time at which the timer will stop. When this time is reached, the On Timer End Trigger will fire

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Triggers

Name	Description
On Timer End	Runs when the value specified for the End Time is reached
On Timer Change	Runs when the timer increments/decrements according to the value specified for the Update Interval

Actions

Name	Description
Start Timer	Starts the selected Timer. Requires a Timer component to be on the Screen.
Stop Timer	Stops the selected Timer. Requires a Timer component to be on the Screen.
Reset Timer	Reset the selected Timer back to its Initial Time. Requires a Timer component to be on the Screen.

Updated 1 day ago