Timer
The Avonni Timer component tracks elapsed or remaining time directly on a Lightning record page. Users can start, pause, stop, and reset the timer, and the final value can be saved automatically to a Salesforce field — useful for time tracking, SLAs, and timed workflows.
Overview
The Timer can count up from zero or down from a set duration, display time in a range of formats, and repeat when it reaches its duration. Its start, pause, stop, and reset controls are fully customizable, and each state change can drive an interaction. When Auto Save On Stop is enabled, the elapsed value is written back to a record field so the time is persisted without extra flow logic.
Common use cases
Track time spent on a case or work order and save it to a field on stop.
Run a count-down for a timed task, quiz, or SLA deadline.
Provide a stopwatch users can start and pause while working a record.
Configuration
To configure the Timer, select it on the canvas. The Edit Timer panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Content
Value sets a default starting value for the timer, in milliseconds.
Type controls the direction of the timer. Choose Count Up (default) to count from zero, or Count Down to count down from the configured duration.
Time Format sets how the time is displayed. Options are HH:MM:SS (default), HH:MM, MM:SS, HH, MM, SS, and Custom.
Custom Time Format defines a custom format string using hh, mm, ss, and ms tokens separated by : or . (for example, hh:mm:ss.ms). Requires Time Format = Custom.
Auto Start starts the timer automatically when the component is rendered.
Auto Reset After Stop resets the timer automatically after it is stopped.
Auto Save On Stop saves the timer value automatically when the timer is stopped. Enabling it reveals the Auto Save group below.
Duration sets how long the timer runs, in milliseconds.
Repeat restarts the timer when it reaches the duration. Requires Duration to be set.
Interval sets how often the timer updates, in milliseconds (advanced).
Auto Save
This group is only available when Auto Save On Stop is enabled. It defines where the elapsed value is written when the timer stops.
Object API Name selects the object to update.
Field selects the field on that object to update with the timer value when the timer is stopped.
Record Id is the Id of the record to update. Defaults to the record from the current context ({!$Component.RecordId}); set it explicitly to update a different record.
Labels
Label displays a label for the timer.
Show Time Labels displays unit labels (hours, minutes, seconds) alongside the time.
Time Labels Format sets how those labels read: Short (H, M, S) or Long (Hours, Minutes, Seconds). Requires Show Time Labels to be enabled.
Time Labels Position places the labels on the Top (default) or Bottom. Requires Show Time Labels to be enabled.
Buttons
Buttons Position places the control buttons on the Left (default), Right, Top, or Bottom of the timer.
Each button exposes a Label and an optional Icon:
Start Button Label (default Start) and Start Button Icon.
Pause Button Label (default Pause) and Pause Button Icon. Disable Pause Button removes the pause control (advanced).
Stop Button Label (default Stop) and Stop Button Icon (default
utility:stop).Display Reset Button adds a reset control; its Reset Button Label (default Reset) and Reset Button Icon (default
utility:undo) appear only when it is enabled.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the Timer. Configure them from the Interactions tab of the Edit Timer panel.
Start
Fires when the timer is started. Use it to log a start time or update related records.
Pause
Fires when the timer is paused. The Value On Pause output captures the elapsed value at that moment.
Stop
Fires when the timer is stopped. Use it together with Auto Save On Stop — or your own logic — to persist the elapsed time.
Save
Fires when the timer value is saved.
Output Variables
The Timer exposes these output variables you can reference elsewhere on the page after the user interacts with it.
Timer State
State
Text (String)
The current state of the timer (for example, running, paused, or stopped).
Value On Pause
Number
The elapsed value of the timer at the moment it was paused, in milliseconds.
Example: Bind Value On Pause to a text component so a user always sees how much time was logged when they last paused work on a case.
Styling
Configure the Timer's appearance from the Style tab of the Edit Timer panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the component.
Color / Size: Set the border color and thickness.
Styles the timer label.
Text Color / Font Family / Font Size / Font Style / Font Weight: Set the label color and typography.
Styles the timer's displayed time value.
Text Color / Font Family / Font Size / Font Style / Font Weight: Set the time color and typography.
Styles the unit labels shown when Show Time Labels is enabled.
Text Color / Font Size / Font Style / Font Weight / Font Family: Set the label color and typography.
Last updated
Was this helpful?