List Card
The List Card is used to display multiple list items of various types.
Properties
The List Card contains an array of list items.
List item properties
| Property | Type | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|
| title | string | No | The title of the item. | 1.14.0 | 1.62 |
| description | string | No | The description of the item. | 1.14.0 | 1.62 |
| info | array | No | Represents additional information text. | 1.14.0 | 1.62 |
| highlight | string | No | The highlight of the item. | 1.14.0 | 1.62 |
| icon | Icon | No | The icon of the item. | 1.14.0 | 1.62 |
| actions | array | No | Defines actions that can be applied on the item. | 1.15.0 | 1.65 |
| chart | Microchart | No | Defines the chart for the item. | 1.24 | 1.80 |
Icon Properties
| Property | Type | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|
| src | string | No | Icon name or source URL | 1.14.0 | 1.62 |
| shape | sap.m.AvatarShape | No | The shape of the icon. | 1.26.0 | 1.82 |
| alt | string | No | Alternative text for the icon. | 1.26.0 | 1.82 |
| size | string | No |
One of "XS", "S" or "M". By default it is set to "S" for the items that have "title" and
"description" and "XS" in the other cases. Note: This property is experimental and may change! |
1.26.0 | 1.82 |
| backgroundColor | sap.m.AvatarColor | No |
By default it is set to "Transparent". Note: This property is experimental and may change! |
1.27.0 | 1.83 |
Example
Define the type and data for the card:
{
"sap.app": {
"type": "card",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.card": {
"type": "List",
"header": {
"title": "Request list content Card",
"subTitle": "Card subtitle",
"icon": {
"src": "sap-icon://accept"
},
"status": {
"text": "8 of 17"
}
},
"content": {
"data": {
"request": {
"url": "./cardcontent/sometimes.json"
}
},
"item": {
"icon": {
"src": "{icon}"
},
"title": "{Name}",
"description": "{Description}",
"highlight": "{state}",
"info": {
"value": "{info}",
"state": "{infoState}"
}
}
}
}
}
The content of the sometimes.json that we are requesting:
[{
"Name": "Notebook Basic 15",
"Description": "Notebook Basic 15 with 2,80 GHz quad core, 15\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
"Id": "HT-1000",
"SubCategoryId": "Notebooks",
"icon": "../images/Woman_avatar_01.png",
"state": "Information",
"info": "27.45 EUR",
"infoState": "Success"
},
{
"Name": "Notebook Basic 17",
"Description": "Notebook Basic 17 with 2,80 GHz quad core, 17\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
"Id": "HT-1001",
"SubCategoryId": "Notebooks",
"icon": "../images/Woman_avatar_01.png",
"state": "Success",
"info": "27.45 EUR",
"infoState": "Success"
},
{
"Name": "Notebook Basic 18",
"Description": "Notebook Basic 18 with 2,80 GHz quad core, 18\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro",
"Id": "HT-1002",
"SubCategoryId": "Notebooks",
"icon": "../images/Woman_avatar_01.png",
"state": "Warning",
"info": "9.45 EUR",
"infoState": "Error"
},
{
"Name": "Notebook Basic 19",
"Description": "Notebook Basic 19 with 2,80 GHz quad core, 19\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro",
"Id": "HT-1003",
"SubCategoryId": "Notebooks",
"icon": "../images/Woman_avatar_01.png",
"state": "Error",
"info": "9.45 EUR",
"infoState": "Error"
},
{
"Name": "ITelO Vault",
"Description": "Digital Organizer with State-of-the-Art Storage Encryption",
"Id": "HT-1007",
"SubCategoryId": "PDAs & Organizers",
"icon": "../images/Woman_avatar_01.png",
"state": "Success",
"info": "29.45 EUR",
"infoState": "Success"
},
{
"Name": "Notebook Professional 15",
"Description": "Notebook Professional 15 with 2,80 GHz quad core, 15\" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro",
"Id": "HT-1010",
"SubCategoryId": "Notebooks",
"icon": "../images/Woman_avatar_01.png",
"state": "Success",
"info": "29.45 EUR",
"infoState": "Success"
},
{
"Name": "Notebook Professional 26",
"Description": "Notebook Professional 15 with 2,80 GHz quad core, 15\" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro",
"Id": "HT-1022",
"SubCategoryId": "Notebooks",
"icon": "../images/Woman_avatar_01.png",
"state": "Success",
"info": "29.45 EUR",
"infoState": "Success"
},
{
"Name": "Notebook Professional 27",
"Description": "Notebook Professional 15 with 2,80 GHz quad core, 15\" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro",
"Id": "HT-1024",
"SubCategoryId": "Notebooks",
"icon": "../images/Woman_avatar_01.png",
"state": "Success",
"info": "29.45 EUR",
"infoState": "Success"
}]
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