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