Skip to content

TimelineCell

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

TimelineCell Properties

Property Type Required Default
Attribute string No
Headline string No
OnPress ActionOrRule No
State enum No
Subhead string No
Timestamp string No
Visible boolean No true
_Name string No

Attribute

On mobile, it will be ignored when state is Start / End.

  • type: string

Headline

  • type: string

OnPress

Action/Rule to be triggered when the image is pressed. On mobile, it will be ignored when state is Start / End.

State

An icon and a label showing the status of the timeline object.

  • type: enum

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

Value Description
Start The timeline item is a start node.
Open The task is open.
Complete The task is completed.
End The timeline item is a end node.

Subhead

On mobile, it will be ignored when state is Start / End.

  • type: string

Timestamp

The date time for the cell.

  • type: string

Visible

Only valid for static section, will be ignored in dynamic sections.

  • type: boolean
  • default: true

_Name

  • type: string

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