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 | |
visible | boolean | true | No | Visibility of the item. | 1.46.0 | 1.106 |
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