Timeline

Last update: Edit

1 Introduction

You can use the Timeline widget to create a vertical list of events with descriptions.

2 Configuration

2.1 Choosing the Render Type

For the sake of simplicity, there are two modes available to create a timeline:

  • Basic – this is the default mode in which you can select the Data source, Title, Description, and Time indication on the Data Source tab and the Icon on the General tab to quickly implement a timeline in your app
  • Custom – enable this mode by setting Custom Visualization to Yes on the General tab to freely model everything that will be shown in the timeline, such as the title, icon, group header/day divider, time indication, and content

2.2 Selecting a Data Source

On the Data Source tab for both basic and custom modes, you must select the Data source that will be used.

Since the widget will try to group the events based on date, make sure there is a date-time attribute in the data-source entity itself. For details, see the Showing the Group Header section below.

2.3 Showing the Group Header

On the General tab for both basic and custom modes, you can opt to show a day divider by selecting Yes for Group Events and selecting a Group Attribute.

Selecting No for Group Events will make the timeline look like one single flow.

2.4 Basic Mode-Specific Fields

In the basic mode, configure the following properties:

  • Title – required
  • Description
  • Time indication
  • Icon – you can use glyphicons and images from the connected data-source entity; if an Icon is not provided, it will be shown as a circle with a background color specified in .widget-timeline-icon-circle

In the basic mode, you can show a group header in the following formats:

Option Explanation Example
Day / Day name This will show the full name of the weekday. Monday
Day / Day number and month This will show a zero-padded day number and the full name of the month. 01 March
Day / Day number, month, and year This will show the default date format based on the current language. 31/12/2020
Month / Month name This will show the full name of the month. April
Month / Month and year This will show the short name of the month and the full year. Apr 2020
Year This will show the full year. 2020

2.5 Custom Mode-Specific Fields

In the custom mode, the widget will generate five drop-zones for the icon, group header, title, time indication, and content. Since none of these fields are required, feel free to create your own timeline with any combination.