Skip to content

Timeline

The Timeline displays a list of items (objects, events, or posts) in chronological order. The information on the timeline view are presented as tappable cells, and are focused on the most important information about the object.

Timeline Properties

Property Type Required Default
Cell TimelineCell Optional
Cells object[] Optional
DataSubscriptions DataSubscriptions Optional
EmptySection EmptySection Optional
Footer Footer Optional
Header Header Optional
Target LinkQueryFunctionTarget Optional
TimestampType enum Optional "DayTime"
Visible boolean Optional true
_Name string Optional
_Type const Required

Cell

Cells

Use for static Timeline. Target is ignored.

  • type: object[]| Cell | | Optional |

Cell

DataSubscriptions

Array of data change events to subscribe to.

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.

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

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

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.

TimestampType

The date time format for timestamp in tiimeline cell

  • type: enum
  • default: "DayTime"

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

TimestampType Known Values

Value Description
MonthDayTime
MonthDay
Day
Time
DayTime

Visible

Set the visibility of this control.

  • type: boolean
  • default: true

_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Section.Type.Timeline"

Example

Static

{
    "_Type": "Page",
    "_Name": "TimelineSectionPage",
    "Caption": "Timeline section Page",
    "Controls": [
        {
            "_Type": "Control.Type.SectionedTable",
            "_Name": "SectionedTable",
            "Sections": [
                {
                    "_Type": "Section.Type.Timeline",
                    "_Name": "StaticTimelineSection",
                    "Visible": true,
                    "Cells": [
                        {
                            "Cell": {
                                "Headline": "Start It",
                                "Timestamp": "2022-01-01T11:40:00Z",
                                "State": "Start"
                            }
                        },
                        {
                            "Cell": {
                                "Headline": "Applied Statistics",
                                "Subhead": "Class",
                                "Attribute": "Room 5461",
                                "Timestamp": "2022-01-02T14:20:00Z",
                                "State": "Complete",
                                "OnPress": "/MDKDevApp/Actions/Toast/Success.action"
                            }
                        },
                        {
                            "Cell": {
                                "Headline": "Numberic Analysis",
                                "Subhead": "Class",
                                "Attribute": "Room 4223",
                                "Timestamp": "2022-06-02T09:30:00Z",
                                "State": "Open",
                                "OnPress": "/MDKDevApp/Actions/Toast/Success.action"
                            }
                        },
                        {
                            "Cell": {
                                "Headline": "Complete Event",
                                "Timestamp": "2023-02-02T17:30:00Z",
                                "State": "End"
                            }
                        },
                        {
                            "Cell": {
                                "Headline": "Today Test",
                                "Subhead": "Class",
                                "Attribute": "Room 8888",
                                "Timestamp": "/MDKDevApp/Rules/timeline/GetToday.js",
                                "State": "Open",
                                "OnPress": "/MDKDevApp/Actions/Toast/Success.action"
                            }
                        }
                    ],
                    "TimestampType": "MonthDayTime"
                }
            ]
        }
    ]
}

Dynamic

{
    "_Type": "Page",
    "_Name": "TimelineSectionPage",
    "Caption": "Timeline section Page",
    "Controls": [
        {
            "_Type": "Control.Type.SectionedTable",
            "_Name": "SectionedTable",
            "Sections": [
                {
                    "_Type": "Section.Type.Timeline",
                    "_Name": "DynamicTimelineSection",
                    "Visible": true,
                    "Cell": {
                        "Headline": "{OrderDescription}",
                        "Subhead": "{OrderId}",
                        "Attribute": "{Priority}",
                        "Timestamp": "{CreationDate}",
                        "State": "/MDKDevApp/Rules/timeline/TimestampState.js",
                        "OnPress": "/MDKDevApp/Actions/Toast/Success.action"
                    },
                    "Target": {
                        "EntitySet": "MyWorkOrderHeaders",
                        "Service": "/MDKDevApp/Services/Amw.service",
                        "QueryOptions": "$top=20"
                    },
                    "TimestampType": "DayTime"
                }
            ]
        }
    ]
}