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

Date Interval Counter

The Dynamic Date Interval Counter Component calculates and displays the time difference between a specified date from a data source and the current date. This component is particularly useful for showing durations such as "days since event" or "time elapsed since creation" in various formats. It can handle both single objects and collections of data, extracting dates from specific fields to perform time calculations.

Properties

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.

Visual Properties

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

• durationType - Determines how the time interval should be formatted and displayed. Options include "days" (shows only the number of days), "daysWithHours" (shows days and hours), or "daysWithHoursAndMinutes" (shows days, hours, and minutes). For example, selecting "daysWithHours" would display a result like "5 days 3 hours".

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

Datasource Properties

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

Event Actions Properties

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

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

Visibility Properties

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

Testing Hooks Properties

• dataTestId - Sets the testing hook ID for automated testing. For example, setting 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.