Timeline view

Owned by Thomas Körbler
May 23, 2024
2 min read

The timeline view lets you represent data in a chronological order.

Timeline views accept these configuration fields:

dateStartField (string, required)

The field key that should be used to get the start of the timeline activity.

dateEndField (string, optional)

Same as the dateStartField but for the end of the activity. If left blank, the activity will be considered a one-day event and be displayed as such.

For example, a section config like this:

sections: section: - name: customer-map group: CRM type: timeline dateStartField: Begin dateEndField: End

Would expect each entry to have a Begin and End field with the begin/end dates.

Example data for this section config:

{ "lastUpdated": 1658756953, "sourceIdentifier": "tasks", "data": { "Begin": "2022-04-07", "Title": "Activate SSL-Certificates", "End": null }, "name": "Activate SSL-Certificates", "key": "POR-4" }, { "data": { "Begin": "2022-03-30", "Title": "Assign Roles", "End": "2022-04-04" }, "name": "Assign Roles", "key": "POR-1" },

Dates need to be supplied in the ISO 8601 format, YYYY-MM-DD. For example: 2022-04-07

groupFieldKey (string, optional)

Defines over which field the rows should be grouped. Consider the following section data:

{ "data": { "Begin": "2022-04-07", "Components": "Configuration" }, "name": "Configure Sources", }, { "data": { "Begin": "2022-04-07", "Components": "Infrastructure" } "name": "Configurate SSL-Certificates" }, { "data": { "Begin": "2022-04-10", "Components": "Infrastructure" } "name": "Install Binaries" } { "data": { "Begin": "2022-04-01", "Components": "Infrastructure" } "name": "Setup Environment" } { "data": { "Begin": "2022-04-08", "Components": "Infrastructure" } "name": "Assign Roles" }

If you wanted to group rows that have the same value in the Components field, you could add a groupFieldKey with the value Components, and the timeline will group rows that belong together:

groupStyle (enum, optional)

Can be either set to expandable (default) or merged. If set to expandable, groups will have a label with a button and the group can be expanded/collapsed (see screenshot above). If set to merged, the groups will be merged to a single swim lane. This is only recommended if there is no overlap between any items inside a group.