Countdown Timer

A drop-in numeric countdown block for OutSystems Reactive Web. Point it at a target date and time, and it displays a clean D / H / M / S countdown that ticks in real time. Pauses and resumes cleanly, fires an event when the target is reached, and cleans itself up on navigation. Pure client-side, no dependencies.

1. Overview

Countdown Timer shows the time remaining until a target moment as four styled number slots — Days, Hours, Minutes, Seconds — that update on a configurable interval. It's designed for the common cases where an app needs to show a live countdown: event launches, booking cutoffs, promo expirations, session-timeout displays, or any moment the user should be aware is approaching.

Key features

• Live D / H / M / S display, updating on a configurable interval.
• Pause and resume via a single input.
• OnComplete event fires exactly once when the target is reached — re-arms cleanly if the target is updated to a new future time.
• OnTick event fires each tick with the remaining seconds, for driving other UI.
• Cleans up its own interval on destroy — no orphan timers across navigation.
• No dependencies, no server calls.

2. Compatibility

3. Installation

1. Install Countdown Timer from the Forge (or the .oap via Service Center).
2. In Manage Dependencies, select the module and check the CountdownTimer block.
3. Apply and publish.

4. Quick start

CountdownTimer
   TargetDateTime = MyTargetDate
   IsRunning      = True
   TickIntervalMs = 1000

Handle OnComplete:
   ShowMessage("Time's up!")

Drop the block on a screen, bind TargetDateTime to a variable set to your target moment, and handle OnComplete to react when it hits zero. Everything else is optional.

5. Reference — the CountdownTimer block

6. How it works (in one line each)

• On the block's On Ready, it starts an interval that calls the internal Tick action every TickIntervalMs milliseconds.
• Each Tick computes RemainingSeconds from CurrDateTime() vs TargetDateTime, then splits it into D / H / M / S and updates the display.
• On the tick that crosses zero, OnComplete fires once (guarded so it can't fire repeatedly).
• On the block's On Parameters Changed, changes to IsRunning start or stop the interval; changes to TargetDateTime update the display immediately.
• On the block's On Destroy, the interval is cleared — no runaway timers after navigation.

7. Pause behavior (worth knowing)

The countdown is computed from "now vs. target," not from an internal accumulator. That means pause-then-resume-later doesn't shift the target — when you resume, the display reflects however much time is now actually left until the target.

This is the correct behavior for "countdown to a specific moment" (a scheduled event, a booking cutoff). If your use case is instead "countdown of N seconds from when the user pressed Start," you'd need to reset TargetDateTime on resume rather than toggle IsRunning — that pattern is a couple of lines in the consumer's action.

8. Styling

The block ships with a clean numeric look — four styled number blocks in a row, with tabular-numeric alignment so digits don't jitter as they change. All styling is on the ct-slot, ct-num, and ct-label classes. Override in your app theme to rebrand:

.ct-slot { background: #eef2ff; border-radius: 16px; }
.ct-num  { color: #4338ca; font-size: 34px; }
.ct-label { color: #6366f1; }

The block uses inline-flex, so it flows naturally next to other content and doesn't force a line of its own.

9. Usage examples

Countdown to a fixed target (event launch, promo end):

Screen variable: LaunchAt (Date Time) = whenever the launch is
CountdownTimer:
   TargetDateTime = LaunchAt
   IsRunning      = True
Handle OnComplete: navigate to the launched screen

Countdown of N seconds from now (session warning, wait timer):

Screen action Start:
   TargetDate = AddSeconds(CurrDateTime(), 60)
   IsRunning  = True
CountdownTimer:
   TargetDateTime = TargetDate
   IsRunning      = IsRunning

Driving another UI element from OnTick:

Handle OnTick(RemainingSeconds):
   ProgressPercent = 100 - (RemainingSeconds * 100.0 / TotalDurationSeconds)
   // bind ProgressPercent to a linear progress bar elsewhere on the screen

10. Troubleshooting / FAQ

The display shows 0d 00:00:00 immediately.TargetDateTime is in the past. Set it to a future moment. If it's dynamically computed (e.g. AddSeconds(CurrDateTime(), X)), make sure that assignment runs before the block reads it.

The display doesn't update after I change TargetDateTime.The block re-evaluates on parameter change, so this usually means the change isn't propagating. Confirm the block's TargetDateTime input is bound to a screen variable (not a static value), and that your action actually updates that variable.

Pause doesn't seem to freeze the countdown accurately.See section 7. The countdown is target-relative, not accumulator-based. Resuming shows the real time now left until the target, not "where it was" when paused.

Timers seem to be running in the background after I navigate away.The block clears its own interval on destroy. If you're seeing runaway ticks, confirm the block's On Destroy event is wired (it should call the built-in stop action). This is the single most important lifecycle step for anything using setInterval.

Multiple countdowns on the same screen conflict.Version 1 uses a single global timer state, so multiple simultaneous instances on the same page can interfere. If you need this, keep the countdowns on separate screens for now — proper multi-instance support is a candidate for v2.

11. Best practices

• Bind TargetDateTime to a variable, not a hardcoded value, so you can update it (reset, extend, etc.).
• Use TickIntervalMs = 1000 (the default) unless you have a specific reason to refresh faster — 1 Hz is fine for a numeric countdown and lighter on the browser.
• Handle OnComplete — otherwise the countdown just sits at zero.
• If you show multiple countdowns in the same session (across different screens), rely on the block's On Destroy to clean up between them.

12. Version history