Page History

...

• 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

...

• 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".

...

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.

Actions & Variants

(Configured in Events)

...

• 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.

...