(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Date Interval Counter
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
| Token |
Description |
| displayName |
Display name of the component in the structure panel |
| dateDataField |
Field name in the data source that contains the date |
| durationType |
Format of the time interval (days, daysWithHours, daysWithHoursAndMinutes) |
| paddingClass |
CSS spacing class for visual padding |
| dataSourceType |
Defines whether the date comes from a single object or collection |
| events |
Configures component events |
| ON_INIT (Events) |
Event triggered when component initializes |
| ON_GLOBAL_PARAMETERS_CHANGE (Events) |
Event triggered when global parameters change |
| ON_DESTROY (Events) |
Event triggered when component is removed |
| visibilityPolicySetId |
Controls visibility using policy sets |
| displayConditions |
Rules for when the component is displayed |
| dataTestId |
ID for automated testing |
| enableAsHotspot |
Enables guided tour hotspot functionality |
| guidedTourHotSpotTitle |
Title for guided tour hotspot (supports translations) |
| guidedTourHotSpotDescription |
Description for guided tour hotspot (supports translations) |
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.
Guidelines
[NO DATA AVAILABLE]
Accessibility
[NO DATA AVAILABLE]