(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Countdown

The Countdown shows time left until a target date.
You set the target with the date token (Date object or parseable string).
The format controls which units appear (days, hours, minutes, seconds).
It updates on a set interval (default 1000 ms) and can show custom text when finished.
It supports lifecycle and context events, including a fired event when the timer expires.

Example Countdown

Token	Short description
displayName	Human-readable name shown in the structure panel.
date	Target date/time for the countdown (Date or parseable string).
format	Which time units to show (days / hours / minutes / seconds).
updateIntervalInMS	Refresh rate in milliseconds (default 1000).
expiredText	Text shown once the countdown reaches/passes the target time.
widthAuto	Auto-size to content (`true`) or fill container (`false`).
showTimerIcon	Toggle a decorative timer/clock icon.
events	Container for the component’s event handlers.
ON_INIT (Events)	Fires when the component is initialized (setup).
ON_DESTROY (Events)	Fires when the component is removed (cleanup).
ON_GLOBAL_PARAMETERS_CHANGE (Events)	Fires when relevant global parameters change.
ON_DATA_HUB_CHANGE (Events)	Fires when the Data Hub context/state changes.
ON_EXPIRED (Events)	Fires once when the target time is reached/passed.

(Configured in General Properties)

displayName – Sets the display name of the component shown in the structure panel. For example, "Countdown until finish" allows for easy identification of this countdowns's purpose in the component structure, making it easier for developers to locate and work with this component.
date - The target date for the countdown. Can be a Date object or a string that can be parsed into a date. It can be formatted maualy or by using a template.(Example: new Date() or "2025-12-31T23:59:59")

Dropdown to format date source Dialog to format date source

(Configured in Visual Properties)

format - Sets the format of the countdown display. Controls which time units are shown. Possible formats:
- Day with hours and minutes and seconds
- Days with hours and minutes
- Hours with minutes and seconds
- Days with hours, Hours with minutes, or Minutes with seconds
- Days, Hours, Minutes, or Seconds

Format minutes Format hours with minutes and seconds Format day with hours and minutes and seconds

updateIntervalInMS - Configures the interval in milliseconds for updating the countdown timer. Standard is 1000ms.
expiredText - Message shown after the countdown completes (when the target time is reached or passed). It replaces the timer value in-place and remains visible until the countdown is reset/unmounted.
widthAuto – Controls whether the countdown should automatically size to fit its content. When set to true, the label will take only as much width as needed for the text; when false, it will fill the available space in its container.
showTimerIcon - Controls whether a decorative timer/clock icon is rendered alongside the countdown value.

(Configured in Events)

events – Configures the events that the component can trigger and respond to.
- ON_INIT – Triggered when the label component is initialized. Can be used to perform setup operations like setting initial context values.
- ON_DESTROY – Triggered when the label component is removed from the DOM. Useful for cleanup operations and releasing resources.
- ON_GLOBAL_PARAMETERS_CHANGE – Triggered when global parameters that might affect the component change.
- ON_DATA_HUB_CHANGE - Emitted whenever the Data Hub’s active context or state changes.
- ON_EXPIRED - Fires once when the countdown reaches or passes its target time.

Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/countdown

Use the component to show time remaining until a specific moment by setting a precise date.
Show only necessary units using format to keep the readout scannable.
Provide a clear completion message via expiredText so the state change is unambiguous.

Choose intrinsic width for inline placements with widthAuto: true; fill available width with widthAuto: false.
When space is tight, shorten the string by selecting a more compact format (e.g., omit seconds).

Match urgency to refresh cadence with updateIntervalInMS (e.g., 1000 ms for general use; slower for long horizons).
Avoid visual churn by selecting a stable unit set with format (e.g., “days + hours” for multi-day spans).
Provide both visible and programmatic completion using expiredText + events.ON_EXPIRED.

Do	Don’t	Article setting(s)
Set `date` with an unambiguous ISO string or `Date` object.	Use ambiguous strings like `12/07/25`.	`date`
Show only needed units.	Always include seconds for multi-day timers.	`format`
Provide a clear completion line.	Leave the view blank at 0.	`expiredText`
Use the expiry event for follow-ups.	Poll the UI for zero.	`events.ON_EXPIRED`
Keep humane refresh rates (~1000 ms).	Update multiple times per second.	`updateIntervalInMS`
Size appropriately for placement.	Force full width when space is tight.	`widthAuto`
Treat the icon as secondary.	Convey state only via the icon.	`showTimerIcon`
React to parameter changes.	Ignore global changes after init.	`events.ON_GLOBAL_PARAMETERS_CHANGE`, `date`

Completion is conveyed in text by swapping to expiredText; a deterministic signal is available via events.ON_EXPIRED.
Live updates can be throttled with updateIntervalInMS to reduce unnecessary change announcements.
Units can be fixed with format to keep the readout predictable.
The timer/clock is decorative; avoid relying on it alone for meaning using showTimerIcon.
For long horizons, prefer formats that reduce cognitive load (e.g., show “days + hours”) via format.
Use a moderate refresh cadence (≥1000 ms) for non-urgent timers via updateIntervalInMS.
Make expiredText concise and literal so completion is clear without color or icons.