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 |
initials | string | No | Used as fallback if the "src" property is not set or there is an issue with the resource. Up to two Latin letters can be displayed. If there are more than two letters, or if there's a non-Latin character present, a default image placeholder will be created. | 1.47.0 | 1.107 | |
visible | boolean | No | Defines whether the icon should be displayed. | 1.48.0 | 1.108 |
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}", "visible": true }, "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