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