Table Card
The Table Card is used to display multiple items in table view.
Properties
The Table Card contains an array of rows.
Table row properties
Property | Type | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
columns | array | No | Defines the columns attributes. | 1.15.0 | 1.65 |
actions | Actions[] | No | Defines actions that can be applied on the row. | 1.15.0 | 1.65 |
Table column properties
Property | Type | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
title | string | No | Defines language-dependent title of the column. | 1.15.0 | 1.65 |
width | string | No | Defines the width of the column. | 1.15.0 | 1.65 |
hAlign | string | No | Defines the horizontal alignment of the column content. For a list of possible values see sap.ui.core.TextAlign. | 1.19.0 | 1.75 |
value | string | No | Represents the text value of the column. | 1.15.0 | 1.65 |
icon | Icon | No | Represents column with icon. | 1.15.0 | 1.65 |
state | string | No | Defines the state of the column. | 1.15.0 | 1.65 |
identifier | boolean | No | Defines whether the column is an identifier. | 1.15.0 | 1.65 |
progressIndicator | string | No | Defines the progress indicator attributes. | 1.15.0 | 1.65 |
visible | boolean | No | Determines the visibility of the column | 1.25.0 | 1.81 |
actions | Actions[] | No | Defines actions that can be applied on the column. Actions can be applied only on columns that are identifiers or text. | 1.31.0 | 1.87 |
Icon Properties
Property | Type | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
src | string | No | Icon name or source URL | 1.15.0 | 1.65 |
shape | sap.m.AvatarShape | No | The shape of the icon. | 1.15.0 | 1.65 |
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 "XS". 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:
To bind row information we need to provide a path to the data. Use the root path to bind the column information, as shown in the example below.
{ "sap.app": { "id": "card.explorer.table.card", "type": "card", "applicationVersion": { "version": "1.0.0" } }, "sap.card": { "type": "Table", "header": { "title": "Sales Orders for Key Accounts", "subTitle": "Today" }, "content": { "data": { "request": { "url": "./cardcontent/tableitems.json" }, "path": "/results" }, "row": { "columns":[{ "title": "{/columns/0/title}", "value": "{salesOrder}", "identifier": "{/columns/0/identifier}", "visible": "{/columns/0/visibleFlag}" }, { "title": "{/columns/1/title}", "value": "{customerName}", "visible": "{/columns/1/visibleFlag}" }, { "title": "{/columns/2/title}", "value": "{netAmount}", "hAlign": "End", "visible": "{/columns/2/visibleFlag}" }, { "title": "{/columns/3/title}", "value": "{status}", "state": "{statusState}", "visible": "{/columns/3/visibleFlag}" }] } } } }
The content of the tableitems.json that we are requesting:
{ "results": [ { "salesOrder": "5000010050", "customerName": "Robert Brown Entertainment", "netAmount": "2K USD", "status": "Delivered", "statusState": "Success" }, { "salesOrder": "5000010051", "customerName": "Entertainment Argentinia", "netAmount": "127k USD", "status": "Canceled", "statusState": "Error" }, { "salesOrder": "5000010052", "customerName": "Brazil Technologies", "netAmount": "8K USD", "status": "In Progress", "statusState": "Warning" } ], "columns": [ { "title": "Sales Order", "visibleFlag": true, "identifier": true }, { "title": "Customer", "visibleFlag": true }, { "title": "Net Amount", "visibleFlag": false }, { "title": "Status", "visibleFlag": true } ] }
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