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