Page History
...
| 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 Datasource 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".
- 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.
...
(Configured in 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".
...
Actions & Variants
(Configured in Event Actions PropertiesEvents)
- 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.
...
(Configured in 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.
...
(Configured in Testing Hooks Properties)
- 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.
...
