Timeline Card

The Timeline Card is used to show time-related content.

Properties

Property Type Default Value Required Description Schema Version Since
item TimelineItem Yes The item template from which all the items in the timeline will be created. 1.15.0. 1.63
maxItems int No The maximum number of items. 1.15.0 1.63

TimelineItem properties

Property Type Required Description Schema Version Since
title string Yes The title of the timeline item. 1.15.0 1.63
description string No The description of the timeline item. 1.15.0 1.63
dateTime int|string No The dateTime value of the timeline item. It can be:
  • an integer representing Unix time (also known as POSIX or Epoch time) in milliseconds
  • a string with an integer representing Unix time in milliseconds
  • a string like "Date([number])", where [number] represents Unix time in milliseconds
Any other format will be parsed using Date.parse. The latter is not recommended, as different web browsers implement this function differently, which may lead to unpredictable behavior.
1.15.0 1.63
owner string No The owner of the timeline item. 1.15.0 1.63
ownerImage string No The owner image of the timeline item. 1.15.0 1.63
icon icon No The icon of the timeline item. 1.15.0 1.63
actions Actions[] No Actions that are triggered when the item is pressed. 1.38.0 1.97

Example

Define the type and data for the card:

{
	"sap.card": {
		"type": "Timeline",
		"content" :{
			"data": {
				"request": {
					"url": "./employees.json"
				}
			}
		}
	}
}

The content of the employees.json which we are requesting:

[
	{
	  "Name": "Laurent Dubois",
	  "JobTitle": "Accounts Payable Manager",
	  "Photo": "../images/Laurent_Dubois.png",
	  "Icon": "sap-icon://activity-individual",
	  "JobResponsibilities": "I am Laurent. I put great attention to detail.",
	  "HireDate": "Date(1371020400000)"
	},
	{
	  "Name": "Sabine Mayer",
	  "JobTitle": "Configuration Expert",
	  "Photo": "../images/Sabine_Mayer.png",
	  "Icon": "sap-icon://settings",
	  "JobResponsibilities": "I am Sabine. And can't wait to get to know the team.",
	  "HireDate": "Date(1376290800000)"
	},
	{
	  "Name": "Alain Chevalier",
	  "JobTitle": "Credit Analyst",
	  "Photo": "../images/Alain_Chevalier.png",
	  "Icon": "sap-icon://manager-insight",
	  "JobResponsibilities": "I am Alain. I put great attention to detail.",
	  "HireDate": "Date(1332403200000)"
	},
	{
	  "Name": "Monique Legrand",
	  "JobTitle": "Accountant Manager",
	  "Photo": "../images/Monique_Legrand.png",
	  "JobResponsibilities": "I am Monique. And i am the new head of Accounting.",
	  "Icon": "sap-icon://account",
	  "HireDate": "Date(1422777600000)"
	}
]

Define the header:

"header": {
	"title": "New Team Members",
	"icon": {
		"src": "sap-icon://group"
	}
}

Define the time content:

"content": {
	"item": {
		"dateTime" : {
			"label": "{{hireDate_label}}",
			"value": "{HireDate}"
		},
		"description" : {
			"label": "{{jobResponsibilities_label}}",
			"value": "{JobResponsibilities}"
		},
		"title" : {
			"label": "{{jobTitle_label}}",
			"value": "{JobTitle}"
		},
		"owner" : {
			"label": "{{name_label}}",
			"value": "{Name}"
		},
		"ownerImage" : {
			"label": "{{picture_label}}",
			"value": "{Photo}"
		},
		"icon": {
			"src": "{Icon}"
		}
	}
}

Here is the final manifest definition:

{
	"sap.card": {
		"type": "Timeline",
		"header": {
			"title": "New Team Members",
			"icon": {
				"src": "sap-icon://group"
			}
		},
		"content": {
			"data": {
				"request": {
					"url": "./employees.json"
				}
			},
			"item": {
				"dateTime" : {
					"label": "{{hireDate_label}}",
					"value": "{HireDate}"
				},
				"description" : {
					"label": "{{jobResponsibilities_label}}",
					"value": "{JobResponsibilities}"
				},
				"title" : {
					"label": "{{jobTitle_label}}",
					"value": "{JobTitle}"
				},
				"owner" : {
					"label": "{{name_label}}",
					"value": "{Name}"
				},
				"ownerImage" : {
					"label": "{{picture_label}}",
					"value": "{Photo}"
				},
				"icon": {
					"src": "{Icon}"
				}
			}
		}
	}
}

Create the view to display the card:

<mvc:View xmlns:w="sap.ui.integration.widgets">
	<w:Card manifest="./manifest.json" width="400px" height="auto" />
</mvc:View>
Try it Out