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