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 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

Provide concise key information about timeline objects. These may be tappable to drill down into full details.

Cells

Use for static Timeline. Target is ignored.

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

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

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

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

Separators

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

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 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.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"
                }
            ]
        }
    ]
}