List Card

The List Card is used to display multiple list items of various types.

Properties

Property	Type	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
minItems	int	No	The minimum number of items that are expected. This property is used to calculate the minimum height of the card.	1.50.0	1.109
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		Yes	The title of the item.	1.14.0	1.62
description	string\|Description		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 state of the item.	1.14.0	1.62
highlightText	string		No	Defines the semantics of the "highlight" property. It is used for accessibility purposes.	1.53.0	1.113
icon	Icon		No	The icon of the item. Note: The default value of the icon depends on the icon shape	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	ActionsStrip\|ActionsStripItem[]		No	Actions strip. Since version 1.121 items can be created from template.	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

Description Properties

Property	Type	Default Value	Required	Description	Schema Version	Since
value	string		Yes	The description of the item.	1.14.0	1.62
visible	boolean	true	No	Visibility of the description. Note: This property is experimental and may change!	1.56.0	1.116

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
fitType	sap.m.AvatarImageFitType	Cover	No	Used to determine how the image will fit in the icon space.	1.65.0	1.126
visible	boolean	true	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	sap.ui.core.ValueState		Yes	The item state	1.37.0	1.96
showStateIcon	boolean	false	No	Defines if a state icon is shown.	1.50.0	1.110
customStateIcon	string		No	The custom state icon. If it is set, then "showStateIcon" property should be set to true.	1.53.0	1.113
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