Timeline Card

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

Properties

The Timeline Card contains an array of timeline items.

Timeline item 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 string No The dateTime value of the timeline item. 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

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