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