TimelinePreview¶

The timeline preview cell provides the user with a glimpse of upcoming objects, events, or posts using a horizontal timeline sorted by chronological order. The objects in the timeline preview cell are read-only.

TimelinePreview Properties¶

Property	Type	Required	Default
Cell	TimelinePreviewCell	No
Cells	`object[]`	No
DataSubscriptions	DataSubscriptions	No
EmptySection	EmptySection	No
Footer	Footer	No
Header	Header	No
Separators	Separators	No
Target	LinkQueryFunctionTarget	No
TimestampType	`enum`	No	`"DayTime"`
Visible	`boolean`	No	`true`
_Name	`string`	No
_Type	`const`	Yes

Cell¶

type: TimelinePreviewCell

Cells¶

Use for static Timeline Preview. Target is ignored.

type: object[]| Cell | | No |

Cell¶

type: TimelinePreviewCell

DataSubscriptions¶

Array of data change events to subscribe to.

type: DataSubscriptions

EmptySection¶

A section that will be displayed when the list is empty. This only applies if you are using Target binding. Allows you to show custom label when the list is empty.

type: EmptySection

Footer¶

Footer bar to be displayed below this control's content section.

type: Footer

Header bar to be displayed above this control's content section.

type: Header

Separators¶

To provide more flexibility with rendering of controls and sections, set the visibility of the separator lines.

type: Separators

Target¶

Definition of the target binding to dynamically populate the collection. You can also set this to binding/rule to return an array of data items.

Note: If this is set to binding/rule, you must return an array of data items, you can't return Target definition.

type: LinkQueryFunctionTarget

TimestampType¶

The date time format for timestamp in timeline preview cell.

type: enum
default: DayTime

The value of this property must be one of the known values listed below.

Value	Description
`MonthDayTime`	Month, day and time format in "MMM dd hh:mm". Does not support multiple lines.
`MonthDay`	Month and day format in "MMM dd".
`Day`	Day format in "dd".
`Time`	Time format in "hh:mm".
`DayTime`	Day and time format in "dd hh:mm". Does not support multiple lines.

Visible¶

Set the visibility of this control.

type: boolean
default: true

_Name¶

type: string

_Type¶

type: const

The value of this property must be:

"Section.Type.TimelinePreview"

Example¶

Static¶

{
    "_Type": "Page",
    "_Name": "TimelinePreviewSectionPage",
    "Caption": "TimelinePreview section Page",
    "Controls": [
        {
            "_Type": "Control.Type.SectionedTable",
            "_Name": "SectionedTable",
            "Sections": [
                {
                    "_Type": "Section.Type.TimelinePreview",
                    "_Name": "StaticTimelinePreviewSection",
                    "Visible": true,
                    "Cells": [
                        {
                            "Cell": {
                                "Headline": "Start It",
                                "Timestamp": "2022-01-01T11:40:00Z",
                                "State": "Complete"
                            }
                        },
                        {
                            "Cell": {
                                "Headline": "Applied Statistics",
                                "Timestamp": "2022-01-02T14:20:00Z",
                                "State": "Complete"
                            }
                        },
                        {
                            "Cell": {
                                "Headline": "Numberic Analysis",
                                "Timestamp": "2022-06-02T09:30:00Z",
                                "State": "Open"
                            }
                        },
                        {
                            "Cell": {
                                "Headline": "Complete Event",
                                "Timestamp": "2023-02-02T17:30:00Z",
                                "State": "End"
                            }
                        },
                        {
                            "Cell": {
                                "Headline": "Today Test",
                                "Timestamp": "/MDKDevApp/Rules/timeline/GetToday.js",
                                "State": "Open"
                            }
                        }
                    ],
                    "TimestampType": "MonthDayTime"
                }
            ]
        }
    ]
}

Dynamic¶

{
    "_Type": "Page",
    "_Name": "TimelinePreviewSectionPage",
    "Caption": "Timeline Preview section Page",
    "Controls": [
        {
            "_Type": "Control.Type.SectionedTable",
            "_Name": "SectionedTable",
            "Sections": [
                {
                    "_Type": "Section.Type.TimelinePreview",
                    "_Name": "DynamicTimelinePreviewSection",
                    "Visible": true,
                    "Cell": {
                        "Headline": "{OrderDescription}",
                        "Timestamp": "{CreationDate}",
                        "State": "/MDKDevApp/Rules/timeline/TimestampState.js"
                    },
                    "Target": {
                        "EntitySet": "MyWorkOrderHeaders",
                        "Service": "/MDKDevApp/Services/Amw.service",
                        "QueryOptions": "$top=20"
                    },
                    "TimestampType": "DayTime"
                }
            ]
        }
    ]
}

TimelinePreview¶