List Card
The List Card is used to display multiple list items of various types.
Properties
| Property | Type | Default Value | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|---|
| item | ListItem | Yes | The item template from which all the items in the list will be created. | 1.14.0. | 1.62 | |
| maxItems | int | No | The maximum number of items. | 1.15.0 | 1.65 | |
| group | Group | No | Defines whether and how items are grouped. | 1.35.0 | 1.96 |
ListItem properties
| Property | Type | Default Value | 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 | ValueStateItem | 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 | Actions[] | No | Actions that are triggered when the item is pressed. | 1.15.0 | 1.65 | |
| chart | Microchart | No | Defines the chart for the item. | 1.24.0 | 1.80 | |
| actionsStrip | ActionsStripItem[] | No |
An array of items that will be displayed in the footer.
Note: This property is experimental. |
1.35.0 | 1.93 | |
| attributes | ValueStateItem[] | No | An array of attributes. | 1.37.0 | 1.96 | |
| attributesLayoutType | string | "TwoColumns" | No | Defines how the attributes will be arranged. Possible values are "OneColumn" and "TwoColumns". | 1.37.0 | 1.96 |
Icon properties
| Property | Type | Default Value | 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. If not provided, a default value is set, which might be confusing for screen reader users, when there are more than one card in the view. | 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 | "Transparent" | No | The background color of the icon. Note: This property is experimental and may change! | 1.27.0 | 1.83 |
ValueStateItem properties
| Property | Type | Default Value | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|---|
| value | string | Yes | The item text | 1.37.0 | 1.96 | |
| state | string | Yes | The item state | 1.37.0 | 1.96 |
Group properties
| Property | Type | Default Value | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|---|
| title | string | Yes | Title of the group | 1.37.0 | 1.96 | |
| order | Order | Yes | The sorting order of the group. | 1.37.0 | 1.96 |
Group order properties
| Property | Type | Default Value | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|---|
| path | string | Yes | The binding path used for sorting | 1.37.0 | 1.96 | |
| dir | string | "ASC" | No | The direction of the sorting order - "ASC" or "DESC". | 1.37.0 | 1.96 |
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}"
}
"group": {
"title": "{= ${infoState} === 'Success' ? 'Successful' : 'Unsuccessful'}",
"order": {
"path": "infoState",
"dir": "ASC"
}
}
}
}
}
}
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