List Card

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

Properties

The List Card contains an array of list items.

List item properties

Property Type 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 array 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 array No Defines actions that can be applied on the item. 1.15.0 1.65
chart Microchart No Defines the chart for the item. 1.24 1.80

Icon Properties

Property Type 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. 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 No By default it is set to "Transparent".
Note: This property is experimental and may change!
1.27.0 1.83

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}"
				}
			}
		}
	}
}

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