Card Actions
Overview
Card actions can be defined on different levels inside the card manifest. Actionable parts of the card are header, content, list items, table rows.
Action properties:
| Property | Type | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|
| type | string | Yes | The type of the action. Possible values: "Navigation", "Submit" and "Custom". | 1.15.0 | 1.65 |
| enabled | boolean | No | If the action is enabled. Default value is true. | 1.15.0 | 1.65 |
| parameters | Object | No | The parameters of the action. | 1.15.0 | 1.65 |
Parameters for Navigation action:
| Parameter | Type | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|
| url | string | No | The URL to navigate to. | 1.15.0 | 1.65 |
| target | string | No | If the browser should open a new window or use the same window. Possible values: "_blank", "_self". Default value is "_blank". | 1.15.0 | 1.65 |
In Component Card or Extension
You can use the oCard.triggerAction() method to programmatically trigger an action when
inside a Component card or from an extension.
For more info see the API
documentation
and the sample.
Examples
Header level navigation action with static URL:
{
"sap.card": {
"header": {
"title": "Some title",
"actions": [
{
"type": "Navigation",
"parameters": {
"url": "/some/url"
}
}
]
},
...
}
}
Content level navigation action with static URL and target:
{
"sap.card": {
"content": {
...
"actions": [
{
"type": "Navigation",
"parameters": {
"url": "/some/url",
"target": "_self"
}
}
]
},
...
}
}
Table row navigation action. In the example below the enabled flag is set based on if the item has a URL or not:
{
"sap.card": {
"type": "Table",
"content": {
"data": {
"json": [
{
"Name": "Comfort Easy",
"Category": "PDA & Organizers",
"url": "some/url1"
},
{
"Name": "ITelO Vault",
"Category": "PDA & Organizers"
},
{
"Name": "Notebook Professional 15",
"Category": "Notebooks",
"url": "some/url3"
}
]
},
"row": {
"columns": [
{
"title": "Name",
"value": "{Name}"
},
{
"title": "Category",
"value": "{Category}"
}
],
"actions": [
{
"type": "Navigation",
"enabled": "{= ${url}}",
"parameters": {
"url": "{url}"
}
}
]
}
}
}
}
Try it Out