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

Date Interval Counter

(not verified)

Overview

• The Dynamic Date Interval Counter Component calculates and displays the time difference between a specified date and the current date.
• It is useful for showing durations such as “days since event” or “time elapsed since creation.”
• The component can handle both single objects and collections of data.
• It extracts dates from specified fields and formats the elapsed time in different ways.

[IMAGE PLACEHOLDER: Date Interval Counter displaying elapsed time example]

Specs

Tokens

Structure

• The component consists of a single display field that presents a calculated value.
• The format of this value changes based on configuration, for example showing only days or days with hours.

(Configured in General Properties)

• displayName – Sets the display name of the component shown in the structure panel. For example, "Order Age Counter" allows for easy identification of the component's purpose in the component structure, making it easier for developers to locate and work with this specific counter.

(Configured in Datasource)

• dateDataField – Specifies the field name in the data source that contains the date to measure from. For example, "createdAt" would extract the creation date from each record to calculate the elapsed time. This property supports dot notation to access nested properties like "order.submitDate".
• dataSourceType – Specifies whether the component should extract the date from a single object or from a collection of objects. Options include "single" or "collection". For example, when set to "collection", the component will look for the date field in the first item of an array or the first content item of a paginable response.

[IMAGE PLACEHOLDER: Structure of Date Interval Counter showing data field and data source type]

Styling

(Configured in Visual Properties)

• paddingClass – Configures spacing around the counter using CSS classes. For example, "p-3" adds medium padding on all sides of the component, improving its visual spacing within its container.

(Configured in Visibility)

• displayConditions – Defines conditions for displaying the component. This allows showing or hiding the counter based on complex rules involving form values, user roles, or application state. For example, the counter might only be shown when a ticket status is "open" or "pending".

[IMAGE PLACEHOLDER: Styling options of Date Interval Counter showing display name, padding, and display conditions]

Actions & Variants

(Configured in Events)

• events – Configures the events that the component can trigger and respond to:
• ON_INIT – Triggered when the counter component is initialized. Can be used to perform setup operations when the component first appears.
• ON_GLOBAL_PARAMETERS_CHANGE – Triggered when global parameters affecting the counter change. Can be used to refresh calculations when underlying data changes.
• ON_DESTROY – Triggered when the counter component is removed from the DOM. Useful for cleanup operations and releasing resources.

Authorization

(Configured in Authorization)

• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "sensitiveDataAccess" restricts the counter visibility to users with specific data access permissions, allowing for role-based display of time-sensitive information.

Tests

(Configured in Testing Hooks)

• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "order-age-counter" allows test scripts to reliably locate this component during automated testing.
• enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the counter can be highlighted during onboarding or tutorial flows to explain its meaning to users.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Ticket Age", "de-DE": "Ticket-Alter"} provides clear identification during guided tours.
• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This shows how long the ticket has been open", "de-DE": "Dies zeigt, wie lange das Ticket geöffnet ist"} provides detailed context during guided tours.

Links

• Figma: tba
• Live style guide: tba

Guidelines

Usage

• Use the counter to show elapsed time since a specific date taken directly from your data via dateDataField; pick a field path (supports dot notation like order.submitDate) that reliably resolves to a valid date.
• Select precision with durationType: days for coarse status, daysWithHours for moderate precision, daysWithHoursAndMinutes for time‑sensitive contexts.
• Name the instance clearly for authors via displayName so it’s easy to find in the structure panel.

Sizing & Layout

• Adjust outer spacing only with paddingClass.
• Match padding intensity to context using paddingClass values (lighter in dense metadata, heavier when the counter needs separation).
• Keep the visual footprint stable by fixing a single durationType per instance; avoid runtime format switches.

Data-Driven / Conditional Behavior

• Hide the counter when the source date is missing or invalid using displayConditions bound to dateDataField.
• For dataSourceType: collection, ensure dateDataField exists on the first item; otherwise hide with displayConditions to avoid misleading “0 days” outputs.
• Prevent flapping by keeping displayConditions mutually exclusive within the same rule set.
• Align units across comparable counters by choosing the same durationType where users make side-by-side comparisons.

Visibility & Authorization

• Restrict visibility based on user roles or policies using visibilityPolicySetId for sensitive durations.

Dos & Don’ts

Accessibility

• Hide non-meaningful output by using displayConditions when dateDataField is empty or invalid.
• Provide localized guidance in tours using enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.
• Match durationType precision to the task so assistive tech announces sufficient context.
• Keep format consistent per instance and update on events.ON_GLOBAL_PARAMETERS_CHANGE to avoid surprise changes.
• Use visibilityPolicySetId to prevent exposing sensitive time information to unauthorized users.