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