Timer Controller

A Timer Controller is a special variable type that controls timer widgets, allowing you to start, pause, resume, and reset timers programmatically. It's essential for building countdown timers, stopwatches, or any time-based functionality.

Supported Widgets

The Timer Controller can be used with:

• Timer

When to Use

Use a Timer Controller when you need to:

• Control countdown timers programmatically

• Build stopwatch functionality

• Implement time-based challenges or games

• Create OTP/verification code timers

• Pause and resume timers based on user actions

• Reset timers for repeated use

Creating a Timer Controller

1. Navigate to Variables in your project

2. Click Add Variable

3. Select Timer Controller as the type

4. Give it a descriptive name (e.g., countdownController, otpTimerController)

Binding to Widgets

Timer Widget Example

Timer:
  Controller: ${countdownController}
  Duration: 60
  Type: Countdown
  
  On Tick:
    Set State: remainingSeconds = ${currentTime}
  
  On Complete:
    Toast:
      Message: "Time's up!"

Controller Methods

Use the Control Object action to invoke these methods on the controller.

start

Starts the timer from the beginning.

No parameters required.

When to Use:

• Begin a countdown timer

• Start a stopwatch

• Initiate time-based challenges

Example:

On Start Button Click:
  Control Object:
    Object: ${countdownController}
    Method: start

---

resume

Resumes a paused timer from where it left off.

No parameters required.

When to Use:

• Continue a paused timer

• Resume after user interaction

• Unpause functionality

Example:

On Resume Button Click:
  Control Object:
    Object: ${countdownController}
    Method: resume

---

pause

Pauses the timer, keeping the current time.

No parameters required.

When to Use:

• Allow users to pause countdowns

• Pause during app backgrounding

• Temporary timer suspension

Example:

On Pause Button Click:
  Control Object:
    Object: ${countdownController}
    Method: pause

---

reset

Resets the timer back to its initial duration.

No parameters required.

When to Use:

• Restart timer from beginning

• Reset after completion

• Provide "Try Again" functionality

Example:

On Reset Button Click:
  Control Object:
    Object: ${countdownController}
    Method: reset

---

Common Use Cases

1. OTP Verification Timer

Countdown timer for resending OTP codes.

Setup:

Variable: otpTimerController (Timer Controller)
Variable: canResend (Boolean)
Initial Value: false

Timer:
  Controller: ${otpTimerController}
  Duration: 30
  Type: Countdown
  Auto Start: true
  
  On Complete:
    Set State: canResend = true

Implementation:

Button (Resend OTP):
  Enabled: ${canResend}
  On Click:
    API Call: resendOTP
    Set State: canResend = false
    Control Object:
      Object: ${otpTimerController}
      Method: reset
    Control Object:
      Object: ${otpTimerController}
      Method: start

2. Quiz Timer with Pause/Resume

Timer for timed quizzes with pause functionality.

Setup:

Variable: quizTimerController (Timer Controller)
Variable: isPaused (Boolean)
Initial Value: false

Timer:
  Controller: ${quizTimerController}
  Duration: 300
  Type: Countdown
  Auto Start: false
  
  On Complete:
    Go To Page: ResultsPage

Implementation:

Button (Start Quiz):
  On Click:
    Control Object:
      Object: ${quizTimerController}
      Method: start

Button (Pause/Resume):
  Text: ${if(isPaused, 'Resume', 'Pause')}
  On Click:
    If ${isPaused}:
      Control Object:
        Object: ${quizTimerController}
        Method: resume
      Set State: isPaused = false
    Else:
      Control Object:
        Object: ${quizTimerController}
        Method: pause
      Set State: isPaused = true

3. Workout Interval Timer

Timer that resets and restarts for interval training.

Setup:

Variable: intervalController (Timer Controller)
Variable: currentInterval (Number)
Initial Value: 1

Variable: totalIntervals (Number)
Value: 5

Timer:
  Controller: ${intervalController}
  Duration: 45
  Type: Countdown
  Auto Start: true
  
  On Complete:
    If ${lt(currentInterval, totalIntervals)}:
      Set State: currentInterval = ${sum(currentInterval, 1)}
      Control Object:
        Object: ${intervalController}
        Method: reset
      Control Object:
        Object: ${intervalController}
        Method: start
    Else:
      Toast:
        Message: "Workout complete!"

4. Stopwatch with Lap Times

Stopwatch that can be paused and reset.

Setup:

Variable: stopwatchController (Timer Controller)
Variable: isRunning (Boolean)
Initial Value: false

Timer:
  Controller: ${stopwatchController}
  Type: Stopwatch
  Auto Start: false

Implementation:

Button (Start/Pause):
  Text: ${if(isRunning, 'Pause', 'Start')}
  On Click:
    If ${isRunning}:
      Control Object:
        Object: ${stopwatchController}
        Method: pause
      Set State: isRunning = false
    Else:
      If ${isEqual(currentTime, 0)}:
        Control Object:
          Object: ${stopwatchController}
          Method: start
      Else:
        Control Object:
          Object: ${stopwatchController}
          Method: resume
      Set State: isRunning = true

Button (Reset):
  On Click:
    Control Object:
      Object: ${stopwatchController}
      Method: reset
    Set State: isRunning = false

5. Session Timeout Warning

Warning users before session expires.

Setup:

Variable: sessionController (Timer Controller)
Variable: showWarning (Boolean)
Initial Value: false

Timer:
  Controller: ${sessionController}
  Duration: 1800
  Type: Countdown
  Auto Start: true
  
  On Tick:
    If ${isEqual(currentTime, 60)}:
      Set State: showWarning = true
  
  On Complete:
    Go To Page: LoginPage
    Toast:
      Message: "Session expired"

Implementation:

Dialog (Session Warning):
  Visible: ${showWarning}
  Title: "Session Expiring"
  Message: "Your session will expire in 1 minute"
  
  Button (Continue):
    On Click:
      API Call: refreshSession
      Control Object:
        Object: ${sessionController}
        Method: reset
      Control Object:
        Object: ${sessionController}
        Method: start
      Set State: showWarning = false

Best Practices

• One controller per timer: Each Timer widget should have its own controller

• Use descriptive names: Name controllers after their purpose (quizTimerController, otpTimerController)

• Track timer state: Use variables to track whether timer is running/paused for better UI control

• Handle completion: Always provide On Complete handlers to manage what happens when timer ends

• Reset appropriately: Reset timers before restarting to ensure they begin from the correct duration

• Provide visual feedback: Show clear UI indicators for timer state (running, paused, completed)

• Consider auto-start: Decide if timers should start automatically or require user action

Common Patterns

Start Timer

On Button Click:
  Control Object:
    Object: ${timerController}
    Method: start

Pause/Resume Toggle

On Toggle Click:
  If ${isPaused}:
    Control Object:
      Object: ${timerController}
      Method: resume
  Else:
    Control Object:
      Object: ${timerController}
      Method: pause

Reset and Restart

On Restart Click:
  Control Object:
    Object: ${timerController}
    Method: reset
  
  Control Object:
    Object: ${timerController}
    Method: start

Conditional Start

On Start Click:
  If ${isValid}:
    Control Object:
      Object: ${timerController}
      Method: start
  Else:
    Toast:
      Message: "Complete the form first"

Auto-Restart on Complete

On Timer Complete:
  If ${shouldContinue}:
    Control Object:
      Object: ${timerController}
      Method: reset
    Control Object:
      Object: ${timerController}
      Method: start

Timer States

Understanding timer states helps manage control flow:

State	Description	Next Action
Not Started	Initial state, duration at max	start to begin
Running	Timer is actively counting	pause to pause
Paused	Timer stopped but time retained	resume to continue, reset to restart
Completed	Timer reached 0 (countdown) or max (stopwatch)	reset to restart

Troubleshooting

Controller Not Working

• Ensure the controller variable is properly created

• Check that the controller is bound to the Timer widget using ${controllerName}

• Verify the widget supports Timer Controller

Timer Not Starting

• Confirm start() is being called

• Check that timer has a valid duration configured

• Ensure timer isn't already running

Pause/Resume Not Working

• Verify timer is in the correct state (running for pause, paused for resume)

• Check that the correct method is being called

• Ensure controller is properly bound

Reset Not Working

• Confirm reset() is being invoked correctly

• Check that timer widget has a valid initial duration

Related Documentation

• Timer - Timer widget reference

• Control Object Action - Invoke controller methods

• Variables Overview - Learn about all variable types