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