Table Card
The Table Card is used to display multiple items in table view.
Properties
Property | Type | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
row | TableRow | Yes | The row template from which all the rows in the table will be created. | 1.15.0 | 1.65 |
maxItems | int | No | The maximum number of items. | 1.15.0 | 1.65 |
group | Group | No | Defines whether and how items are grouped. | 1.37.0 | 1.96 |
TableRow properties
Property | Type | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
columns | TableColumn[] | Yes | Defines the columns attributes. | 1.15.0 | 1.65 |
actions | Actions[] | No | Actions that are triggered when the row is pressed. | 1.15.0 | 1.65 |
TableColumn properties
Every column can display different thing based on the set properties.
Property | Type | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
title | string | No | The title of the column. | 1.15.0 | 1.65 |
width | sap.ui.core.CSSSize | No | Defines the width of the column. | 1.15.0 | 1.65 |
hAlign | sap.ui.core.TextAlign | No | Defines the horizontal alignment of the column content. | 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 | sap.ui.core.ValueState | No | Defines the state of the column. Can be used only together with value property. |
1.15.0 | 1.65 |
identifier | boolean | No | Defines whether the column is an identifier. | 1.15.0 | 1.65 |
progressIndicator | ProgressIndicator | 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 | Default Value | 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. 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 | "XS" | No |
One of "XS", "S" or "M".
Note: This property is experimental and may change! |
1.26.0 | 1.82 |
backgroundColor | sap.m.AvatarColor | "Transparent" | No |
The background color.
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 |
ProgressIndicator properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
percent | float | 0 | No | Specifies the numerical value in percent for the length of the progress bar. | 1.15.0 | 1.65 |
text | string | No | The text to be displayed in the bar. | 1.15.0 | 1.65 | |
state | sap.ui.core.ValueState | "None" | No | The state of the bar. | 1.15.0 | 1.65 |
Group properties
Property | Type | 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 | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
path | string | Yes | The binding path used for sorting | 1.37.0 | 1.96 |
dir | string | No | The direction of the sorting order - "ASC" (default) or "DESC". | 1.37.0 | 1.96 |
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}" }], "group": { "title": "{= ${statusState} === 'Success' ? 'Delivered : 'Not Delivered'}", "order": { "path": "statusState", "dir": "ASC" } } } } } }
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