Timeline dashboard widget¶

Usage¶

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

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¶

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 icons or status. The header action can support any action as needed.

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.

Code¶

We support the 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],
  standalone: true
}) 

SiTimelineWidgetComponent API Documentation¶

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		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 ¶	(undefined | SiTimelineWidgetItem[])		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¶

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¶

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 ¶	(undefined | SiTimelineWidgetItem[])		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¶

CSS class usage¶

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

Types Documentation¶