Skip to content

Timeline dashboard widget

The timeline dashboard widget offers users a chronological view of events, tasks, or milestones, enabling them to quickly scan items by date.

Usage

The timeline dashboard widget displays time-sensitive data and ordered events, allowing users to view key updates without leaving the current page.

Timeline dashboard widget

When to use

  • In dashboards and tile layouts.
  • When displaying frequently updated chronological data.
  • When users need an at-a-glance overview of past and present events.
  • To highlight time-sensitive updates, such as comments, milestones, or activities.

Best practices

  • Use appropriate timestamps, such as full dates for history and relative time (e.g., "2 hours ago") for recent events.
  • Use the footer link to direct users to more detailed information about the timeline items.
  • Make effective use of indicators (icons or status) to provide quick visual cues about the nature of each event.
  • Ensure that the timeline is regularly updated with accurate and relevant information, to maintain user trust.
  • Use empty state to represent empty values.

Design

Elements

Timeline dashboard widget elements

  1. Heading, 2. Header action (optional), 3. Footer link (optional), 4. Indicator, 5. Timestamp, 6. Title, 7. Description (optional), 8. Action (optional)

The indicator displays an icon or status. The header action can support any action as needed.

Timeline dashboard widget variants

Content overflow is managed with an internal scrollbar, and the widget height can be configured to either full or fixed height to fit layout requirements.

This component is flexible enough to accommodate additional options, allowing for tailored solutions.

Item actions

Each timeline item can have an associated action, which can be configured to navigate to the related item or perform additional operations (e.g., update or redo). If multiple actions are available, they should be collapsed into a menu.

Timeline dashboard widget actions

Code

We support the timeline widget in two ways:

  • Angular components that are configured by data objects to support minimum effort on the application development.
  • HTML and CSS-based to support maximum flexibility.

Timeline widget component

To simplify the usage and reduce the code, Element offers a Angular component as wrapper with streamlined inputs. The component is a wrapper around the card and the <si-timeline-widget-body>.

import { SiTimelineWidgetComponent } from '@siemens/element-ng/dashboard';


@Component({
  :
  imports: [SiTimelineWidgetComponent]
})

SiTimelineWidgetComponent API Documentation

selector
si-timeline-widget

Input Properties

Name Type Default Description
accentLine
 AccentLineType Optional accent line
disableAutoLoadingIndicator
 boolean false Option to disable automatic start of skeleton loading indication.
heading
 TranslatableString Timeline widget header text.
initialLoadingIndicatorDebounceTime
 number 300 Initial delay time in milliseconds before enabling loading indicator. Only used once initially during construction.
Link Link that leads the user to more information or triggers and action. The link.title is displayed. The title will be translated.
numberOfItems
 number 4 Number of skeleton progress indication items.
primaryActions
 (MenuItem | ContentActionBarMainItem)[] [] Input list of primary action items. Supports up to 4 actions and omits additional ones.
secondaryActions
 (MenuItem | MenuItem)[] [] Input list of secondary action items.
showDescription
 boolean true Whether to show or hide the description row during skeleton progress indication.
showLoadingIndicator
 boolean false Input to start and stop the skeleton loading indication.
value
Required		 (SiTimelineWidgetItem[] | undefined) The main value to be displayed. If no value is set, the skeleton indicates the loading of the value. Disable the automatic loading mechanism by setting SiWidgetBodyBaseComponent.disableAutoLoadingIndicator .

Attributes and Methods

Name Type Default Description
ngOnInit()
 () => void A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
(readonly) showLoadingIndicator
 Signal<boolean> ...

Timeline widget body component

The body of the <si-timeline-widget> is implemented in the component <si-timeline-widget-body>. You can use it for compositions.

SiTimelineWidgetBodyComponent API Documentation

selector
si-timeline-widget-body

Input Properties

Name Type Default Description
disableAutoLoadingIndicator
 boolean false Option to disable automatic start of skeleton loading indication.
initialLoadingIndicatorDebounceTime
 number 300 Initial delay time in milliseconds before enabling loading indicator. Only used once initially during construction.
numberOfItems
 number 4 Number of skeleton progress indication items.
showDescription
 boolean true Whether to show or hide the description row during skeleton progress indication.
showLoadingIndicator
 boolean false Input to start and stop the skeleton loading indication.
value
Required		 (SiTimelineWidgetItem[] | undefined) The main value to be displayed. If no value is set, the skeleton indicates the loading of the value. Disable the automatic loading mechanism by setting SiWidgetBodyBaseComponent.disableAutoLoadingIndicator .

Attributes and Methods

Name Type Default Description
ngOnChanges()
 () => void A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
ngOnInit()
 () => void A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
(readonly) showLoadingIndicator
 Signal<boolean> ...

CSS class usage

For more flexibility and control, use the CSS classes directly in the <si-card> component.

Types Documentation

(StatusType | "caution" | "primary" | "inactive")
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
((MenuItemAction | MenuItemCheckbox | MenuItemLink | MenuItemRouterLink | MenuItemGroup) & { iconOnly: boolean })
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
Represents an item in the timeline widget. Each item may contain a timestamp, a title, an icon, an optional description and optional action elements. Actions can be buttons, links, router links, or menus.
Properties
The related action of the item
action?: TimelineWidgetItemAction
Optional translatable description.
description?: TranslatableString
The icon of the item.
icon: string
The alt text of the icon
iconAlt?: TranslatableString
The color of the icon.
iconColor?: string
The stacked icon of the item.
stackedIcon?: string
The color of the stacked icon.
stackedIconColor?: string
The timestamp of the item.
timeStamp: TranslatableString
The title of the item.
title: TranslatableString
("success" | "info" | "warning" | "danger" | "caution" | "critical")
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "action"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the checkbox is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "checkbox"
extends MenuItemBase
Properties
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Submenu items for this menu item.
children: MenuItem[]
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "group"
Properties
Items that are part of the radio group.
children: [ MenuItemHeader, ...(MenuItemRadio | MenuItemHeader | MenuDivider)[] ]
type: "radio-group"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the radio is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "radio"
Properties
The label of the header.
label: string
type: "header"
Properties
type: "divider"
Properties
Badge that is rendered after the label.
badge?: (string | number)
Color of the badge (not iconBadge).
badgeColor?: string
Whether the menu item id disabled.
disabled?: boolean
Optional icon that will be rendered before the label.
icon?: string
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean)
ID that will be attached to the DOM node.
id?: string
Label that is shown to the user.
label: TranslatableString
(TimelineWidgetActionButton | TimeLineWidgetLink | TimeLineWidgetRouterLink | TimelineWidgetMenu)
Union type for all possible action items in the timeline widget.
Implement and provide this to an SiMenuFactoryComponent to receive trigger events.
Constructor
() => {}
Methods
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio), actionParam: any) => void
Will be called by SiMenuFactoryComponent if an action is defined with a string instead of a function.
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
actionParam?: any
extends TimelineWidgetActionBase
Interface representing an action item in the timeline widget.
Properties
Action that called when the item action is triggered.
action: (source: this) => void
The class name to define the button style
customClass?: string
The web font icon class name (e.g. element-settings-outline).
icon?: string from icon
Defines if only the icon is shown in the default navigation bar.
iconOnly?: boolean from iconOnly
Label that is shown to the user.
label: TranslatableString from label
type: "action"
Interface representing a menu item in the timeline widget.
Properties
menuItems: MenuItem[]
type: "menu"
Base for action items in the timeline widget.
Properties
The web font icon class name (e.g. element-settings-outline).
icon?: string
Defines if only the icon is shown in the default navigation bar.
iconOnly?: boolean
Label that is shown to the user.
label: TranslatableString
Used in events emitted from SiLinkActionService
Properties
param: any
Class
▶
Constructor
() => {}
Properties
Parameter passed to triggered menu item actions.
actionParam: InputSignal<unknown> = ...
Menu items to render. Supports legacy and current menu item models.
items: InputSignal<(readonly (MenuItem | MenuItem)[] | undefined)> = ...
linkActionService: (SiLinkActionService | null) = ...
menuActionService: (SiMenuActionService | null) = ...
Methods
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: MenuItem) => void
Parameters
item: MenuItem
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)) => void
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
(index: number, item: (MenuItem | MenuItem)) => (string | number)
Parameters
index: number
item: (MenuItem | MenuItem)
Class
▶
Constructor
() => {}
Properties
Observable which emits the link and param to run the action on.
action$: Observable<LinkAction> = this.actionSubject.asObservable()
actionSubject: Subject<LinkAction> = ...
Methods
(link: Link, param: any) => void
Emit a new link and param pair to run the action on.
Parameters
param: any

Except where otherwise noted, content on this site is licensed under MIT License.